The default screen animation when navigating screen is the screen comes from the right to the left. There are certain cases where I want the screen to do different things when navigating such as left to right or bottom to top. How can I change the screen animation to go from the left of the screen to the right of the screen or bottom to top when navigating?
I provided a snack example here that reproduces exactly what I want to do as well as some code below.
Thank you for any insight at all, I appreciate it more than you know.
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
</Stack.Navigator>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Screen2')}>
<Text style={{fontSize: 20, fontWeight: 'bold', color: 'white'}}>
Press me to navigate, I want to be able to change the direction the screen comes in from, like left to right or bottom to top.
</Text>
</TouchableOpacity>
CodePudding user response:
You can use the cardStyleInterpolator property for screen animations. In the example below, the page will scroll from left to right.
For example:
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
}}
>
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
</Stack.Navigator>
What can be used (cardStyleInterpolator):
forBottomSheetAndroid
forFadeFromBottomAndroid
forFadeFromCenter
forHorizontalIOS
forModalPresentationIOS
forNoAnimation
forRevealFromBottomAndroid
forScaleFromCenterAndroid
forVerticalIOS