diff --git a/package-lock.json b/package-lock.json
index 04d098e76..211e3c397 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -88,6 +88,7 @@
         "react-native-collapsible": "1.6.0",
         "react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c",
         "react-native-device-info": "8.4.8",
+        "react-native-dialog": "9.2.0",
         "react-native-gesture-handler": "2.1.0",
         "react-native-get-random-values": "1.7.2",
         "react-native-immersive": "2.0.0",
@@ -15080,6 +15081,14 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-dialog": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz",
+      "integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA==",
+      "peerDependencies": {
+        "react-native": ">=0.63.0"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz",
@@ -31586,6 +31595,11 @@
       "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-8.4.8.tgz",
       "integrity": "sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q=="
     },
+    "react-native-dialog": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz",
+      "integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA=="
+    },
     "react-native-gesture-handler": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz",
diff --git a/package.json b/package.json
index 8e1d7c602..9bae10b0d 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "react-native-collapsible": "1.6.0",
     "react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c",
     "react-native-device-info": "8.4.8",
+    "react-native-dialog": "9.2.0",
     "react-native-gesture-handler": "2.1.0",
     "react-native-get-random-values": "1.7.2",
     "react-native-immersive": "2.0.0",
diff --git a/react/features/authentication/components/native/WaitForOwnerDialog.js b/react/features/authentication/components/native/WaitForOwnerDialog.js
index 4e618f635..91ed328b6 100644
--- a/react/features/authentication/components/native/WaitForOwnerDialog.js
+++ b/react/features/authentication/components/native/WaitForOwnerDialog.js
@@ -63,14 +63,14 @@ class WaitForOwnerDialog extends Component<Props> {
 
         return (
             <ConfirmDialog
-                cancelKey = 'dialog.Cancel'
-                contentKey = {
+                cancelLabel = 'dialog.Cancel'
+                confirmLabel = 'dialog.IamHost'
+                descriptionKey = {
                     {
                         key: 'dialog.WaitForHostMsgWOk',
                         params: { room }
                     }
                 }
-                okKey = 'dialog.Ok'
                 onCancel = { this._onCancel }
                 onSubmit = { this._onLogin } />
         );
diff --git a/react/features/base/dialog/components/functions.native.js b/react/features/base/dialog/components/functions.native.js
new file mode 100644
index 000000000..4780af188
--- /dev/null
+++ b/react/features/base/dialog/components/functions.native.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { brandedDialog as styles } from './native';
+
+/**
+ * Renders a specific {@code string} which may contain HTML.
+ *
+ * @param {string|undefined} html - The {@code string} which may
+ * contain HTML to render.
+ * @returns {ReactElement[]|string}
+ */
+export function renderHTML(html) {
+    if (typeof html === 'string') {
+        // At the time of this writing, the specified HTML contains a couple
+        // of spaces one after the other. They do not cause a visible
+        // problem on Web, because the specified HTML is rendered as, well,
+        // HTML. However, we're not rendering HTML here.
+
+        // eslint-disable-next-line no-param-reassign
+        html = html.replace(/\s{2,}/gi, ' ');
+
+        // Render text in <b>text</b> in bold.
+        const opening = /<\s*b\s*>/gi;
+        const closing = /<\s*\/\s*b\s*>/gi;
+        let o;
+        let c;
+        let prevClosingLastIndex = 0;
+        const r = [];
+
+        // eslint-disable-next-line no-cond-assign
+        while (o = opening.exec(html)) {
+            closing.lastIndex = opening.lastIndex;
+
+            // eslint-disable-next-line no-cond-assign
+            if (c = closing.exec(html)) {
+                r.push(html.substring(prevClosingLastIndex, o.index));
+                r.push(
+                    <Text style = { styles.boldDialogText }>
+                        { html.substring(opening.lastIndex, c.index) }
+                    </Text>);
+                opening.lastIndex
+                    = prevClosingLastIndex
+                    = closing.lastIndex;
+            } else {
+                break;
+            }
+        }
+        if (prevClosingLastIndex < html.length) {
+            r.push(html.substring(prevClosingLastIndex));
+        }
+
+        return r;
+    }
+
+    return html;
+}
diff --git a/react/features/base/dialog/components/native/AlertDialog.js b/react/features/base/dialog/components/native/AlertDialog.js
index c75a073f9..fc0d0556b 100644
--- a/react/features/base/dialog/components/native/AlertDialog.js
+++ b/react/features/base/dialog/components/native/AlertDialog.js
@@ -6,6 +6,7 @@ import { Text } from 'react-native';
 import { translate } from '../../../i18n';
 import { connect } from '../../../redux';
 import { _abstractMapStateToProps } from '../../functions';
+import { renderHTML } from '../functions.native';
 
 import { type Props as AbstractProps } from './BaseDialog';
 import BaseSubmitDialog from './BaseSubmitDialog';
@@ -36,7 +37,7 @@ class AlertDialog extends BaseSubmitDialog<Props, *> {
         const content
             = typeof contentKey === 'string'
                 ? t(contentKey)
-                : this._renderHTML(t(contentKey.key, contentKey.params));
+                : renderHTML(t(contentKey.key, contentKey.params));
 
         return (
             <Text style = { _dialogStyles.text }>
@@ -44,8 +45,6 @@ class AlertDialog extends BaseSubmitDialog<Props, *> {
             </Text>
         );
     }
-
-    _renderHTML: string => Object | string;
 }
 
 export default translate(connect(_abstractMapStateToProps)(AlertDialog));
diff --git a/react/features/base/dialog/components/native/BaseDialog.js b/react/features/base/dialog/components/native/BaseDialog.js
index 5356feb9a..34c6ce105 100644
--- a/react/features/base/dialog/components/native/BaseDialog.js
+++ b/react/features/base/dialog/components/native/BaseDialog.js
@@ -94,59 +94,6 @@ class BaseDialog<P: Props, S: State> extends AbstractDialog<P, S> {
      * @returns {ReactElement}
      */
     _renderContent: () => Object;
-
-    /**
-     * Renders a specific {@code string} which may contain HTML.
-     *
-     * @param {string|undefined} html - The {@code string} which may
-     * contain HTML to render.
-     * @returns {ReactElement[]|string}
-     */
-    _renderHTML(html: ?string) {
-        if (typeof html === 'string') {
-            // At the time of this writing, the specified HTML contains a couple
-            // of spaces one after the other. They do not cause a visible
-            // problem on Web, because the specified HTML is rendered as, well,
-            // HTML. However, we're not rendering HTML here.
-
-            // eslint-disable-next-line no-param-reassign
-            html = html.replace(/\s{2,}/gi, ' ');
-
-            // Render text in <b>text</b> in bold.
-            const opening = /<\s*b\s*>/gi;
-            const closing = /<\s*\/\s*b\s*>/gi;
-            let o;
-            let c;
-            let prevClosingLastIndex = 0;
-            const r = [];
-
-            // eslint-disable-next-line no-cond-assign
-            while (o = opening.exec(html)) {
-                closing.lastIndex = opening.lastIndex;
-
-                // eslint-disable-next-line no-cond-assign
-                if (c = closing.exec(html)) {
-                    r.push(html.substring(prevClosingLastIndex, o.index));
-                    r.push(
-                        <Text style = { styles.boldDialogText }>
-                            { html.substring(opening.lastIndex, c.index) }
-                        </Text>);
-                    opening.lastIndex
-                        = prevClosingLastIndex
-                        = closing.lastIndex;
-                } else {
-                    break;
-                }
-            }
-            if (prevClosingLastIndex < html.length) {
-                r.push(html.substring(prevClosingLastIndex));
-            }
-
-            return r;
-        }
-
-        return html;
-    }
 }
 
 export default BaseDialog;
diff --git a/react/features/base/dialog/components/native/BaseSubmitDialog.js b/react/features/base/dialog/components/native/BaseSubmitDialog.js
index cd94d262c..d07036e44 100644
--- a/react/features/base/dialog/components/native/BaseSubmitDialog.js
+++ b/react/features/base/dialog/components/native/BaseSubmitDialog.js
@@ -84,8 +84,6 @@ class BaseSubmitDialog<P: Props, S: *> extends BaseDialog<P, S> {
 
     _onSubmit: () => boolean;
 
-    _renderHTML: string => Object | string;
-
     /** .
      * Renders the actual content of the dialog defining what is about to be
      * submitted. E.g. A simple confirmation (text, properly wrapped) or a
diff --git a/react/features/base/dialog/components/native/ConfirmDialog.js b/react/features/base/dialog/components/native/ConfirmDialog.js
index 98ba5d2a4..3d96974e1 100644
--- a/react/features/base/dialog/components/native/ConfirmDialog.js
+++ b/react/features/base/dialog/components/native/ConfirmDialog.js
@@ -1,107 +1,165 @@
 // @flow
 
 import React from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { Platform, View } from 'react-native';
+import Dialog from 'react-native-dialog';
 
 import { translate } from '../../../i18n';
 import { connect } from '../../../redux';
-import { StyleType } from '../../../styles';
-import { _abstractMapStateToProps } from '../../functions';
+import AbstractDialog from '../AbstractDialog';
+import { renderHTML } from '../functions.native';
 
-import { type Props as BaseProps } from './BaseDialog';
-import BaseSubmitDialog from './BaseSubmitDialog';
-import { brandedDialog } from './styles';
+import styles from './styles';
 
-type Props = BaseProps & {
-
-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _dialogStyles: StyleType,
-
-    /**
-     * Untranslated i18n key of the content to be displayed.
-     *
-     * NOTE: This dialog also adds support to Object type keys that will be
-     * translated using the provided params. See i18n function
-     * {@code translate(string, Object)} for more details.
-     */
-    contentKey: string | { key: string, params: Object},
-
-    /**
-     * The handler for the event when clicking the 'confirmNo' button.
-     * Defaults to onCancel if absent.
-     */
-    onDecline?: Function,
-
-    t: Function
-}
 
 /**
- * Implements a confirm dialog component.
+ * The type of the React {@code Component} props of
+ * {@link ConfirmDialog}.
  */
-class ConfirmDialog extends BaseSubmitDialog<Props, *> {
+type Props = {
+
     /**
-     * Returns the title key of the submit button.
-     *
-     * @returns {string}
+     * The i18n key of the text label for the cancel button.
      */
-    _getSubmitButtonKey() {
-        return this.props.okKey || 'dialog.confirmYes';
+    cancelLabel: string,
+
+    /**
+     * The React {@code Component} children.
+     */
+    children?: React$Node,
+
+    /**
+     * The i18n key of the text label for the confirm button.
+     */
+    confirmLabel: string,
+
+    /**
+     * Dialog description key for translations.
+     */
+    descriptionKey?: string | Object,
+
+    /**
+     * Whether or not the nature of the confirm button is destructive.
+     */
+    isConfirmDestructive?: Boolean,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * Dialog title.
+     */
+    title?: string,
+};
+
+/**
+ * React Component for getting confirmation to stop a file recording session in
+ * progress.
+ *
+ * @augments Component
+ */
+class ConfirmDialog extends AbstractDialog<Props> {
+    /**
+     * Default values for {@code ConfirmDialog} component's properties.
+     *
+     * @static
+     */
+    static defaultProps = {
+        isConfirmDestructive: false
+    };
+
+    /**
+     * Renders the dialog description.
+     *
+     * @returns {React$Component}
+     */
+    _renderDescription() {
+        const { descriptionKey, t } = this.props;
+        const description
+            = typeof descriptionKey === 'string'
+                ? t(descriptionKey)
+                : renderHTML(
+                    t(descriptionKey?.key, descriptionKey?.params)
+                );
+
+        return (
+            <Dialog.Description>
+                { description }
+            </Dialog.Description>
+        );
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const {
+            cancelLabel,
+            children,
+            confirmLabel,
+            isConfirmDestructive,
+            t,
+            title
+        } = this.props;
+
+        const dialogButtonStyle
+            = isConfirmDestructive
+                ? styles.destructiveDialogButton : styles.dialogButton;
+
+        let rightLabel;
+        let leftLabel;
+        let rightOnPress;
+        let leftOnPress;
+        let rightStyle;
+        let leftStyle;
+
+        if (Platform.OS === 'android') {
+            rightLabel = confirmLabel || 'dialog.confirmYes';
+            rightOnPress = () => this._onSubmit();
+            rightStyle = dialogButtonStyle;
+            leftLabel = cancelLabel || 'dialog.confirmNo';
+            leftOnPress = () => this._onCancel();
+            leftStyle = styles.dialogButton;
+        } else {
+            rightLabel = cancelLabel || 'dialog.confirmNo';
+            rightOnPress = () => this._onCancel();
+            rightStyle = styles.dialogButton;
+            leftLabel = confirmLabel || 'dialog.confirmYes';
+            leftOnPress = () => this._onSubmit();
+            leftStyle = dialogButtonStyle;
+        }
+
+        return (
+            <View>
+                <Dialog.Container
+                    visible = { true }>
+                    {
+                        title && <Dialog.Title>
+                            { t(title) }
+                        </Dialog.Title>
+                    }
+                    { this._renderDescription() }
+                    { children }
+                    <Dialog.Button
+                        label = { t(rightLabel) }
+                        onPress = { rightOnPress }
+                        style = { rightStyle } />
+                    <Dialog.Button
+                        label = { t(leftLabel) }
+                        onPress = { leftOnPress }
+                        style = { leftStyle } />
+                </Dialog.Container>
+            </View>
+        );
     }
 
     _onCancel: () => void;
 
-    /**
-     * Renders the 'No' button.
-     *
-     * NOTE: The {@code ConfirmDialog} is the only dialog right now that
-     * renders 2 buttons, mainly for clarity.
-     *
-     * @inheritdoc
-     */
-    _renderAdditionalButtons() {
-        const { _dialogStyles, cancelKey, onDecline, t } = this.props;
-
-        return (
-            <TouchableOpacity
-                onPress = { onDecline || this._onCancel }
-                style = { [
-                    _dialogStyles.button,
-                    brandedDialog.buttonFarLeft,
-                    _dialogStyles.buttonSeparator
-                ] }>
-                <Text style = { _dialogStyles.buttonLabel }>
-                    { t(cancelKey || 'dialog.confirmNo') }
-                </Text>
-            </TouchableOpacity>
-        );
-    }
-
-    /**
-     * Implements {@code BaseSubmitDialog._renderSubmittable}.
-     *
-     * @inheritdoc
-     */
-    _renderSubmittable() {
-        if (this.props.children) {
-            return this.props.children;
-        }
-
-        const { _dialogStyles, contentKey, t } = this.props;
-        const content
-            = typeof contentKey === 'string'
-                ? t(contentKey)
-                : this._renderHTML(t(contentKey.key, contentKey.params));
-
-        return (
-            <Text style = { _dialogStyles.text }>
-                { content }
-            </Text>
-        );
-    }
-
-    _renderHTML: string => Object | string;
+    _onSubmit: (?string) => void;
 }
 
-export default translate(connect(_abstractMapStateToProps)(ConfirmDialog));
+export default translate(connect()(ConfirmDialog));
diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js
index 69bfbde5a..8e9bf109e 100644
--- a/react/features/base/dialog/components/native/styles.js
+++ b/react/features/base/dialog/components/native/styles.js
@@ -56,6 +56,18 @@ export const bottomSheetStyles = {
     }
 };
 
+export default {
+
+    dialogButton: {
+        ...BaseTheme.typography.labelButton
+    },
+
+    destructiveDialogButton: {
+        ...BaseTheme.typography.labelButton,
+        color: BaseTheme.palette.actionDanger
+    }
+};
+
 export const brandedDialog = {
 
     /**
diff --git a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js
index 029dbbfa5..a1bf4b132 100644
--- a/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js
+++ b/react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js
@@ -17,12 +17,7 @@ type Props = {
     /**
      * The ID of the event to be updated.
      */
-    eventId: string,
-
-    /**
-     * Function to translate i18n labels.
-     */
-    t: Function
+    eventId: string
 };
 
 /**
@@ -49,7 +44,7 @@ class UpdateCalendarEventDialog extends Component<Props> {
     render() {
         return (
             <ConfirmDialog
-                contentKey = 'calendarSync.confirmAddLink'
+                descriptionKey = 'calendarSync.confirmAddLink'
                 onSubmit = { this._onSubmit } />
         );
     }
diff --git a/react/features/chat/components/native/ChatPrivacyDialog.js b/react/features/chat/components/native/ChatPrivacyDialog.js
index 54915d7be..77f43a191 100644
--- a/react/features/chat/components/native/ChatPrivacyDialog.js
+++ b/react/features/chat/components/native/ChatPrivacyDialog.js
@@ -20,9 +20,9 @@ class ChatPrivacyDialog extends AbstractChatPrivacyDialog {
     render() {
         return (
             <ConfirmDialog
-                cancelKey = 'dialog.sendPrivateMessageCancel'
-                contentKey = 'dialog.sendPrivateMessage'
-                okKey = 'dialog.sendPrivateMessageOk'
+                cancelLabel = 'dialog.sendPrivateMessageCancel'
+                confirmLabel = 'dialog.sendPrivateMessageOk'
+                descriptionKey = 'dialog.sendPrivateMessage'
                 onCancel = { this._onSendGroupMessage }
                 onSubmit = { this._onSendPrivateMessage } />
         );
diff --git a/react/features/overlay/components/native/PageReloadOverlay.js b/react/features/overlay/components/native/PageReloadOverlay.js
index 41994ef58..53e48c3ac 100644
--- a/react/features/overlay/components/native/PageReloadOverlay.js
+++ b/react/features/overlay/components/native/PageReloadOverlay.js
@@ -1,29 +1,19 @@
 // @flow
 
 import React from 'react';
-import { Text } from 'react-native';
 
 import { appNavigate, reloadNow } from '../../../app/actions';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { ConfirmDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import { setFatalError, setPageReloadOverlayCanceled } from '../../actions';
 import AbstractPageReloadOverlay, {
     abstractMapStateToProps,
-    type Props as AbstractProps
+    type Props
 } from '../AbstractPageReloadOverlay';
 
 import OverlayFrame from './OverlayFrame';
 
-type Props = AbstractProps & {
-
-    /**
-     * The color-schemed stylesheet of the base/dialog feature.
-     */
-    _dialogStyles: StyleType
-}
 
 /**
  * Implements a React Component for page reload overlay. Shown before the
@@ -85,38 +75,21 @@ class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { _dialogStyles, t } = this.props;
+        const { t } = this.props;
         const { message, timeLeft, title } = this.state;
 
         return (
             <OverlayFrame>
                 <ConfirmDialog
-                    cancelKey = 'dialog.Cancel'
-                    okKey = 'dialog.rejoinNow'
+                    cancelLabel = 'dialog.Cancel'
+                    confirmLabel = 'dialog.rejoinNow'
+                    descriptionKey = { `${t(message, { seconds: timeLeft })}` }
                     onCancel = { this._onCancel }
-                    onSubmit = { this._onReloadNow }>
-                    <Text style = { _dialogStyles.text }>
-                        { `${t(title)} ${t(message, { seconds: timeLeft })}` }
-                    </Text>
-                </ConfirmDialog>
+                    onSubmit = { this._onReloadNow }
+                    title = { title } />
             </OverlayFrame>
         );
     }
 }
 
-/**
- * Maps part of the Redux state to the props of this component.
- *
- * @param {Object} state - The Redux state.
- * @returns {{
- *     _dialogStyles: StyleType
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        ...abstractMapStateToProps(state),
-        _dialogStyles: ColorSchemeRegistry.get(state, 'Dialog')
-    };
-}
-
-export default translate(connect(_mapStateToProps)(PageReloadOverlay));
+export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));
diff --git a/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js b/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js
index 53386d277..9175e88af 100644
--- a/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js
+++ b/react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js
@@ -26,7 +26,7 @@ class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
     render() {
         return (
             <ConfirmDialog
-                contentKey = 'dialog.stopStreamingWarning'
+                descriptionKey = 'dialog.stopStreamingWarning'
                 onSubmit = { this._onSubmit } />
         );
     }
diff --git a/react/features/recording/components/Recording/native/StopRecordingDialog.js b/react/features/recording/components/Recording/native/StopRecordingDialog.js
index fcbb82b2f..a62c94292 100644
--- a/react/features/recording/components/Recording/native/StopRecordingDialog.js
+++ b/react/features/recording/components/Recording/native/StopRecordingDialog.js
@@ -26,7 +26,7 @@ class StopRecordingDialog extends AbstractStopRecordingDialog<Props> {
     render() {
         return (
             <ConfirmDialog
-                contentKey = 'dialog.stopRecordingWarning'
+                descriptionKey = 'dialog.stopRecordingWarning'
                 onSubmit = { this._onSubmit } />
         );
     }
diff --git a/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js b/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js
deleted file mode 100644
index 28ae74fbf..000000000
--- a/react/features/video-menu/components/AbstractBlockAudioVideoDialog.js
+++ /dev/null
@@ -1,46 +0,0 @@
-// @flow
-
-import { Component } from 'react';
-
-type Props = {
-
-    /**
-     * The Redux dispatch function.
-     */
-    dispatch: Function,
-
-    /**
-     * Function to translate i18n labels.
-     */
-    t: Function
-};
-
-/**
- * Abstract dialog to confirm blocking mic and camera for all participants.
- */
-export default class AbstractBlockAudioVideoDialog
-    extends Component<Props> {
-    /**
-     * Initializes a new {@code AbstractBlockAudioVideoDialog} instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._onSubmit = this._onSubmit.bind(this);
-    }
-
-    _onSubmit: () => boolean;
-
-    /**
-     * Callback for the confirm button.
-     *
-     * @private
-     * @returns {boolean} - True (to note that the modal should be closed).
-     */
-    _onSubmit() {
-
-        return true;
-    }
-}
diff --git a/react/features/video-menu/components/native/BlockAudioVideoDialog.js b/react/features/video-menu/components/native/BlockAudioVideoDialog.js
deleted file mode 100644
index 6b374252a..000000000
--- a/react/features/video-menu/components/native/BlockAudioVideoDialog.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { ConfirmDialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
-import AbstractBlockAudioVideoDialog
-    from '../AbstractBlockAudioVideoDialog';
-
-/**
- * Dialog to confirm a remote participant kick action.
- */
-class BlockAudioVideoDialog extends AbstractBlockAudioVideoDialog {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        return (
-            <ConfirmDialog
-                contentKey = 'dialog.blockAudioVideoMsg'
-                onSubmit = { this._onSubmit } />
-        );
-    }
-
-    _onSubmit: () => boolean;
-}
-
-export default translate(connect()(BlockAudioVideoDialog));
diff --git a/react/features/video-menu/components/native/GrantModeratorDialog.js b/react/features/video-menu/components/native/GrantModeratorDialog.js
index c0ba0e864..677b41e3e 100644
--- a/react/features/video-menu/components/native/GrantModeratorDialog.js
+++ b/react/features/video-menu/components/native/GrantModeratorDialog.js
@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { Text } from 'react-native';
 
 import { ConfirmDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
@@ -22,12 +21,11 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog {
     render() {
         return (
             <ConfirmDialog
-                contentKey = 'dialog.grantModeratorDialog'
-                onSubmit = { this._onSubmit }>
-                <Text>
-                    {`${this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName })}`}
-                </Text>
-            </ConfirmDialog>
+                descriptionKey = {
+                    `${this.props.t('dialog.grantModeratorDialog',
+                        { participantName: this.props.participantName })}`
+                }
+                onSubmit = { this._onSubmit } />
         );
     }
 
diff --git a/react/features/video-menu/components/native/KickRemoteParticipantDialog.js b/react/features/video-menu/components/native/KickRemoteParticipantDialog.js
index 65a88ce52..64503e588 100644
--- a/react/features/video-menu/components/native/KickRemoteParticipantDialog.js
+++ b/react/features/video-menu/components/native/KickRemoteParticipantDialog.js
@@ -21,8 +21,12 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog {
     render() {
         return (
             <ConfirmDialog
-                contentKey = 'dialog.kickParticipantDialog'
-                onSubmit = { this._onSubmit } />
+                cancelLabel = 'dialog.Cancel'
+                confirmLabel = 'dialog.kickParticipantButton'
+                descriptionKey = 'dialog.kickParticipantDialog'
+                isConfirmDestructive = { true }
+                onSubmit = { this._onSubmit }
+                title = 'dialog.kickParticipantTitle' />
         );
     }
 
diff --git a/react/features/video-menu/components/native/MuteEveryoneDialog.js b/react/features/video-menu/components/native/MuteEveryoneDialog.js
index 8115a86ee..595a06e34 100644
--- a/react/features/video-menu/components/native/MuteEveryoneDialog.js
+++ b/react/features/video-menu/components/native/MuteEveryoneDialog.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { Text, View, Switch } from 'react-native';
+import Dialog from 'react-native-dialog';
 import { Divider } from 'react-native-paper';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
@@ -15,6 +15,7 @@ import AbstractMuteEveryoneDialog, {
 
 import styles from './styles';
 
+
 type Props = AbstractProps & {
 
     /**
@@ -31,6 +32,21 @@ type Props = AbstractProps & {
  */
 class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
 
+    /**
+     * Renders the dialog switch.
+     *
+     * @returns {React$Component}
+     */
+    _renderSwitch() {
+        return (
+            this.props.exclude.length === 0
+            && <Dialog.Switch
+                label = { this.props.t('dialog.moderationAudioLabel') }
+                onValueChange = { this._onToggleModeration }
+                value = { !this.state.audioModerationEnabled } />
+        );
+    }
+
     /**
      * Toggles advanced moderation switch.
      *
@@ -55,26 +71,12 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
     render() {
         return (
             <ConfirmDialog
-                okKey = 'dialog.muteParticipantButton'
-                onSubmit = { this._onSubmit } >
-                <Text style = { this.props._dialogStyles.text }>
-                    { `${this.props.title} \n\n ${this.state.content}` }
-                </Text>
-                {this.props.exclude.length === 0 && <>
-                    <Divider style = { styles.dividerWithSpacing } />
-                    <View style = { styles.toggleContainer }>
-                        <Text
-                            style = {{
-                                ...this.props._dialogStyles.text,
-                                ...styles.toggleLabel
-                            }}>
-                            {this.props.t('dialog.moderationAudioLabel')}
-                        </Text>
-                        <Switch
-                            onValueChange = { this._onToggleModeration }
-                            value = { !this.state.audioModerationEnabled } />
-                    </View>
-                </>}
+                confirmLabel = 'dialog.muteParticipantButton'
+                descriptionKey = { this.state.content }
+                onSubmit = { this._onSubmit }
+                title = { this.props.title } >
+                <Divider style = { styles.dividerDialog } />
+                { this._renderSwitch() }
             </ConfirmDialog>
         );
     }
diff --git a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
index ac82cd4a0..1e8dc88e0 100644
--- a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
+++ b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { Switch, Text, View } from 'react-native';
+import Dialog from 'react-native-dialog';
 import { Divider } from 'react-native-paper';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
@@ -31,6 +31,21 @@ type Props = AbstractProps & {
  */
 class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
 
+    /**
+     * Renders the dialog switch.
+     *
+     * @returns {React$Component}
+     */
+    _renderSwitch() {
+        return (
+            this.props.exclude.length === 0
+            && <Dialog.Switch
+                label = { this.props.t('dialog.moderationVideoLabel') }
+                onValueChange = { this._onToggleModeration }
+                value = { !this.state.moderationEnabled } />
+        );
+    }
+
     /**
      * Toggles advanced moderation switch.
      *
@@ -55,24 +70,12 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
     render() {
         return (
             <ConfirmDialog
-                okKey = 'dialog.muteEveryonesVideoDialogOk'
-                onSubmit = { this._onSubmit } >
-                <Text style = { this.props._dialogStyles.text }>
-                    { `${this.props.title} \n\n ${this.state.content}` }
-                </Text>
-                {this.props.exclude.length === 0 && <>
-                    <Divider style = { styles.dividerWithSpacing } />
-                    <View style = { styles.toggleContainer }>
-                        <Text
-                            style = {{ ...this.props._dialogStyles.text,
-                                ...styles.toggleLabel }}>
-                            {this.props.t('dialog.moderationVideoLabel')}
-                        </Text>
-                        <Switch
-                            onValueChange = { this._onToggleModeration }
-                            value = { !this.state.moderationEnabled } />
-                    </View>
-                </>}
+                confirmLabel = 'dialog.muteEveryonesVideoDialogOk'
+                descriptionKey = { this.state.content }
+                onSubmit = { this._onSubmit }
+                title = { this.props.title }>
+                <Divider style = { styles.dividerDialog } />
+                { this._renderSwitch() }
             </ConfirmDialog>
         );
     }
diff --git a/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js b/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js
index 68c6c22a8..319b8ba54 100644
--- a/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js
+++ b/react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js
@@ -22,7 +22,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
     render() {
         return (
             <ConfirmDialog
-                contentKey = { this.props.isVideoModerationOn
+                descriptionKey = { this.props.isVideoModerationOn
                     ? 'dialog.muteParticipantsVideoDialogModerationOn'
                     : 'dialog.muteParticipantsVideoDialog'
                 }
diff --git a/react/features/video-menu/components/native/index.js b/react/features/video-menu/components/native/index.js
index 8671ed3f4..c429d73ec 100644
--- a/react/features/video-menu/components/native/index.js
+++ b/react/features/video-menu/components/native/index.js
@@ -1,6 +1,5 @@
 // @flow
 
-export { default as BlockAudioVideoDialog } from './BlockAudioVideoDialog';
 export { default as GrantModeratorDialog } from './GrantModeratorDialog';
 export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantDialog';
 export { default as MuteEveryoneDialog } from './MuteEveryoneDialog';
diff --git a/react/features/video-menu/components/native/styles.js b/react/features/video-menu/components/native/styles.js
index cc729c904..cf1d595a8 100644
--- a/react/features/video-menu/components/native/styles.js
+++ b/react/features/video-menu/components/native/styles.js
@@ -1,5 +1,7 @@
 // @flow
 
+import { PlatformColor } from 'react-native';
+
 import {
     MD_FONT_SIZE,
     MD_ITEM_HEIGHT,
@@ -69,23 +71,10 @@ export default createStyleSheet({
         backgroundColor: BaseTheme.palette.dividerColor
     },
 
-    dividerWithSpacing: {
-        backgroundColor: BaseTheme.palette.dividerColor,
-        marginVertical: BaseTheme.spacing[3]
-    },
-
-    toggleContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        width: '100%',
-        overflow: 'hidden'
-    },
-
-    toggleLabel: {
-        marginRight: BaseTheme.spacing[3],
-        maxWidth: '70%'
+    dividerDialog: {
+        // eslint-disable-next-line new-cap
+        backgroundColor: PlatformColor('separator'),
+        marginBottom: BaseTheme.spacing[3]
     },
 
     contextMenuItem: {