React-native-navigation change screen direction when navigating

user_12060231 0
Viewed 551

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>
react-native-navigation react-native reactjs
1 Answers

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
user_107833700
Related