feat(base/modal): enable scroll for jitsi screen component

react/features/base/modal/components/JitsiScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { StyleType } from '../../styles';
@@ -47,6 +47,11 @@ type Props = {
      */
     safeAreaInsets?: Array,
 
+    /**
+     * Enable scroll for JitsiScreen.
+     */
+    scrollEnabled?: boolean,
+
     /**
      * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
      */
@@ -61,10 +66,10 @@ const JitsiScreen = ({
     hasBottomTextInput = false,
     disableForcedKeyboardDismiss = false,
     safeAreaInsets = [ 'left', 'right' ],
+    scrollEnabled = false,
     style
-}: Props) => (
+}: Props) => {
-    <View
+    const renderContent = () => (
-        style = { styles.jitsiScreenContainer }>
         <JitsiKeyboardAvoidingView
             contentContainerStyle = { contentContainerStyle }
             disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
@@ -74,12 +79,28 @@ const JitsiScreen = ({
             <SafeAreaView
                 edges = { safeAreaInsets }
                 style = { styles.safeArea }>
-                {children}
+                { children }
             </SafeAreaView>
             { footerComponent && footerComponent() }
         </JitsiKeyboardAvoidingView>
+    );
+
+    if (scrollEnabled) {
+        return (
+            <ScrollView
+                bounces = { false }
+                style = { styles.jitsiScreenContainer }>
+                { renderContent() }
+            </ScrollView>
+        );
+    }
+
+    return (
+        <View style = { styles.jitsiScreenContainer }>
+            { renderContent() }
         </View>
-);
+    );
+};
 
 
 export default JitsiScreen;

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

@@ -8,7 +8,6 @@ import {
     Alert,
     NativeModules,
     Platform,
-    ScrollView,
     Text,
     View
 } from 'react-native';
@@ -275,8 +274,8 @@ class SettingsView extends Component<Props, State> {
         return (
             <JitsiScreen
                 safeAreaInsets = { [ 'bottom', 'left', 'right' ] }
+                scrollEnabled = { true }
                 style = { styles.settingsViewContainer }>
-                <ScrollView>
                 <View style = { styles.avatarContainer }>
                     <Avatar
                         participantId = { this.props._localParticipantId }
@@ -425,7 +424,6 @@ class SettingsView extends Component<Props, State> {
                         </FormRow>
                     )}
                 </FormSectionAccordion>
-                </ScrollView>
             </JitsiScreen>
         );
     }