React Native Navigation different animation depending on origin

Question

I'm trying to get the following to work. There are 3 screens:

1. Screen A
2. Screen B
3. Screen C

I want a different animation for when A goes to C than when B goes to C. Does anyone know how to do that?

Answer 1

You can use this library : rn-transitions . SO as per the docs you can add specific transitions to specific pages like :

import { fromLeft, zoomIn, zoomOut } from 'react-navigation-transitions'

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

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'ScreenA'
    && nextScene.route.routeName === 'ScreenB') {
    return zoomIn();
  } else if (prevScene
    && prevScene.route.routeName === 'ScreenB'
    && nextScene.route.routeName === 'ScreenC') {
    return zoomOut();
  }
  return fromLeft();
}

const PrimaryNav = createStackNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB },
  ScreenC: { screen: ScreenC },
}, {
  transitionConfig: (nav) => handleCustomTransition(nav)
})

hope this helps. feel free for doubts