React Navigation 5.x navigation transition animation based on param

Question

Is it possible to enable/disable the navigation transition animation based on a specifically passed param?

navigation.navigate('SomeScreen', {
          data: someData,
          withAnimation: true,
        });

In the example above, the withAnimation param is set to true, so I want the animation (forRevealFromBottomAndroid) set here to be active:

<Stack.Screen
        name="SomeScreen"
        component={SomeScreen}
        options={{
          headerLeft: null,
          headerShown: false,
          cardStyleInterpolator:
            CardStyleInterpolators.forRevealFromBottomAndroid,
        }}
      />

Martin Fulop · Accepted Answer · 2020-09-23 10:20:23Z

8

Yes it's possible. You can achieve it this way:

In your navigator:

<Stack.Screen
        name="SomeScreen"
        component={SomeScreen}
        options={({route: {params}}) => ({
          headerLeft: null,
          headerShown: false,
          cardStyleInterpolator: params?.withAnimation
              ? CardStyleInterpolators.forHorizontalIOS
              : CardStyleInterpolators.forNoAnimation,
        })}
/>

Where you navigate:

navigation.navigate('SomeScreen', {
    data: someData,
    withAnimation: true
});

answered Sep 23, 2020 at 10:20

Martin Fulop

4015 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karl52 · Accepted Answer · 2020-09-18 19:41:32Z

0

Yes, you can do this way:

let animation = false;
cardStyleInterpolator: animation ? CardStyleInterpolators.forNoAnimation : CardStyleInterpolators.forHorizontalIOS

answered Sep 18, 2020 at 19:41

karl52

116 bronze badges

Collectives™ on Stack Overflow

React Navigation 5.x navigation transition animation based on param

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related