From 70dc22c107da1ea2bd5b3de6cdf6bdf36f943eb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Wed, 24 Apr 2019 13:05:14 +0200
Subject: [PATCH] rn: refactor BottomSheet

Avoid using a Modal since those create trouble with the view hierarchy.
---
 .../dialog/components/native/BottomSheet.js   | 65 +++++++------------
 .../base/dialog/components/native/styles.js   | 25 ++-----
 .../react/components/native/SlidingView.js    |  1 +
 3 files changed, 29 insertions(+), 62 deletions(-)

diff --git a/react/features/base/dialog/components/native/BottomSheet.js b/react/features/base/dialog/components/native/BottomSheet.js
index 3fbefce4e3..977b50161b 100644
--- a/react/features/base/dialog/components/native/BottomSheet.js
+++ b/react/features/base/dialog/components/native/BottomSheet.js
@@ -1,10 +1,10 @@
 // @flow
 
-import React, { Component, type Node } from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import React, { PureComponent, type Node } from 'react';
+import { SafeAreaView, View } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../../color-scheme';
-import { Modal } from '../../../react';
+import { SlidingView } from '../../../react';
 import { connect } from '../../../redux';
 import { StyleType } from '../../../styles';
 
@@ -33,19 +33,22 @@ type Props = {
 };
 
 /**
- * A component emulating Android's BottomSheet. For all intents and purposes,
- * this component has been designed to work and behave as a {@code Dialog}.
+ * A component emulating Android's BottomSheet.
  */
-class BottomSheet extends Component<Props> {
+class BottomSheet extends PureComponent<Props> {
     /**
-     * Initializes a new {@code BottomSheet} instance.
+     * Assembles a style for the BottomSheet container.
      *
-     * @inheritdoc
+     * @private
+     * @returns {StyleType}
      */
-    constructor(props: Props) {
-        super(props);
+    _getContainerStyle() {
+        const { _styles } = this.props;
 
-        this._onCancel = this._onCancel.bind(this);
+        return {
+            ...styles.container,
+            backgroundColor: _styles.sheet.backgroundColor
+        };
     }
 
     /**
@@ -57,39 +60,19 @@ class BottomSheet extends Component<Props> {
     render() {
         const { _styles } = this.props;
 
-        return [
-            <View
-                key = 'overlay'
-                style = { styles.overlay } />,
-            <Modal
-                key = 'modal'
-                onRequestClose = { this._onCancel }
-                visible = { true }>
-                <View style = { styles.container }>
-                    <TouchableWithoutFeedback
-                        onPress = { this._onCancel } >
-                        <View style = { styles.backdrop } />
-                    </TouchableWithoutFeedback>
+        return (
+            <SlidingView
+                onHide = { this.props.onCancel }
+                position = 'bottom'
+                show = { true }>
+                <SafeAreaView
+                    style = { this._getContainerStyle() }>
                     <View style = { _styles.sheet }>
                         { this.props.children }
                     </View>
-                </View>
-            </Modal>
-        ];
-    }
-
-    _onCancel: () => void;
-
-    /**
-     * Cancels the dialog by calling the onCancel prop callback.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onCancel() {
-        const { onCancel } = this.props;
-
-        onCancel && onCancel();
+                </SafeAreaView>
+            </SlidingView>
+        );
     }
 }
 
diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js
index daad37f3de..0d31d8fb43 100644
--- a/react/features/base/dialog/components/native/styles.js
+++ b/react/features/base/dialog/components/native/styles.js
@@ -28,31 +28,14 @@ export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
  * {@link https://material.io/guidelines/components/bottom-sheets.html}.
  */
 export const bottomSheetStyles = createStyleSheet({
-    /**
-     * Style for a backdrop which dims the view in the background. This view
-     * will also be clickable. The backgroundColor is applied to the overlay
-     * view instead, so the modal animation doesn't affect the backdrop.
-     */
-    backdrop: {
-        ...StyleSheet.absoluteFillObject
-    },
-
     /**
      * Style for the container of the sheet.
      */
     container: {
-        alignItems: 'flex-end',
-        flex: 1,
-        flexDirection: 'row',
-        justifyContent: 'center'
-    },
-
-    /**
-     * Style for an overlay on top of which the sheet will be displayed.
-     */
-    overlay: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(127, 127, 127, 0.6)'
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0
     }
 });
 
diff --git a/react/features/base/react/components/native/SlidingView.js b/react/features/base/react/components/native/SlidingView.js
index 2a2079f5c2..03d2726ad2 100644
--- a/react/features/base/react/components/native/SlidingView.js
+++ b/react/features/base/react/components/native/SlidingView.js
@@ -162,6 +162,7 @@ export default class SlidingView extends PureComponent<Props, State> {
                     <View style = { styles.sliderViewShadow } />
                 </TouchableWithoutFeedback>
                 <Animated.View
+                    pointerEvents = 'box-none'
                     style = { this._getContentStyle() }>
                     { this.props.children }
                 </Animated.View>