feat(filmstrip/toolbox) mobile ui updates (#11051)

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

@@ -1,9 +1,11 @@
 // @flow
 
 import React from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
+import { Platform } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { ChatButton } from '../../../chat';
@@ -26,6 +28,11 @@ import styles from './styles';
  */
 type Props = {
 
+    /**
+     * Whether or not the reactions feature is enabled.
+     */
+    _reactionsEnabled: boolean,
+
     /**
      * The color-schemed stylesheet of the feature.
      */
@@ -39,12 +46,7 @@ type Props = {
     /**
      * The width of the screen.
      */
-    _width: number,
-
-    /**
-     * Whether or not the reactions feature is enabled.
-     */
-    _reactionsEnabled: boolean
+    _width: number
 };
 
 /**
@@ -54,11 +56,13 @@ type Props = {
  * @returns {React$Element}.
  */
 function Toolbox(props: Props) {
-    if (!props._visible) {
+    const { _reactionsEnabled, _styles, _visible, _width } = props;
+
+    if (!_visible) {
         return null;
     }
 
-    const { _styles, _width, _reactionsEnabled } = props;
+    const bottomEdge = Platform.OS === 'ios' && _visible;
     const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
     const additionalButtons = getMovableButtons(_width);
     const backgroundToggledStyle = {
@@ -75,6 +79,7 @@ function Toolbox(props: Props) {
             style = { styles.toolboxContainer }>
             <SafeAreaView
                 accessibilityRole = 'toolbar'
+                edges = { [ bottomEdge && 'bottom' ].filter(Boolean) }
                 pointerEvents = 'box-none'
                 style = { styles.toolbox }>
                 <AudioMuteButton