diff --git a/react/features/base/dialog/components/native/BottomSheet.tsx b/react/features/base/dialog/components/native/BottomSheet.tsx
index d4b2a9b308..df9dc0ef0d 100644
--- a/react/features/base/dialog/components/native/BottomSheet.tsx
+++ b/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
diff --git a/react/features/base/react/components/native/SectionList.tsx b/react/features/base/react/components/native/SectionList.tsx
index 4f96e1f8ea..da9dc64f0f 100644
--- a/react/features/base/react/components/native/SectionList.tsx
+++ b/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 }
diff --git a/react/features/conference/components/native/Conference.tsx b/react/features/conference/components/native/Conference.tsx
index 1701d639eb..a87ff1bc3a 100644
--- a/react/features/conference/components/native/Conference.tsx
+++ b/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
diff --git a/react/features/filmstrip/components/native/Filmstrip.tsx b/react/features/filmstrip/components/native/Filmstrip.tsx
index ef82de7a4c..1cf0ea6d77 100644
--- a/react/features/filmstrip/components/native/Filmstrip.tsx
+++ b/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
diff --git a/react/features/filmstrip/components/native/TileView.tsx b/react/features/filmstrip/components/native/TileView.tsx
index e2a788b084..cb200ae3eb 100644
--- a/react/features/filmstrip/components/native/TileView.tsx
+++ b/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';
diff --git a/react/features/mobile/navigation/components/ConnectingPage.tsx b/react/features/mobile/navigation/components/ConnectingPage.tsx
index 8d15bdddde..c9dbfe4a99 100644
--- a/react/features/mobile/navigation/components/ConnectingPage.tsx
+++ b/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';
diff --git a/react/features/reactions/components/native/ReactionMenuDialog.tsx b/react/features/reactions/components/native/ReactionMenuDialog.tsx
index 6fe15d324e..9097c6c473 100644
--- a/react/features/reactions/components/native/ReactionMenuDialog.tsx
+++ b/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)
     };
 }
 
diff --git a/react/features/recent-list/components/RecentList.native.tsx b/react/features/recent-list/components/RecentList.native.tsx
index fdb26fd240..f488372d1a 100644
--- a/react/features/recent-list/components/RecentList.native.tsx
+++ b/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';
diff --git a/react/features/salesforce/components/native/SalesforceLinkDialog.tsx b/react/features/salesforce/components/native/SalesforceLinkDialog.tsx
index 124059c36f..41868317ff 100644
--- a/react/features/salesforce/components/native/SalesforceLinkDialog.tsx
+++ b/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';
diff --git a/react/features/settings/components/native/LanguageSelectView.tsx b/react/features/settings/components/native/LanguageSelectView.tsx
index 75206593eb..7e471a7776 100644
--- a/react/features/settings/components/native/LanguageSelectView.tsx
+++ b/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 }
diff --git a/react/features/settings/components/native/ProfileView.tsx b/react/features/settings/components/native/ProfileView.tsx
index 98c33785cd..08fa40c835 100644
--- a/react/features/settings/components/native/ProfileView.tsx
+++ b/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
diff --git a/react/features/toolbox/components/native/Toolbox.tsx b/react/features/toolbox/components/native/Toolbox.tsx
index ce1e5915d0..0249400a2d 100644
--- a/react/features/toolbox/components/native/Toolbox.tsx
+++ b/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() }
diff --git a/react/features/welcome/components/WelcomePage.native.tsx b/react/features/welcome/components/WelcomePage.native.tsx
index a27e774dda..d79bdc2243 100644
--- a/react/features/welcome/components/WelcomePage.native.tsx
+++ b/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>
         );
diff --git a/react/features/welcome/components/styles.native.ts b/react/features/welcome/components/styles.native.ts
index a6a77591c1..622244669b 100644
--- a/react/features/welcome/components/styles.native.ts
+++ b/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]
     },
 
     /**