feat(settings/native): fixed scroll inside screen (#12395)

* feat(settings): fixed scroll, bottom insets and bounce

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

@@ -1,7 +1,6 @@
-// @flow
 
 import React from 'react';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { StyleType } from '../../styles';
@@ -20,7 +19,7 @@ type Props = {
     /**
      * The children component(s) of the Modal, to be rendered.
      */
-    children: React$Node,
+    children: React.ReactNode,
 
     /**
      * Disabled forced keyboard dismiss?
@@ -47,11 +46,6 @@ type Props = {
      */
     safeAreaInsets?: Array,
 
-    /**
-     * Enable scroll for JitsiScreen.
-     */
-    scrollEnabled?: boolean,
-
     /**
      * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
      */
@@ -66,7 +60,6 @@ const JitsiScreen = ({
     hasBottomTextInput = false,
     disableForcedKeyboardDismiss = false,
     safeAreaInsets = [ 'left', 'right' ],
-    scrollEnabled = false,
     style
 }: Props) => {
     const renderContent = () => (
@@ -85,16 +78,6 @@ const JitsiScreen = ({
         </JitsiKeyboardAvoidingView>
     );
 
-    if (scrollEnabled) {
-        return (
-            <ScrollView
-                bounces = { false }
-                style = { styles.jitsiScreenContainer }>
-                { renderContent() }
-            </ScrollView>
-        );
-    }
-
     return (
         <View style = { styles.jitsiScreenContainer }>
             { renderContent() }

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

@@ -1,6 +1,3 @@
-// @flow
-
-import { ColorSchemeRegistry, schemeColor } from '../../color-scheme';
 
 export default {
 
@@ -12,10 +9,3 @@ export default {
         flex: 1
     }
 };
-
-ColorSchemeRegistry.register('Modal', {
-    page: {
-        alignItems: 'stretch',
-        backgroundColor: schemeColor('background')
-    }
-});

react/features/mobile/navigation/components/settings/components/SettingsNavigationContainer.js

@@ -1,6 +1,6 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HelpView from '../../../../../settings/components/native/HelpView';
@@ -38,6 +38,14 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: Props) => {
     const baseSettingsScreenOptions = isInWelcomePage ? welcomeScreenOptions : settingsScreenOptions;
     const { t } = useTranslation();
 
+    const SettingsScreen = useCallback(() =>
+        (
+            <SettingsView
+                addBottomInset = { !isInWelcomePage }
+                scrollBounces = { isInWelcomePage } />
+        )
+    );
+
     return (
         <NavigationContainer
             independent = { true }
@@ -46,12 +54,13 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: Props) => {
             <SettingsStack.Navigator
                 initialRouteName = { screen.settings.main }>
                 <SettingsStack.Screen
-                    component = { SettingsView }
                     name = { screen.settings.main }
                     options = {{
                         ...baseSettingsScreenOptions,
                         title: t('settings.title')
-                    }} />
+                    }}>
+                    { SettingsScreen }
+                </SettingsStack.Screen>
                 <SettingsStack.Screen
                     component = { HelpView }
                     name = { screen.settings.links.help }

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

@@ -8,6 +8,7 @@ import {
     Alert,
     NativeModules,
     Platform,
+    ScrollView,
     Text,
     View
 } from 'react-native';
@@ -150,6 +151,11 @@ interface Props extends WithTranslation {
      */
     _visible: boolean;
 
+    /**
+     * Add bottom padding to the screen.
+     */
+    addBottomInset?: boolean;
+
     /**
      * Redux store dispatch function.
      */
@@ -159,6 +165,11 @@ interface Props extends WithTranslation {
      * Default prop for navigating between screen components(React Navigation).
      */
     navigation: Object;
+
+    /**
+     * Bounce when scrolling.
+     */
+    scrollBounces?: boolean;
 }
 
 /**
@@ -258,7 +269,11 @@ class SettingsView extends Component<Props, State> {
             startWithVideoMuted
         } = this.state;
 
-        const { t } = this.props;
+        const {
+            addBottomInset = false,
+            scrollBounces = false,
+            t
+        } = this.props;
 
         const textInputTheme = {
             colors: {
@@ -272,9 +287,10 @@ class SettingsView extends Component<Props, State> {
 
         return (
             <JitsiScreen
-                safeAreaInsets = { [ 'bottom', 'left', 'right' ] }
-                scrollEnabled = { true }
+                disableForcedKeyboardDismiss = { true }
+                safeAreaInsets = { [ addBottomInset && 'bottom', 'left', 'right' ].filter(Boolean) }
                 style = { styles.settingsViewContainer }>
+                <ScrollView bounces = { scrollBounces }>
                     <View style = { styles.avatarContainer }>
                         <Avatar
                             participantId = { this.props._localParticipantId }
@@ -423,6 +439,7 @@ class SettingsView extends Component<Props, State> {
                             </FormRow>
                         )}
                     </FormSectionAccordion>
+                </ScrollView>
             </JitsiScreen>
         );
     }