dep(react-native): replace future deprecated SafeAreaView component (#16726)

* Replaced with react-native-safe-area-context component and fixed types around edges prop.

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

@@ -1,5 +1,6 @@
 import React, { PureComponent, ReactNode } from 'react';
-import { SafeAreaView, ScrollView, View, ViewStyle } from 'react-native';
+import { ScrollView, View, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { IStore } from '../../../../app/types';
@@ -122,6 +123,7 @@ class BottomSheet extends PureComponent<Props> {
                         style = { styles.sheetAreaCover } />
                     { renderHeader?.() }
                     <SafeAreaView
+                        edges = { [ 'left', 'right' ] }
                         style = { [
                             styles.sheetItemContainer,
                             renderHeader

react/features/base/react/components/native/SectionList.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import {
     SectionList as ReactNativeSectionList,
-    SafeAreaView,
     SectionListRenderItemInfo,
     ViewStyle
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Item, Section } from '../../types';
 
@@ -76,6 +76,7 @@ export default class SectionList extends Component<IProps> {
     override render() {
         return (
             <SafeAreaView
+                edges = { [ 'left', 'right' ] }
                 style = { styles.container as ViewStyle } >
                 <ReactNativeSectionList
                     ListEmptyComponent = { this.props.ListEmptyComponent }

react/features/conference/components/native/Conference.tsx

@@ -3,11 +3,10 @@ import React, { useCallback } from 'react';
 import {
     BackHandler,
     NativeModules,
-    SafeAreaView,
     View,
     ViewStyle
 } from 'react-native';
-import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { Edge, EdgeInsets, SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { connect, useDispatch } from 'react-redux';
 
 import { appNavigate } from '../../../app/actions.native';
@@ -436,6 +435,7 @@ class Conference extends AbstractConference<IProps, State> {
                 </View>
 
                 <SafeAreaView
+                    edges = { [ 'left', 'right', 'top' ] }
                     pointerEvents = 'box-none'
                     style = {
                         (_toolboxVisible
@@ -444,6 +444,7 @@ class Conference extends AbstractConference<IProps, State> {
                     <TitleBar _createOnPress = { this._createOnPress } />
                 </SafeAreaView>
                 <SafeAreaView
+                    edges = { [ 'bottom', 'left', 'right', !_toolboxVisible && 'top' ].filter(Boolean) as Edge[] }
                     pointerEvents = 'box-none'
                     style = {
                         (_toolboxVisible

react/features/filmstrip/components/native/Filmstrip.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { FlatList, ViewStyle, ViewToken } from 'react-native';
-import { SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { Edge, SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../app/types';
@@ -272,8 +272,8 @@ class Filmstrip extends PureComponent<IProps> {
         }
 
         return (
-            <SafeAreaView // @ts-ignore
-                edges = { [ bottomEdge && 'bottom', 'left', 'right' ].filter(Boolean) }
+            <SafeAreaView
+                edges = { [ bottomEdge && 'bottom', 'left', 'right' ].filter(Boolean) as Edge[] }
                 style = { filmstripStyle as ViewStyle }>
                 {
                     this._separateLocalThumbnail

react/features/filmstrip/components/native/TileView.tsx

@@ -2,11 +2,10 @@ import React, { PureComponent } from 'react';
 import {
     FlatList,
     GestureResponderEvent,
-    SafeAreaView,
     TouchableWithoutFeedback,
     ViewToken
 } from 'react-native';
-import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { EdgeInsets, SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../app/types';

react/features/mobile/navigation/components/ConnectingPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { SafeAreaView, Text, View, ViewStyle } from 'react-native';
+import { Text, View, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';

react/features/reactions/components/native/ReactionMenuDialog.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentType, PureComponent } from 'react';
-import { SafeAreaView, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native';
+import { Edge, SafeAreaView } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../app/types';
@@ -8,6 +9,7 @@ import { hideDialog } from '../../../base/dialog/actions';
 import { isDialogOpen } from '../../../base/dialog/functions';
 import { getParticipantCount } from '../../../base/participants/functions';
 import { StyleType } from '../../../base/styles/functions.native';
+import { isToolboxVisible } from '../../../toolbox/functions.native';
 
 import ReactionMenu from './ReactionMenu';
 
@@ -36,6 +38,11 @@ interface IProps {
      */
     _styles: StyleType;
 
+    /**
+     * The indicator which determines whether the Toolbox is visible.
+     */
+    _toolboxVisible: boolean;
+
     /**
      * The width of the screen.
      */
@@ -80,25 +87,24 @@ class ReactionMenuDialog extends PureComponent<IProps> {
      * @returns {ReactElement}
      */
     override render() {
-        const { _styles, _width, _height, _participantCount } = this.props;
+        const { _height, _participantCount, _styles, _toolboxVisible, _width } = this.props;
 
         return (
-            <SafeAreaView style = { _styles }>
-                <TouchableWithoutFeedback
-                    onPress = { this._onCancel }>
-                    <View style = { _styles }>
-                        <View
-                            style = {{
-                                left: (_width - 360) / 2,
-                                top: _height - (_participantCount > 1 ? 144 : 80) - 80
-                            }}>
-                            <ReactionMenu
-                                onCancel = { this._onCancel }
-                                overflowMenu = { false } />
-                        </View>
-                    </View>
-                </TouchableWithoutFeedback>
-            </SafeAreaView>
+            <TouchableWithoutFeedback
+                onPress = { this._onCancel }>
+                <SafeAreaView
+                    edges = { [ 'bottom', 'left', 'right', !_toolboxVisible && 'top' ].filter(Boolean) as Edge[] }
+                    style = { [
+                        _styles,
+                        {
+                            left: (_width - 360) / 2,
+                            top: _height - (_participantCount > 1 ? 144 : 80) - 80
+                        } ] }>
+                    <ReactionMenu
+                        onCancel = { this._onCancel }
+                        overflowMenu = { false } />
+                </SafeAreaView>
+            </TouchableWithoutFeedback>
         );
     }
 
@@ -132,7 +138,8 @@ function _mapStateToProps(state: IReduxState) {
         _styles: ColorSchemeRegistry.get(state, 'Toolbox').reactionDialog,
         _width: state['features/base/responsive-ui'].clientWidth,
         _height: state['features/base/responsive-ui'].clientHeight,
-        _participantCount: getParticipantCount(state)
+        _participantCount: getParticipantCount(state),
+        _toolboxVisible: isToolboxVisible(state)
     };
 }
 

react/features/recent-list/components/RecentList.native.tsx

@@ -9,7 +9,7 @@ import { openSheet } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n/functions';
 import NavigateSectionList from '../../base/react/components/native/NavigateSectionList';
 import { Item, Section } from '../../base/react/types';
-import styles from '../../welcome/components/styles';
+import styles from '../../welcome/components/styles.native';
 import { isRecentListEnabled, toDisplayableList } from '../functions.native';
 
 import AbstractRecentList from './AbstractRecentList';

react/features/salesforce/components/native/SalesforceLinkDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Platform, SafeAreaView, ScrollView, Text, View, ViewStyle } from 'react-native';
+import { Platform, ScrollView, Text, View, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';

react/features/settings/components/native/LanguageSelectView.tsx

@@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, Text, TouchableHighlight, View, ViewStyle } from 'react-native';
+import { Edge } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
@@ -45,9 +46,7 @@ const LanguageSelectView = ({ isInWelcomePage }: { isInWelcomePage?: boolean; })
     return (
         <JitsiScreen
             disableForcedKeyboardDismiss = { true }
-
-            // @ts-ignore
-            safeAreaInsets = { [ !isInWelcomePage && 'bottom', 'left', 'right' ].filter(Boolean) }
+            safeAreaInsets = { [ !isInWelcomePage && 'bottom', 'left', 'right' ].filter(Boolean) as Edge[] }
             style = { styles.settingsViewContainer }>
             <ScrollView
                 bounces = { isInWelcomePage }

react/features/settings/components/native/ProfileView.tsx

@@ -115,8 +115,6 @@ const ProfileView = ({ isInWelcomePage }: {
         <JitsiScreen
             disableForcedKeyboardDismiss = { true }
             hasBottomTextInput = { true }
-
-            // @ts-ignore
             safeAreaInsets = { [ !isInWelcomePage && 'bottom', 'left', 'right' ].filter(Boolean) as Edge[] }
             style = { styles.settingsViewContainer }>
             <ScrollView

react/features/toolbox/components/native/Toolbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ViewStyle } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Edge, SafeAreaView } from 'react-native-safe-area-context';
 import { connect, useSelector } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../app/types';
@@ -117,9 +117,7 @@ function Toolbox(props: IProps) {
             style = { styles.toolboxContainer as ViewStyle }>
             <SafeAreaView
                 accessibilityRole = 'toolbar'
-
-                // @ts-ignore
-                edges = { [ bottomEdge && 'bottom' ].filter(Boolean) }
+                edges = { [ bottomEdge && 'bottom' ].filter(Boolean) as Edge[] }
                 pointerEvents = 'box-none'
                 style = { style as ViewStyle }>
                 { renderToolboxButtons() }

react/features/welcome/components/WelcomePage.native.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
     Animated,
     NativeSyntheticEvent,
-    SafeAreaView,
     StyleProp,
     TextInputFocusEventData,
     TextStyle,
@@ -10,6 +9,7 @@ import {
     View,
     ViewStyle
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { getName } from '../../app/functions.native';
@@ -333,30 +333,30 @@ class WelcomePage extends AbstractWelcomePage<IProps> {
                     isSettingsScreenFocused && styles.roomNameInputContainer,
                     { opacity: this.state.roomNameInputAnimation }
                 ] as StyleProp<ViewStyle> }>
-                <SafeAreaView style = { styles.roomContainer as StyleProp<ViewStyle> }>
-                    <View style = { styles.joinControls } >
-                        <Text style = { styles.enterRoomText as StyleProp<TextStyle> }>
-                            { t('welcomepage.roomname') }
-                        </Text>
-                        <Input
-                            accessibilityLabel = { t(roomnameAccLabel) }
-                            autoCapitalize = { 'none' }
-                            autoFocus = { false }
-                            customStyles = {{ input: styles.customInput }}
-                            onBlur = { this._onFieldBlur }
-                            onChange = { this._onRoomChange }
-                            onFocus = { this._onFieldFocus }
-                            onSubmitEditing = { this._onJoin }
-                            placeholder = { this.state.roomPlaceholder }
-                            returnKeyType = { 'go' }
-                            value = { this.state.room } />
-                        {
-                            this._renderInsecureRoomNameWarning()
-                        }
-                        {
-                            this._renderHintBox()
-                        }
-                    </View>
+                <SafeAreaView
+                    edges = { [ 'left', 'right' ] }
+                    style = { styles.roomContainer as StyleProp<ViewStyle> }>
+                    <Text style = { styles.enterRoomText as StyleProp<TextStyle> }>
+                        { t('welcomepage.roomname') }
+                    </Text>
+                    <Input
+                        accessibilityLabel = { t(roomnameAccLabel) }
+                        autoCapitalize = { 'none' }
+                        autoFocus = { false }
+                        customStyles = {{ input: styles.customInput }}
+                        onBlur = { this._onFieldBlur }
+                        onChange = { this._onRoomChange }
+                        onFocus = { this._onFieldFocus }
+                        onSubmitEditing = { this._onJoin }
+                        placeholder = { this.state.roomPlaceholder }
+                        returnKeyType = { 'go' }
+                        value = { this.state.room } />
+                    {
+                        this._renderInsecureRoomNameWarning()
+                    }
+                    {
+                        this._renderHintBox()
+                    }
                 </SafeAreaView>
             </Animated.View>
         );

react/features/welcome/components/styles.native.ts

@@ -101,13 +101,6 @@ export default {
         paddingTop: 10
     },
 
-    /**
-     * A view that contains the field and hint box.
-     */
-    joinControls: {
-        padding: BoxModel.padding
-    },
-
     messageContainer: {
         backgroundColor: BaseTheme.palette.ui03,
         borderRadius: BaseTheme.shape.borderRadius,
@@ -149,7 +142,7 @@ export default {
     roomContainer: {
         alignSelf: 'stretch',
         flexDirection: 'column',
-        marginHorizontal: BaseTheme.spacing[2]
+        padding: BaseTheme.spacing[3]
     },
 
     /**