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.

Answer 1

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();