How can I use custom screen to screen transitions with react-navigation 4+?

Question

I need to vary my transition based on the screen, so I had this before react-navigation 4:

const HomeStack = createStackNavigator({
    Home: HomeScreen,
    AScreen,
    BScreen,
    CScreen,
    DScreen,
    EScreen,
  },
  {
    headerMode: 'none',
    transitionConfig: (nav) => handleCustomTransition(nav),
  }

Then something like:

const handleCustomTransition = ({scenes}) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];
  const duration = 500;

  if (prevScene
    && prevScene.route.routeName === 'AScreen'
    && nextScene.route.routeName === 'BScreen') {
    return fromBottom(duration);
  } else if (prevScene
    && prevScene.route.routeName === 'AScreen'
    && nextScene.route.routeName === 'CScreen') {
    return fromBottom(duration);
  }
  return fromRight();
};

So if you're going A->B or A->C the animation is fromBottom() but if you're doing any other transition its fromRight().

Any suggestions on how to update this to the new style? I've read the docs which don't cover per-screen transitions and other pages are incomplete.

Abdul Basit Mangat · Accepted Answer · 2020-04-03 09:22:28Z

2

Make sure you have installed these versions specifically

"react-navigation": "^4.0.10",
"react-navigation-redux-helpers": "^4.0.1",
"react-navigation-stack": "^1.10.3",

Because in higher versions of react navigation there are issues with custom transitions.Now in your file where you are creating stackNavigator.Do it as.

const RouteConfigs = {
   splash: {
     screen: SplashScreen
   },
};

const handleCustomTransition = ({ scenes }) => {
  const nextScene = scenes[scenes.length - 1].route.routeName;
  switch (nextScene) {
    case "splash":
      Utils.enableExperimental();
      return Utils.fromBottom();

    default:
      return false;
  }
};

const NavigatorConfigs = {
  navigationOptions: {
    gesturesEnabled: false
  },
  headerMode: "none",

  transitionConfig: screen => {
    return handleCustomTransition(screen);
  },
  initialRouteName: "splash"
};

const AppNavigator = createStackNavigator(RouteConfigs, NavigatorConfigs);

export default createAppContainer(AppNavigator);

In these lines I've written my own custom animations.So you can define your own.

Utils.enableExperimental();
return Utils.fromBottom();

answered Apr 3, 2020 at 9:22

Abdul Basit Mangat

1,17213 silver badges19 bronze badges

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

1 Comment

Rob Over a year ago

Thanks for the answer. Can you elaborate more on what those Utils functions may look like?

Collectives™ on Stack Overflow

How can I use custom screen to screen transitions with react-navigation 4+?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related