From left to right window animation with react-nav

Question

Is there a way to implement animation that goes from left to right with navigate() function in react-navigation ?

Thanks in advance.

Answer 1

when you define your screens, you can use transitionConfig option.

const Stack = StackNavigator(
  {
    SomeScreen: { screen: ... },
  },
  {
    transitionConfig: customAnimationFunc,
  }
);
...

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

const customAnimationFunc = () => ({
  screenInterpolator: sceneProps => {
    return CardStackStyleInterpolator.forVertical(sceneProps);
  },
});

should do the job. You can of course define your own animation, or return null to disable it; check the sources for that.