From f2b2b020295ed6b9b04e30cc92e48f8e3de50c80 Mon Sep 17 00:00:00 2001
From: Calin-Teodor <calin.chitu@8x8.com>
Date: Thu, 6 Oct 2022 16:52:45 +0300
Subject: [PATCH] feat(base/modal): enable scroll for jitsi screen component

---
 .../base/modal/components/JitsiScreen.js      |  35 ++-
 .../components/native/SettingsView.tsx        | 286 +++++++++---------
 2 files changed, 170 insertions(+), 151 deletions(-)

diff --git a/react/features/base/modal/components/JitsiScreen.js b/react/features/base/modal/components/JitsiScreen.js
index 0fbffed2d..ce9aff3f8 100644
--- a/react/features/base/modal/components/JitsiScreen.js
+++ b/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) => (
-    <View
-        style = { styles.jitsiScreenContainer }>
+}: Props) => {
+    const renderContent = () => (
         <JitsiKeyboardAvoidingView
             contentContainerStyle = { contentContainerStyle }
             disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
@@ -74,12 +79,28 @@ const JitsiScreen = ({
             <SafeAreaView
                 edges = { safeAreaInsets }
                 style = { styles.safeArea }>
-                {children}
+                { children }
             </SafeAreaView>
             { footerComponent && footerComponent() }
         </JitsiKeyboardAvoidingView>
-    </View>
-);
+    );
+
+    if (scrollEnabled) {
+        return (
+            <ScrollView
+                bounces = { false }
+                style = { styles.jitsiScreenContainer }>
+                { renderContent() }
+            </ScrollView>
+        );
+    }
+
+    return (
+        <View style = { styles.jitsiScreenContainer }>
+            { renderContent() }
+        </View>
+    );
+};
 
 
 export default JitsiScreen;
diff --git a/react/features/settings/components/native/SettingsView.tsx b/react/features/settings/components/native/SettingsView.tsx
index 63236c720..fa44c1d55 100644
--- a/react/features/settings/components/native/SettingsView.tsx
+++ b/react/features/settings/components/native/SettingsView.tsx
@@ -8,7 +8,6 @@ import {
     Alert,
     NativeModules,
     Platform,
-    ScrollView,
     Text,
     View
 } from 'react-native';
@@ -275,157 +274,156 @@ 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 }
-                            size = { AVATAR_SIZE } />
-                    </View>
-                    <FormSectionAccordion
-                        label = 'settingsView.profileSection'>
-                        <TextInput
-                            autoCorrect = { false }
-                            label = { t('settingsView.displayName') }
-                            mode = 'outlined'
-                            onChangeText = { this._onChangeDisplayName }
-                            placeholder = { t('settingsView.displayNamePlaceholderText') }
-                            placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
-                            spellCheck = { false }
-                            style = { styles.textInputContainer }
-                            textContentType = { 'name' } // iOS only
-                            theme = { textInputTheme }
-                            value = { displayName } />
-                        <Divider style = { styles.fieldSeparator } />
-                        <TextInput
-                            autoCapitalize = 'none'
-                            autoCorrect = { false }
-                            keyboardType = { 'email-address' }
-                            label = { t('settingsView.email') }
-                            mode = 'outlined'
-                            onChangeText = { this._onChangeEmail }
-                            placeholder = 'email@example.com'
-                            placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
-                            spellCheck = { false }
-                            style = { styles.textInputContainer }
-                            textContentType = { 'emailAddress' } // iOS only
-                            theme = { textInputTheme }
-                            value = { email } />
-                    </FormSectionAccordion>
-                    <FormSectionAccordion
-                        label = 'settingsView.conferenceSection'>
-                        <TextInput
-                            autoCapitalize = 'none'
-                            autoCorrect = { false }
-                            editable = { this.props._serverURLChangeEnabled }
-                            keyboardType = { 'url' }
-                            label = { t('settingsView.serverURL') }
-                            mode = 'outlined'
-                            onBlur = { this._onBlurServerURL }
-                            onChangeText = { this._onChangeServerURL }
-                            placeholder = { this.props._serverURL }
-                            placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
-                            spellCheck = { false }
-                            style = { styles.textInputContainer }
-                            textContentType = { 'URL' } // iOS only
-                            theme = { textInputTheme }
-                            value = { serverURL } />
-                        <Divider style = { styles.fieldSeparator } />
-                        <FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
-                            <Switch
-                                checked = { startCarMode }
-                                // @ts-ignore
-                                onChange = { this._onStartCarmodeInLowBandwidthMode } />
-                        </FormRow>
-                        <Divider style = { styles.fieldSeparator } />
-                        <FormRow
-                            label = 'settingsView.startWithAudioMuted'>
-                            <Switch
-                                checked = { startWithAudioMuted }
-                                // @ts-ignore
-                                onChange = { this._onStartAudioMutedChange } />
-                        </FormRow>
-                        <Divider style = { styles.fieldSeparator } />
-                        <FormRow label = 'settingsView.startWithVideoMuted'>
-                            <Switch
-                                checked = { startWithVideoMuted }
-                                // @ts-ignore
-                                onChange = { this._onStartVideoMutedChange } />
-                        </FormRow>
-                        <Divider style = { styles.fieldSeparator } />
-                        <FormRow label = 'videothumbnail.hideSelfView'>
-                            <Switch
-                                checked = { disableSelfView }
-                                // @ts-ignore
-                                onChange = { this._onDisableSelfView } />
-                        </FormRow>
-                    </FormSectionAccordion>
-                    <FormSectionAccordion
-                        label = 'settingsView.links'>
-                        <Link
-                            style = { styles.sectionLink }
+                <View style = { styles.avatarContainer }>
+                    <Avatar
+                        participantId = { this.props._localParticipantId }
+                        size = { AVATAR_SIZE } />
+                </View>
+                <FormSectionAccordion
+                    label = 'settingsView.profileSection'>
+                    <TextInput
+                        autoCorrect = { false }
+                        label = { t('settingsView.displayName') }
+                        mode = 'outlined'
+                        onChangeText = { this._onChangeDisplayName }
+                        placeholder = { t('settingsView.displayNamePlaceholderText') }
+                        placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
+                        spellCheck = { false }
+                        style = { styles.textInputContainer }
+                        textContentType = { 'name' } // iOS only
+                        theme = { textInputTheme }
+                        value = { displayName } />
+                    <Divider style = { styles.fieldSeparator } />
+                    <TextInput
+                        autoCapitalize = 'none'
+                        autoCorrect = { false }
+                        keyboardType = { 'email-address' }
+                        label = { t('settingsView.email') }
+                        mode = 'outlined'
+                        onChangeText = { this._onChangeEmail }
+                        placeholder = 'email@example.com'
+                        placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
+                        spellCheck = { false }
+                        style = { styles.textInputContainer }
+                        textContentType = { 'emailAddress' } // iOS only
+                        theme = { textInputTheme }
+                        value = { email } />
+                </FormSectionAccordion>
+                <FormSectionAccordion
+                    label = 'settingsView.conferenceSection'>
+                    <TextInput
+                        autoCapitalize = 'none'
+                        autoCorrect = { false }
+                        editable = { this.props._serverURLChangeEnabled }
+                        keyboardType = { 'url' }
+                        label = { t('settingsView.serverURL') }
+                        mode = 'outlined'
+                        onBlur = { this._onBlurServerURL }
+                        onChangeText = { this._onChangeServerURL }
+                        placeholder = { this.props._serverURL }
+                        placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
+                        spellCheck = { false }
+                        style = { styles.textInputContainer }
+                        textContentType = { 'URL' } // iOS only
+                        theme = { textInputTheme }
+                        value = { serverURL } />
+                    <Divider style = { styles.fieldSeparator } />
+                    <FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
+                        <Switch
+                            checked = { startCarMode }
                             // @ts-ignore
-                            to = {{ screen: screen.settings.links.help }}>
-                            { t('settingsView.help') }
-                        </Link>
-                        <Divider style = { styles.fieldSeparator } />
-                        <Link
-                            style = { styles.sectionLink }
+                            onChange = { this._onStartCarmodeInLowBandwidthMode } />
+                    </FormRow>
+                    <Divider style = { styles.fieldSeparator } />
+                    <FormRow
+                        label = 'settingsView.startWithAudioMuted'>
+                        <Switch
+                            checked = { startWithAudioMuted }
                             // @ts-ignore
-                            to = {{ screen: screen.settings.links.terms }}>
-                            { t('settingsView.terms') }
-                        </Link>
-                        <Divider style = { styles.fieldSeparator } />
-                        <Link
-                            style = { styles.sectionLink }
+                            onChange = { this._onStartAudioMutedChange } />
+                    </FormRow>
+                    <Divider style = { styles.fieldSeparator } />
+                    <FormRow label = 'settingsView.startWithVideoMuted'>
+                        <Switch
+                            checked = { startWithVideoMuted }
                             // @ts-ignore
-                            to = {{ screen: screen.settings.links.privacy }}>
-                            { t('settingsView.privacy') }
-                        </Link>
-                    </FormSectionAccordion>
-                    <FormSectionAccordion
-                        label = 'settingsView.buildInfoSection'>
-                        <FormRow
-                            label = 'settingsView.version'>
-                            <Text style = { styles.text }>
-                                {`${AppInfo.version} build ${AppInfo.buildNumber}`}
-                            </Text>
-                        </FormRow>
-                    </FormSectionAccordion>
-                    <FormSectionAccordion
-                        label = 'settingsView.advanced'>
-                        { Platform.OS === 'android' && (
-                            <>
-                                <FormRow
-                                    label = 'settingsView.disableCallIntegration'>
-                                    <Switch
-                                        checked = { disableCallIntegration }
-                                        // @ts-ignore
-                                        onChange = { this._onDisableCallIntegration } />
-                                </FormRow>
-                                <Divider style = { styles.fieldSeparator } />
-                            </>
-                        )}
-                        <FormRow
-                            label = 'settingsView.disableP2P'>
-                            <Switch
-                                checked = { disableP2P }
-                                // @ts-ignore
-                                onChange = { this._onDisableP2P } />
-                        </FormRow>
-                        <Divider style = { styles.fieldSeparator } />
-                        {AppInfo.GOOGLE_SERVICES_ENABLED && (
+                            onChange = { this._onStartVideoMutedChange } />
+                    </FormRow>
+                    <Divider style = { styles.fieldSeparator } />
+                    <FormRow label = 'videothumbnail.hideSelfView'>
+                        <Switch
+                            checked = { disableSelfView }
+                            // @ts-ignore
+                            onChange = { this._onDisableSelfView } />
+                    </FormRow>
+                </FormSectionAccordion>
+                <FormSectionAccordion
+                    label = 'settingsView.links'>
+                    <Link
+                        style = { styles.sectionLink }
+                        // @ts-ignore
+                        to = {{ screen: screen.settings.links.help }}>
+                        { t('settingsView.help') }
+                    </Link>
+                    <Divider style = { styles.fieldSeparator } />
+                    <Link
+                        style = { styles.sectionLink }
+                        // @ts-ignore
+                        to = {{ screen: screen.settings.links.terms }}>
+                        { t('settingsView.terms') }
+                    </Link>
+                    <Divider style = { styles.fieldSeparator } />
+                    <Link
+                        style = { styles.sectionLink }
+                        // @ts-ignore
+                        to = {{ screen: screen.settings.links.privacy }}>
+                        { t('settingsView.privacy') }
+                    </Link>
+                </FormSectionAccordion>
+                <FormSectionAccordion
+                    label = 'settingsView.buildInfoSection'>
+                    <FormRow
+                        label = 'settingsView.version'>
+                        <Text style = { styles.text }>
+                            {`${AppInfo.version} build ${AppInfo.buildNumber}`}
+                        </Text>
+                    </FormRow>
+                </FormSectionAccordion>
+                <FormSectionAccordion
+                    label = 'settingsView.advanced'>
+                    { Platform.OS === 'android' && (
+                        <>
                             <FormRow
-                                fieldSeparator = { true }
-                                label = 'settingsView.disableCrashReporting'>
+                                label = 'settingsView.disableCallIntegration'>
                                 <Switch
-                                    checked = { disableCrashReporting }
+                                    checked = { disableCallIntegration }
                                     // @ts-ignore
-                                    onChange = { this._onDisableCrashReporting } />
+                                    onChange = { this._onDisableCallIntegration } />
                             </FormRow>
-                        )}
-                    </FormSectionAccordion>
-                </ScrollView>
+                            <Divider style = { styles.fieldSeparator } />
+                        </>
+                    )}
+                    <FormRow
+                        label = 'settingsView.disableP2P'>
+                        <Switch
+                            checked = { disableP2P }
+                            // @ts-ignore
+                            onChange = { this._onDisableP2P } />
+                    </FormRow>
+                    <Divider style = { styles.fieldSeparator } />
+                    {AppInfo.GOOGLE_SERVICES_ENABLED && (
+                        <FormRow
+                            fieldSeparator = { true }
+                            label = 'settingsView.disableCrashReporting'>
+                            <Switch
+                                checked = { disableCrashReporting }
+                                // @ts-ignore
+                                onChange = { this._onDisableCrashReporting } />
+                        </FormRow>
+                    )}
+                </FormSectionAccordion>
             </JitsiScreen>
         );
     }