[RN] Refactor SimpleBottomSheet

Make it more generic by accepting any content except of just rows with text and
icons.

In addition, rework its structure so the animation is smoother, by putting the
background overlay outside of the Modal. This way, the animation doesn't affect
the background, which won't slide down.

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

@@ -0,0 +1,84 @@
+// @flow
+
+import React, { Component, type Node } from 'react';
+import { Modal, TouchableWithoutFeedback, View } from 'react-native';
+
+import { bottomSheetStyles as styles } from './styles';
+
+/**
+ * The type of {@code BottomSheet}'s React {@code Component} prop types.
+ */
+type Props = {
+
+    /**
+     * The children to be displayed within this component.
+     */
+    children: Node,
+
+    /**
+     * Handler for the cancel event, which happens when the user dismisses
+     * the sheet.
+     */
+    onCancel: ?Function
+};
+
+/**
+ * A component emulating Android's BottomSheet. For all intents and purposes,
+ * this component has been designed to work and behave as a {@code Dialog}.
+ */
+export default class BottomSheet extends Component<Props> {
+    /**
+     * Initializes a new {@code BottomSheet} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onCancel = this._onCancel.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return [
+            <View
+                key = 'overlay'
+                style = { styles.overlay } />,
+            <Modal
+                animationType = { 'slide' }
+                key = 'modal'
+                onRequestClose = { this._onCancel }
+                transparent = { true }
+                visible = { true }>
+                <View style = { styles.container }>
+                    <TouchableWithoutFeedback
+                        onPress = { this._onCancel } >
+                        <View style = { styles.backdrop } />
+                    </TouchableWithoutFeedback>
+                    <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();
+    }
+}

react/features/base/dialog/components/index.js

@@ -1,4 +1,4 @@
+export { default as BottomSheet } from './BottomSheet';
 export { default as DialogContainer } from './DialogContainer';
 export { default as Dialog } from './Dialog';
-export { default as SimpleBottomSheet } from './SimpleBottomSheet';
 export { default as StatelessDialog } from './StatelessDialog';