30

How to change the direction of the animation in StackNavigator?

Current Behavior

When user goes to another screen, the screen flies from bottom to top.

Expected Behavior

When user goes to another screen, the screen flies from right to left. (Like Facebook or Instagram!)

StackNavigator Code

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
    // I guess we can do something here
});
  • If we can set the animation time, it will be even better! Currently it looks like the screen flies from middle of the screen to top. I want natural animation like Facebook or Instagram :)

Thanks in advance,

1

6 Answers 6

66

For react navigation > 5.0:

import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
    
const Stack = createStackNavigator();
export default () => (
  <Stack.Navigator
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
    }}
  >
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
  </Stack.Navigator>
);

You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

0
17
+50

For react navigation < 5.0

On iOS it's standard behavior. Android requires a little bit of configuration. There are two options you can use to set screen transitions: mode and transitionConfig. In this case transitionConfig will work:

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15 

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
})

We use CardStackStyleInterpolator from react-navigation source, but you can provide custom transition if you want, here is how to make one or here or this article.

mode is more for default behavior:

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    mode: 'card',
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
});

mode can have only two values:

  • card - Use the standard iOS (right to left) and Android (bottom to top) screen transitions. This is the default.

  • modal - Make the screens slide in from the bottom which is a common iOS pattern. Only works on iOS, has no effect on Android.

For react navigation >= 5.0:

import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
    
const Stack = createStackNavigator();
export default () => (
  <Stack.Navigator
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
    }}
  >
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
  </Stack.Navigator>
);

You may also want to use headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

More info here: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

3
9

Updated answer:

import ReactNavigation from "react-navigation";
createStackNavigator({...},{
  transitionConfig: () =>
    ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})
1
  • While this works perfectly one should not have an iOS specific animation in an android app for user experience consistency.
    – Kewal Shah
    Jun 26, 2020 at 18:43
2

Here,I just post my answer so that you can change the direction of the animation! That's all! The answer you have accepted is just default!

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
});

In this way, the screen transitions will become right to left on both two platforms! What you need to pay more attention to is you can set any screen transitions whatever you want by using transitionConfig props!

1
1

The solution is very simple. In React navigation 4.x you can do like this

import { createAppContainer } from 'react-navigation'
import { createStackNavigator, StackViewTransitionConfigs  } from 'react-navigation-stack';

const Navigation = createStackNavigator({
  screenA: ComponentA,
  screenB: ComponentB,
}, {
  mode: 'card',
  transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}

export const AppNavigation = createAppContainer(Navigation)

Note: You can achieve like this transition in previous react navigation versions also, but you have to change the import

0

animation​ How the screen should animate when pushed or popped.

Supported values:

default: use the platform default animation fade: fade screen in or out fade_from_bottom: fade the new screen from bottom flip: flip the screen, requires stackPresentation: "modal" (iOS only) simple_push: default animation, but without shadow and native header transition (iOS only, uses default animation on Android) 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 Only supported on Android and iOS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.