[RN] Add an abstraction layer to Modal

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

@@ -1,7 +1,9 @@
 // @flow
 
 import React, { Component, type Node } from 'react';
-import { Modal, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+import { Modal } from '../../../react';
 
 import { bottomSheetStyles as styles } from './styles';
 
@@ -50,14 +52,8 @@ export default class BottomSheet extends Component<Props> {
                 key = 'overlay'
                 style = { styles.overlay } />,
             <Modal
-                animationType = { 'slide' }
                 key = 'modal'
                 onRequestClose = { this._onCancel }
-                supportedOrientations = { [
-                    'landscape',
-                    'portrait'
-                ] }
-                transparent = { true }
                 visible = { true }>
                 <View style = { styles.container }>
                     <TouchableWithoutFeedback

react/features/base/react/components/native/Modal.js

@@ -0,0 +1,53 @@
+// @flow
+
+import React, { Component, type Node } from 'react';
+import { Modal as NativeModal } from 'react-native';
+
+/**
+ * Type of the props of the component.
+ */
+type Props = {
+
+    /**
+     * Children of the component.
+     */
+    children: Node
+
+    /**
+     * NOTE: We pass through all props to {@code react-native#Modal} that are
+     * passed to this component, so we don't list them all here, as that would
+     * be an unnecessary duplication and probably an unmaintained list after a
+     * while.
+     *
+     * See list: https://facebook.github.io/react-native/docs/modal
+     */
+};
+
+/**
+ * Implements a generic Modal (using the built-in Modal component) to share
+ * behaviour across modals in the app.
+ */
+export default class Modal extends Component<Props> {
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { children, ...props } = this.props;
+
+        return (
+            <NativeModal
+                animationType = { 'slide' }
+                supportedOrientations = { [
+                    'landscape',
+                    'portrait'
+                ] }
+                transparent = { true }
+                { ...props } >
+                { children }
+            </NativeModal>
+        );
+    }
+}

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

@@ -4,6 +4,7 @@ export { default as Header } from './Header';
 export { default as HeaderLabel } from './HeaderLabel';
 export { default as Link } from './Link';
 export { default as LoadingIndicator } from './LoadingIndicator';
+export { default as Modal } from './Modal';
 export { default as NavigateSectionListEmptyComponent } from
     './NavigateSectionListEmptyComponent';
 export { default as NavigateSectionListItem }

react/features/settings/components/native/SettingsView.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import {
     Alert,
-    Modal,
     SafeAreaView,
     ScrollView,
     Switch,
@@ -13,7 +12,7 @@ import {
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
-import { BackButton, Header } from '../../../base/react';
+import { BackButton, Header, Modal } from '../../../base/react';
 
 import {
     AbstractSettingsView,
@@ -58,13 +57,8 @@ class SettingsView extends AbstractSettingsView {
     render() {
         return (
             <Modal
-                animationType = 'slide'
                 onRequestClose = { this._onRequestClose }
-                presentationStyle = 'fullScreen'
-                supportedOrientations = { [
-                    'landscape',
-                    'portrait'
-                ] }
+                presentationStyle = 'overFullScreen'
                 visible = { this.props._visible }>
                 <View style = { Header.pageStyle }>
                     { this._renderHeader() }

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

@@ -64,6 +64,11 @@ export default createStyleSheet({
         padding: 5
     },
 
+    settingsForm: {
+        backgroundColor: ColorPalette.white,
+        flex: 1
+    },
+
     /**
      * Global {@code Text} color for the components.
      */