fix: iOS 10 bottom sheet style

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

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent, type Node } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { Platform, SafeAreaView, View } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../../color-scheme';
 import { SlidingView } from '../../../react';
@@ -36,21 +36,6 @@ type Props = {
  * A component emulating Android's BottomSheet.
  */
 class BottomSheet extends PureComponent<Props> {
-    /**
-     * Assembles a style for the BottomSheet container.
-     *
-     * @private
-     * @returns {StyleType}
-     */
-    _getContainerStyle() {
-        const { _styles } = this.props;
-
-        return {
-            ...styles.container,
-            backgroundColor: _styles.sheet.backgroundColor
-        };
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -65,15 +50,44 @@ class BottomSheet extends PureComponent<Props> {
                 onHide = { this.props.onCancel }
                 position = 'bottom'
                 show = { true }>
-                <SafeAreaView
+                <View
-                    style = { this._getContainerStyle() }>
+                    pointerEvents = 'box-none'
-                    <View style = { _styles.sheet }>
+                    style = { styles.sheetContainer }>
-                        { this.props.children }
+                    <View
+                        pointerEvents = 'box-none'
+                        style = { styles.sheetAreaCover } />
+                    <View
+                        style = { [
+                            styles.sheetItemContainer,
+                            _styles.sheet
+                        ] }>
+                        { this._getWrappedContent() }
                     </View>
-                </SafeAreaView>
+                </View>
             </SlidingView>
         );
     }
+
+    /**
+     * Wraps the content when needed (iOS 11 and above), or just returns the original children.
+     *
+     * @returns {React$Element}
+     */
+    _getWrappedContent() {
+        if (Platform.OS === 'ios') {
+            const majorVersionIOS = parseInt(Platform.Version, 10);
+
+            if (majorVersionIOS > 10) {
+                return (
+                    <SafeAreaView>
+                        { this.props.children }
+                    </SafeAreaView>
+                );
+            }
+        }
+
+        return this.props.children;
+    }
 }
 
 /**

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

@@ -27,17 +27,25 @@ export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
  * been implemented as per the Material Design guidelines:
  * {@link https://material.io/guidelines/components/bottom-sheets.html}.
  */
-export const bottomSheetStyles = createStyleSheet({
+export const bottomSheetStyles = {
+    sheetAreaCover: {
+        backgroundColor: ColorPalette.transparent,
+        flex: 1
+    },
+
     /**
      * Style for the container of the sheet.
      */
-    container: {
+    sheetContainer: {
-        bottom: 0,
+        alignContent: 'stretch',
-        left: 0,
+        flex: 1,
-        position: 'absolute',
+        flexDirection: 'column'
-        right: 0
+    },
+
+    sheetItemContainer: {
+        paddingHorizontal: MD_ITEM_MARGIN_PADDING
     }
-});
+};
 
 export const brandedDialog = createStyleSheet({
 
@@ -137,10 +145,7 @@ ColorSchemeRegistry.register('BottomSheet', {
      * Bottom sheet's base style.
      */
     sheet: {
-        backgroundColor: schemeColor('background'),
+        backgroundColor: schemeColor('background')
-        flex: 1,
-        paddingHorizontal: MD_ITEM_MARGIN_PADDING,
-        paddingVertical: 8
     },
 
     /**