feat(settings/native): fixed scroll inside screen (#12395)
* feat(settings): fixed scroll, bottom insets and bounce
This commit is contained in:
parent
a082a3fb0f
commit
4d817af060
|
@ -1,7 +1,6 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ScrollView, View } from 'react-native';
|
import { View } from 'react-native';
|
||||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import { StyleType } from '../../styles';
|
import { StyleType } from '../../styles';
|
||||||
|
@ -20,7 +19,7 @@ type Props = {
|
||||||
/**
|
/**
|
||||||
* The children component(s) of the Modal, to be rendered.
|
* The children component(s) of the Modal, to be rendered.
|
||||||
*/
|
*/
|
||||||
children: React$Node,
|
children: React.ReactNode,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Disabled forced keyboard dismiss?
|
* Disabled forced keyboard dismiss?
|
||||||
|
@ -47,11 +46,6 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
safeAreaInsets?: Array,
|
safeAreaInsets?: Array,
|
||||||
|
|
||||||
/**
|
|
||||||
* Enable scroll for JitsiScreen.
|
|
||||||
*/
|
|
||||||
scrollEnabled?: boolean,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
|
* Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
|
||||||
*/
|
*/
|
||||||
|
@ -66,7 +60,6 @@ const JitsiScreen = ({
|
||||||
hasBottomTextInput = false,
|
hasBottomTextInput = false,
|
||||||
disableForcedKeyboardDismiss = false,
|
disableForcedKeyboardDismiss = false,
|
||||||
safeAreaInsets = [ 'left', 'right' ],
|
safeAreaInsets = [ 'left', 'right' ],
|
||||||
scrollEnabled = false,
|
|
||||||
style
|
style
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const renderContent = () => (
|
const renderContent = () => (
|
||||||
|
@ -85,16 +78,6 @@ const JitsiScreen = ({
|
||||||
</JitsiKeyboardAvoidingView>
|
</JitsiKeyboardAvoidingView>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (scrollEnabled) {
|
|
||||||
return (
|
|
||||||
<ScrollView
|
|
||||||
bounces = { false }
|
|
||||||
style = { styles.jitsiScreenContainer }>
|
|
||||||
{ renderContent() }
|
|
||||||
</ScrollView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style = { styles.jitsiScreenContainer }>
|
<View style = { styles.jitsiScreenContainer }>
|
||||||
{ renderContent() }
|
{ renderContent() }
|
||||||
|
|
|
@ -1,6 +1,3 @@
|
||||||
// @flow
|
|
||||||
|
|
||||||
import { ColorSchemeRegistry, schemeColor } from '../../color-scheme';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
|
@ -12,10 +9,3 @@ export default {
|
||||||
flex: 1
|
flex: 1
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ColorSchemeRegistry.register('Modal', {
|
|
||||||
page: {
|
|
||||||
alignItems: 'stretch',
|
|
||||||
backgroundColor: schemeColor('background')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
import { createStackNavigator } from '@react-navigation/stack';
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
import React from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import HelpView from '../../../../../settings/components/native/HelpView';
|
import HelpView from '../../../../../settings/components/native/HelpView';
|
||||||
|
@ -38,6 +38,14 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: Props) => {
|
||||||
const baseSettingsScreenOptions = isInWelcomePage ? welcomeScreenOptions : settingsScreenOptions;
|
const baseSettingsScreenOptions = isInWelcomePage ? welcomeScreenOptions : settingsScreenOptions;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const SettingsScreen = useCallback(() =>
|
||||||
|
(
|
||||||
|
<SettingsView
|
||||||
|
addBottomInset = { !isInWelcomePage }
|
||||||
|
scrollBounces = { isInWelcomePage } />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavigationContainer
|
<NavigationContainer
|
||||||
independent = { true }
|
independent = { true }
|
||||||
|
@ -46,12 +54,13 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: Props) => {
|
||||||
<SettingsStack.Navigator
|
<SettingsStack.Navigator
|
||||||
initialRouteName = { screen.settings.main }>
|
initialRouteName = { screen.settings.main }>
|
||||||
<SettingsStack.Screen
|
<SettingsStack.Screen
|
||||||
component = { SettingsView }
|
|
||||||
name = { screen.settings.main }
|
name = { screen.settings.main }
|
||||||
options = {{
|
options = {{
|
||||||
...baseSettingsScreenOptions,
|
...baseSettingsScreenOptions,
|
||||||
title: t('settings.title')
|
title: t('settings.title')
|
||||||
}} />
|
}}>
|
||||||
|
{ SettingsScreen }
|
||||||
|
</SettingsStack.Screen>
|
||||||
<SettingsStack.Screen
|
<SettingsStack.Screen
|
||||||
component = { HelpView }
|
component = { HelpView }
|
||||||
name = { screen.settings.links.help }
|
name = { screen.settings.links.help }
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
Alert,
|
Alert,
|
||||||
NativeModules,
|
NativeModules,
|
||||||
Platform,
|
Platform,
|
||||||
|
ScrollView,
|
||||||
Text,
|
Text,
|
||||||
View
|
View
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
@ -150,6 +151,11 @@ interface Props extends WithTranslation {
|
||||||
*/
|
*/
|
||||||
_visible: boolean;
|
_visible: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add bottom padding to the screen.
|
||||||
|
*/
|
||||||
|
addBottomInset?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Redux store dispatch function.
|
* Redux store dispatch function.
|
||||||
*/
|
*/
|
||||||
|
@ -159,6 +165,11 @@ interface Props extends WithTranslation {
|
||||||
* Default prop for navigating between screen components(React Navigation).
|
* Default prop for navigating between screen components(React Navigation).
|
||||||
*/
|
*/
|
||||||
navigation: Object;
|
navigation: Object;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bounce when scrolling.
|
||||||
|
*/
|
||||||
|
scrollBounces?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -258,7 +269,11 @@ class SettingsView extends Component<Props, State> {
|
||||||
startWithVideoMuted
|
startWithVideoMuted
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const { t } = this.props;
|
const {
|
||||||
|
addBottomInset = false,
|
||||||
|
scrollBounces = false,
|
||||||
|
t
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const textInputTheme = {
|
const textInputTheme = {
|
||||||
colors: {
|
colors: {
|
||||||
|
@ -272,9 +287,10 @@ class SettingsView extends Component<Props, State> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<JitsiScreen
|
<JitsiScreen
|
||||||
safeAreaInsets = { [ 'bottom', 'left', 'right' ] }
|
disableForcedKeyboardDismiss = { true }
|
||||||
scrollEnabled = { true }
|
safeAreaInsets = { [ addBottomInset && 'bottom', 'left', 'right' ].filter(Boolean) }
|
||||||
style = { styles.settingsViewContainer }>
|
style = { styles.settingsViewContainer }>
|
||||||
|
<ScrollView bounces = { scrollBounces }>
|
||||||
<View style = { styles.avatarContainer }>
|
<View style = { styles.avatarContainer }>
|
||||||
<Avatar
|
<Avatar
|
||||||
participantId = { this.props._localParticipantId }
|
participantId = { this.props._localParticipantId }
|
||||||
|
@ -423,6 +439,7 @@ class SettingsView extends Component<Props, State> {
|
||||||
</FormRow>
|
</FormRow>
|
||||||
)}
|
)}
|
||||||
</FormSectionAccordion>
|
</FormSectionAccordion>
|
||||||
|
</ScrollView>
|
||||||
</JitsiScreen>
|
</JitsiScreen>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue