Stack.Navigator fade-transition between Stack.Screens in React-native?

user_1469734 0
Viewed 9320

How can I add a transition effect to Stacked Screes in React-native?

<NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Stocks" component={StocksScreen} />
    </Stack.Navigator>
</NavigationContainer>

Is there a default way to achieve a fadeIn / fadeOut effect?

react-navigation-stack react-navigation react-native
2 Answers

The simplest way to achieve fade effect:

const forFade = ({ current }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

If you want to apply fade effect for the entire navigator:

<Stack.Navigator
   screenOptions={{
      headerShown: false,
      cardStyleInterpolator: forFade,
   }}>
   <Stack.Screen name="Home" component={HomeScreen} />
   <Stack.Screen name="Stocks" component={StocksScreen} />
</Stack.Navigator>

Also you can apply cardStyleInterpolator for single screen via setting options:

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{ cardStyleInterpolator: forFade }}/>

You can customize forFade function in order to achieve other effects, or also you can use some pre-made interpolators, as:

  • forHorizontalIOS
  • forVerticalIOS
  • forModalPresentationIOS
  • forFadeFromBottomAndroid
  • forRevealFromBottomAndroid
import { CardStyleInterpolators } from '@react-navigation/stack';

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
  }}
/>;

More info here: https://reactnavigation.org/docs/stack-navigator/#animations

user_35442060

For React Navigation 6.xx you can use the animation option:

<Stack.Screen
        name="Profile"
        component={Profile}
        options={{ animation: 'fade' }}
/>

Supported values:

  • "default": use the platform default animation
  • "fade": fade screen in or out
  • "flip": flip the screen, requires presentation: "modal" (iOS only)
  • "simple_push": use the platform default animation, but without shadow and native header transition (iOS only)
  • "slide_from_bottom": slide in the new screen from bottom
  • "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS)
  • "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS)
  • "none": don't animate the screen
user_22919350
Related