| 
 | 1 | +import { NavigationContainer, NavigationProp } from '@react-navigation/native';  | 
 | 2 | +import { createNativeStackNavigator } from '@react-navigation/native-stack';  | 
 | 3 | +import React, { Button, ScrollView, Text, View } from 'react-native';  | 
 | 4 | + | 
 | 5 | +type NavigationParamsList = {  | 
 | 6 | +  Home: undefined,  | 
 | 7 | +  ScrollView: undefined,  | 
 | 8 | +}  | 
 | 9 | + | 
 | 10 | +type StackNavigationProps = NavigationProp<NavigationParamsList>;  | 
 | 11 | + | 
 | 12 | +function ScrollViewComponent() {  | 
 | 13 | +  return (  | 
 | 14 | +    <ScrollView horizontal={ true } >  | 
 | 15 | +      <View style={{ width: 800 }}>  | 
 | 16 | +        <Text style={{ fontSize: 24 }}>  | 
 | 17 | +          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae lacus tempor, condimentum ipsum eu, semper enim. Integer at arcu sem. Cras venenatis tellus non lacus scelerisque viverra. Mauris quis malesuada est. Maecenas venenatis ultricies magna. Etiam ultrices ultrices odio sit amet malesuada. Nullam condimentum pulvinar massa, quis laoreet mi maximus ac.  | 
 | 18 | + | 
 | 19 | +          Etiam vitae condimentum tellus, id semper quam. Sed congue metus lorem, vel viverra velit convallis at. Proin in placerat mauris, in egestas neque. Donec posuere pulvinar turpis id dapibus. Praesent feugiat ullamcorper neque in vehicula. Vestibulum risus nisl, hendrerit eget consequat ac, tincidunt sit amet sem. Integer egestas tristique viverra. Integer faucibus, odio eget lobortis tincidunt, neque est accumsan nunc, sed varius tortor tellus sed lorem. Suspendisse sit amet quam et augue finibus efficitur.  | 
 | 20 | +        </Text>  | 
 | 21 | +        <Text style={{ margin: 50, width: 300 }}>  | 
 | 22 | +          You should not be able to dismiss the screen from the center, only from the edges of the screen.  | 
 | 23 | +        </Text>  | 
 | 24 | +      </View>  | 
 | 25 | +    </ScrollView>  | 
 | 26 | +  );  | 
 | 27 | +}  | 
 | 28 | + | 
 | 29 | +export default function TestScrollViewHorizontal() {  | 
 | 30 | +  const Stack = createNativeStackNavigator<NavigationParamsList>();  | 
 | 31 | + | 
 | 32 | +  return (  | 
 | 33 | +    <NavigationContainer>  | 
 | 34 | +      <Stack.Navigator>  | 
 | 35 | +        <Stack.Screen name='Home' component={(props: { navigation: StackNavigationProps }) => <View>  | 
 | 36 | +          <Button onPress={() => props.navigation.navigate('ScrollView')} title='Go to ScrollView' />  | 
 | 37 | +        </View>} />  | 
 | 38 | +        <Stack.Screen  | 
 | 39 | +          name="ScrollView"  | 
 | 40 | +          component={ScrollViewComponent}  | 
 | 41 | +          options={{  | 
 | 42 | +            animation: 'slide_from_bottom',  | 
 | 43 | +            animationMatchesGesture: true,  | 
 | 44 | +          }}  | 
 | 45 | +        />  | 
 | 46 | +      </Stack.Navigator>  | 
 | 47 | +    </NavigationContainer>  | 
 | 48 | +  );  | 
 | 49 | +}  | 
0 commit comments