fix(rn,dialogs) fix displaying dialogs on top of modal screens

Render them together with bottom sheets in a FullWindowOverlay.

package-lock.json

@@ -93,7 +93,7 @@
         "react-native-collapsible": "1.6.0",
         "react-native-default-preference": "1.4.4",
         "react-native-device-info": "8.4.8",
-        "react-native-dialog": "9.2.1",
+        "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
         "react-native-gesture-handler": "2.1.0",
         "react-native-get-random-values": "1.7.2",
         "react-native-immersive": "2.0.0",
@@ -15392,9 +15392,10 @@
       }
     },
     "node_modules/react-native-dialog": {
-      "version": "9.2.1",
+      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.1.tgz",
+      "resolved": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
-      "integrity": "sha512-UNnGFTpH0cX16cJZLFq9/TAZH1+B2vzJrQL1mUaSqZjV+sFTpUB1WvghJZxPwi52v587kJpfKN7oPfWaXAu+YQ==",
+      "integrity": "sha512-MKbuBbovO8eGiAM9i6o0nrdBXivhRpzPQ+aVBXGJEPMH7RrCSNUKaCoEpkjfGHlTxjZimi6WjDCjjzCRSHlV1A==",
+      "license": "MIT",
       "peerDependencies": {
         "react-native": ">=0.63.0"
       }
@@ -31883,9 +31884,8 @@
       "integrity": "sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q=="
     },
     "react-native-dialog": {
-      "version": "9.2.1",
+      "version": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
-      "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.1.tgz",
+      "integrity": "sha512-MKbuBbovO8eGiAM9i6o0nrdBXivhRpzPQ+aVBXGJEPMH7RrCSNUKaCoEpkjfGHlTxjZimi6WjDCjjzCRSHlV1A=="
-      "integrity": "sha512-UNnGFTpH0cX16cJZLFq9/TAZH1+B2vzJrQL1mUaSqZjV+sFTpUB1WvghJZxPwi52v587kJpfKN7oPfWaXAu+YQ=="
     },
     "react-native-gesture-handler": {
       "version": "2.1.0",

package.json

@@ -98,7 +98,7 @@
     "react-native-collapsible": "1.6.0",
     "react-native-default-preference": "1.4.4",
     "react-native-device-info": "8.4.8",
-    "react-native-dialog": "9.2.1",
+    "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
     "react-native-gesture-handler": "2.1.0",
     "react-native-get-random-values": "1.7.2",
     "react-native-immersive": "2.0.0",

patches/react-native-dialog+9.2.1.patch

@@ -1,118 +0,0 @@
-diff --git a/node_modules/react-native-dialog/lib/Button.js b/node_modules/react-native-dialog/lib/Button.js
-index 19eeb22..b8a66f4 100644
---- a/node_modules/react-native-dialog/lib/Button.js
-+++ b/node_modules/react-native-dialog/lib/Button.js
-@@ -50,7 +50,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             backgroundColor: "transparent",
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "link_text_dark" : "link_text_dark_light"}`),
-+            color: isDark ? '#BFC7C7C7' : '#BF727272',
-             textAlign: "center",
-             backgroundColor: "transparent",
-             padding: 8,
-diff --git a/node_modules/react-native-dialog/lib/CodeInput.js b/node_modules/react-native-dialog/lib/CodeInput.js
-index eceae56..cc4339d 100644
---- a/node_modules/react-native-dialog/lib/CodeInput.js
-+++ b/node_modules/react-native-dialog/lib/CodeInput.js
-@@ -97,7 +97,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             color: PlatformColor("label"),
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-             fontSize: 20,
-         },
-         default: {},
-@@ -107,7 +107,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             color: PlatformColor("label"),
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-             fontSize: 14,
-         },
-         default: {},
-diff --git a/node_modules/react-native-dialog/lib/Container.js b/node_modules/react-native-dialog/lib/Container.js
-index 69e3764..d7569fb 100644
---- a/node_modules/react-native-dialog/lib/Container.js
-+++ b/node_modules/react-native-dialog/lib/Container.js
-@@ -82,7 +82,7 @@ DialogContainer.propTypes = {
-     useNativeDriver: PropTypes.bool,
-     children: PropTypes.node.isRequired,
- };
--const buildStyles = () => StyleSheet.create({
-+const buildStyles = (isDark) => StyleSheet.create({
-     centeredView: {
-         marginTop: 22,
-     },
-@@ -103,7 +103,7 @@ const buildStyles = () => StyleSheet.create({
-             overflow: "hidden",
-         },
-         android: {
--            backgroundColor: PlatformColor("?attr/colorBackgroundFloating"),
-+            backgroundColor: isDark ? '#212121' : '#FFFFFF',
-             flexDirection: "column",
-             borderRadius: 3,
-             padding: 16,
-diff --git a/node_modules/react-native-dialog/lib/Description.js b/node_modules/react-native-dialog/lib/Description.js
-index 2da9ed3..248ac2f 100644
---- a/node_modules/react-native-dialog/lib/Description.js
-+++ b/node_modules/react-native-dialog/lib/Description.js
-@@ -28,7 +28,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             marginTop: 4,
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "secondary_text_dark" : "secondary_text_light"}`),
-+            color: isDark ? '#C7C7C7' : '#727272',
-             fontSize: 16,
-             marginTop: 10,
-         },
-diff --git a/node_modules/react-native-dialog/lib/Input.js b/node_modules/react-native-dialog/lib/Input.js
-index b33a1a0..063d7f8 100644
---- a/node_modules/react-native-dialog/lib/Input.js
-+++ b/node_modules/react-native-dialog/lib/Input.js
-@@ -48,7 +48,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             color: PlatformColor("label"),
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-             fontSize: 14,
-         },
-         default: {},
-@@ -58,7 +58,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             color: PlatformColor("label"),
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-             marginLeft: -4,
-             paddingLeft: 4,
-         },
-diff --git a/node_modules/react-native-dialog/lib/Switch.js b/node_modules/react-native-dialog/lib/Switch.js
-index 26a05ca..05114fa 100644
---- a/node_modules/react-native-dialog/lib/Switch.js
-+++ b/node_modules/react-native-dialog/lib/Switch.js
-@@ -52,7 +52,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             flex: 1,
-             paddingRight: 8,
-             fontSize: 16,
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-         },
-         default: {},
-     }),
-diff --git a/node_modules/react-native-dialog/lib/Title.js b/node_modules/react-native-dialog/lib/Title.js
-index 1c6fd87..b5511cc 100644
---- a/node_modules/react-native-dialog/lib/Title.js
-+++ b/node_modules/react-native-dialog/lib/Title.js
-@@ -28,7 +28,7 @@ const buildStyles = (isDark) => StyleSheet.create({
-             fontWeight: "600",
-         },
-         android: {
--            color: PlatformColor(`@android:color/${isDark ? "primary_text_dark" : "primary_text_light"}`),
-+            color: isDark ? '#FAFAFA' : '#212121',
-             fontWeight: "500",
-             fontSize: 18,
-         },

react/features/app/components/App.native.js

@@ -1,7 +1,7 @@
-// @flow
+import React from 'react';
-
+import { Platform, StyleSheet, View } from 'react-native';
-import React, { Fragment } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { FullWindowOverlay } from 'react-native-screens';
 import SplashScreen from 'react-native-splash-screen';
 
 import { DialogContainer } from '../../base/dialog';
@@ -9,7 +9,6 @@ import BottomSheetContainer from '../../base/dialog/components/native/BottomShee
 import { updateFlags } from '../../base/flags/actions';
 import { CALL_INTEGRATION_ENABLED, SERVER_URL_CHANGE_ENABLED } from '../../base/flags/constants';
 import { getFeatureFlag } from '../../base/flags/functions';
-import { Platform } from '../../base/react';
 import { DimensionsDetector, clientResized, setSafeAreaInsets } from '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
 import { _getRouteToRender } from '../getRouteToRender.native';
@@ -24,6 +23,11 @@ import '../reducers';
 
 declare var __DEV__;
 
+const DialogContainerWrapper = Platform.select({
+    ios: FullWindowOverlay,
+    default: View
+});
+
 /**
  * The type of React {@code Component} props of {@link App}.
  */
@@ -241,10 +245,12 @@ export class App extends AbstractApp {
      */
     _renderDialogContainer() {
         return (
-            <Fragment>
+            <DialogContainerWrapper
-                <DialogContainer />
+                pointerEvents = 'box-none'
+                style = { StyleSheet.absoluteFill }>
                 <BottomSheetContainer />
-            </Fragment>
+                <DialogContainer />
+            </DialogContainerWrapper>
         );
     }
 }

react/features/authentication/components/native/LoginDialog.js

@@ -1,7 +1,5 @@
-/* @flow */
-
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { Text } from 'react-native';
 import Dialog from 'react-native-dialog';
 import { connect as reduxConnect } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -44,11 +42,6 @@ type Props = {
      */
     _error: Object,
 
-    /**
-     * Extra handler for cancel functionality.
-     */
-    _onCancel: Function,
-
     /**
      * The progress in the floating range between 0 and 1 of the authenticating
      * and upgrading the role of the local participant/user.
@@ -68,12 +61,7 @@ type Props = {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function,
+    t: Function
-
-    /**
-     * Override the default visibility.
-     */
-    visible: boolean
 };
 
 /**
@@ -120,10 +108,6 @@ type State = {
  * of the configuration parameters.
  */
 class LoginDialog extends Component<Props, State> {
-    static defaultProps = {
-        visible: true
-    };
-
     /**
      * Initializes a new LoginDialog instance.
      *
@@ -154,14 +138,13 @@ class LoginDialog extends Component<Props, State> {
     render() {
         const {
             _connecting: connecting,
-            t,
+            t
-            visible
         } = this.props;
 
         return (
-            <View>
             <Dialog.Container
-                    visible = { visible }>
+                coverScreen = { false }
+                visible = { true }>
                 <Dialog.Title>
                     { t('dialog.login') }
                 </Dialog.Title>
@@ -189,7 +172,6 @@ class LoginDialog extends Component<Props, State> {
                     label = { t('dialog.Ok') }
                     onPress = { this._onLogin } />
             </Dialog.Container>
-            </View>
         );
     }
 
@@ -256,8 +238,6 @@ class LoginDialog extends Component<Props, State> {
         return null;
     }
 
-    _onUsernameChange: (string) => void;
-
     /**
      * Called when user edits the username.
      *
@@ -271,8 +251,6 @@ class LoginDialog extends Component<Props, State> {
         });
     }
 
-    _onPasswordChange: (string) => void;
-
     /**
      * Called when user edits the password.
      *
@@ -286,8 +264,6 @@ class LoginDialog extends Component<Props, State> {
         });
     }
 
-    _onCancel: () => void;
-
     /**
      * Notifies this LoginDialog that it has been dismissed by cancel.
      *
@@ -295,14 +271,9 @@ class LoginDialog extends Component<Props, State> {
      * @returns {void}
      */
     _onCancel() {
-        const { _onCancel, dispatch } = this.props;
+        this.props.dispatch(cancelLogin());
-
-        _onCancel && _onCancel();
-        dispatch(cancelLogin());
     }
 
-    _onLogin: () => void;
-
     /**
      * Notifies this LoginDialog that the login button (OK) has been pressed by
      * the user.

react/features/authentication/components/native/WaitForOwnerDialog.js

@@ -1,14 +1,10 @@
-// @flow
-
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 
 import { ConfirmDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
-import { cancelWaitForOwner } from '../../actions.native';
+import { openLoginDialog, cancelWaitForOwner } from '../../actions.native';
-
-import LoginDialog from './LoginDialog';
 
 /**
  * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
@@ -42,14 +38,9 @@ class WaitForOwnerDialog extends Component<Props> {
     constructor(props) {
         super(props);
 
-        this.state = {
-            showLoginDialog: false
-        };
-
         // Bind event handlers so they are only bound once per instance.
         this._onCancel = this._onCancel.bind(this);
         this._onLogin = this._onLogin.bind(this);
-        this._onLoginDialogCancel = this._onLoginDialogCancel.bind(this);
     }
 
     /**
@@ -65,17 +56,10 @@ class WaitForOwnerDialog extends Component<Props> {
                 confirmLabel = 'dialog.IamHost'
                 descriptionKey = 'dialog.WaitForHostMsg'
                 onCancel = { this._onCancel }
-                onSubmit = { this._onLogin }>
+                onSubmit = { this._onLogin } />
-                <LoginDialog
-                    // eslint-disable-next-line react/jsx-handler-names
-                    _onCancel = { this._onLoginDialogCancel }
-                    visible = { this.state.showLoginDialog } />
-            </ConfirmDialog>
         );
     }
 
-    _onCancel: () => void;
-
     /**
      * Called when the cancel button is clicked.
      *
@@ -86,8 +70,6 @@ class WaitForOwnerDialog extends Component<Props> {
         this.props.dispatch(cancelWaitForOwner());
     }
 
-    _onLogin: () => void;
-
     /**
      * Called when the OK button is clicked.
      *
@@ -95,17 +77,7 @@ class WaitForOwnerDialog extends Component<Props> {
      * @returns {void}
      */
     _onLogin() {
-        this.setState({ showLoginDialog: true });
+        this.props.dispatch(openLoginDialog());
-    }
-
-    /**
-     * Called when the nested login dialog is cancelled.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onLoginDialogCancel() {
-        this.setState({ showLoginDialog: false });
     }
 }
 

react/features/base/dialog/components/native/AlertDialog.js

@@ -1,7 +1,4 @@
-// @flow
-
 import React from 'react';
-import { View } from 'react-native';
 import Dialog from 'react-native-dialog';
 
 import { translate } from '../../../i18n';
@@ -46,8 +43,9 @@ class AlertDialog extends AbstractDialog<Props> {
                 : renderHTML(t(contentKey.key, contentKey.params));
 
         return (
-            <View>
+            <Dialog.Container
-                <Dialog.Container visible = { true }>
+                coverScreen = { false }
+                visible = { true }>
                 <Dialog.Description>
                     { content }
                 </Dialog.Description>
@@ -55,7 +53,6 @@ class AlertDialog extends AbstractDialog<Props> {
                     label = { t('dialog.Ok') }
                     onPress = { this._onSubmit } />
             </Dialog.Container>
-            </View>
         );
     }
 

react/features/base/dialog/components/native/BottomSheetContainer.tsx

@@ -1,12 +1,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import { FullWindowOverlay } from 'react-native-screens';
 import { useSelector } from 'react-redux';
 
-const Wrapper =  Platform.select({
-    ios: FullWindowOverlay,
-    default: View
-});
 
 const BottomSheetContainer: () => JSX.Element = () => {
     const { sheet, sheetProps } = useSelector(state => state['features/base/dialog']);
@@ -17,9 +11,9 @@ const BottomSheetContainer: () => JSX.Element = () => {
     }
 
     return (
-        <Wrapper style={StyleSheet.absoluteFill}>
+        <Fragment>
             { React.createElement(sheet, sheetProps) }
-        </Wrapper>
+        </Fragment>
     );
 }
 

react/features/base/dialog/components/native/ConfirmDialog.js

@@ -1,7 +1,4 @@
-// @flow
-
 import React from 'react';
-import { View } from 'react-native';
 import Dialog from 'react-native-dialog';
 
 import { translate } from '../../../i18n';
@@ -26,7 +23,7 @@ type Props = {
     /**
      * The React {@code Component} children.
      */
-    children?: React$Node,
+    children?: Node,
 
     /**
      * The i18n key of the text label for the confirm button.
@@ -111,8 +108,9 @@ class ConfirmDialog extends AbstractDialog<Props> {
                 ? styles.destructiveDialogButton : styles.dialogButton;
 
         return (
-            <View>
+            <Dialog.Container
-                <Dialog.Container visible = { true }>
+                coverScreen = { false }
+                visible = { true }>
                 {
                     title && <Dialog.Title>
                         { t(title) }
@@ -129,7 +127,6 @@ class ConfirmDialog extends AbstractDialog<Props> {
                     onPress = { this._onSubmit }
                     style = { dialogButtonStyle } />
             </Dialog.Container>
-            </View>
         );
     }
 

react/features/base/dialog/components/native/DialogContainer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { ReactionEmoji } from '../../../../reactions/components';
 import { getReactionsQueue } from '../../../../reactions/functions.any';
@@ -38,10 +38,12 @@ class DialogContainer extends AbstractDialogContainer {
      * @returns {ReactElement}
      */
     render() {
-        return (<React.Fragment>
+        return (
+            <Fragment>
                 {this._renderReactions()}
                 {this._renderDialogContent()}
-        </React.Fragment>);
+            </Fragment>
+        );
     }
 }
 

react/features/base/dialog/components/native/InputDialog.js

@@ -1,7 +1,4 @@
-// @flow
-
 import React from 'react';
-import { View } from 'react-native';
 import Dialog from 'react-native-dialog';
 
 import { translate } from '../../../i18n';
@@ -95,8 +92,8 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
         } = this.props;
 
         return (
-            <View>
             <Dialog.Container
+                coverScreen = { false }
                 visible = { true }>
                 <Dialog.Title>
                     { t(titleKey) }
@@ -128,7 +125,6 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
                     label = { t('dialog.Ok') }
                     onPress = { this._onSubmitValue } />
             </Dialog.Container>
-            </View>
         );
     }
 

react/features/base/dialog/components/native/styles.js

@@ -75,7 +75,6 @@ export const bottomSheetStyles = {
      * Style for the container of the sheet.
      */
     sheetContainer: {
-        borderColor: 'red',
         alignItems: 'stretch',
         flex: 1,
         flexDirection: 'column',