fix(rn,toolbox) fill gap underneath Toolbox

This is for devices without the home button.

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

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { NativeModules, SafeAreaView, StatusBar } from 'react-native';
+import { NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
 
 import { appNavigate } from '../../../app/actions';
 import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
@@ -272,7 +272,7 @@ class Conference extends AbstractConference<Props, *> {
                         </TintedView>
                 }
 
-                <SafeAreaView
+                <View
                     pointerEvents = 'box-none'
                     style = { styles.toolboxAndFilmstripContainer }>
 
@@ -285,10 +285,8 @@ class Conference extends AbstractConference<Props, *> {
                     <LonelyMeetingExperience />
 
                     { _shouldDisplayTileView ? undefined : <Filmstrip /> }
-
                     <Toolbox />
-
+                </View>
-                </SafeAreaView>
 
                 <SafeAreaView
                     pointerEvents = 'box-none'

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

@@ -1,10 +1,9 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
-import { Container } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { ChatButton } from '../../../chat';
@@ -48,12 +47,37 @@ class Toolbox extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
+        if (!this.props._visible) {
+            return null;
+        }
+
+        const { _styles } = this.props;
+        const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
+
         return (
-            <Container
+            <View
-                style = { styles.toolbox }
+                pointerEvents = 'box-none'
-                visible = { this.props._visible }>
+                style = { styles.toolboxContainer }>
-                { this._renderToolbar() }
+                <SafeAreaView
-            </Container>
+                    accessibilityRole = 'toolbar'
+                    pointerEvents = 'box-none'
+                    style = { styles.toolbox }>
+                    <AudioMuteButton
+                        styles = { buttonStylesBorderless }
+                        toggledStyles = { toggledButtonStyles } />
+                    <VideoMuteButton
+                        styles = { buttonStylesBorderless }
+                        toggledStyles = { toggledButtonStyles } />
+                    <ChatButton
+                        styles = { buttonStylesBorderless }
+                        toggledStyles = { this._getChatButtonToggledStyle(toggledButtonStyles) } />
+                    <OverflowMenuButton
+                        styles = { buttonStylesBorderless }
+                        toggledStyles = { toggledButtonStyles } />
+                    <HangupButton
+                        styles = { hangupButtonStyles } />
+                </SafeAreaView>
+            </View>
         );
     }
 
@@ -87,40 +111,6 @@ class Toolbox extends PureComponent<Props> {
             ]
         };
     }
-
-    /**
-     * Renders the toolbar. In order to avoid a weird visual effect in which the
-     * toolbar is (visually) rendered and then visibly changes its size, it is
-     * rendered only after we've figured out the width available to the toolbar.
-     *
-     * @returns {React$Node}
-     */
-    _renderToolbar() {
-        const { _styles } = this.props;
-        const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
-
-        return (
-            <View
-                accessibilityRole = 'toolbar'
-                pointerEvents = 'box-none'
-                style = { styles.toolbar }>
-                <AudioMuteButton
-                    styles = { buttonStylesBorderless }
-                    toggledStyles = { toggledButtonStyles } />
-                <VideoMuteButton
-                    styles = { buttonStylesBorderless }
-                    toggledStyles = { toggledButtonStyles } />
-                <ChatButton
-                    styles = { buttonStylesBorderless }
-                    toggledStyles = { this._getChatButtonToggledStyle(toggledButtonStyles) } />
-                <OverflowMenuButton
-                    styles = { buttonStylesBorderless }
-                    toggledStyles = { toggledButtonStyles } />
-                <HangupButton
-                    styles = { hangupButtonStyles } />
-            </View>
-        );
-    }
 }
 
 /**

react/features/toolbox/components/native/styles.js

@@ -62,7 +62,7 @@ const styles = {
     /**
      * The style of the toolbar.
      */
-    toolbar: {
+    toolbox: {
         alignItems: 'center',
         backgroundColor: ColorPalette.darkBackground,
         borderRadius: 3,
@@ -74,9 +74,9 @@ const styles = {
     },
 
     /**
-     * The style of the root/top-level {@link Container} of {@link Toolbox}.
+     * The style of the root/top-level container of {@link Toolbox}.
      */
-    toolbox: {
+    toolboxContainer: {
         flexDirection: 'column',
         flexGrow: 0,
         width: '100%',