React Native, NavigationExperimental Animations

Question

Does React Native Navigation experimental support slide from bottom, slide from left, fade effects etc? If yes how do we do it. Please help.

Answer 1

Just want to note cardStyleInterpolator property was added to NavigationCardStack. So soon (with RN 0.41 and above) it will be possible to use custom animations without rewriting card stack.

Answer 2

If you need left-to-right to top-to-bottom animations you write your own custom interpolator. You could use the NavigationCardStackStyleInterpolator component as a template and make the changes needed. E.g. see the following link to implement top-to-buttom animations:

React Navtive NavigationCardStackStyleInterpolator.forVertical() - How can I change the direction?

Answer 3

When you render your scene using renderScene of NavigationTransitioner, you get props object that contains layout, position, scene and progress. You can use them with your custom interpolation function to create any animation you like.

At this time, react native seems to have only right-to-left and bottom-to-up animations out-of-the-box. You can use them via NavigationCardStackStyleInterpolator: forHorizontal and forVertical.

See: NavigationCardStackStyleInterpolator.js for more details.

If your code looks like: RN-NavigationExperimental-Redux-Example

You can define style property of NavigationCard like:

<NavigationCard
  {...props}
  style={NavigationCardStackStyleInterpolator.forVertical(props)}
  renderScene={this._renderScene}
  key={props.scene.navigationState.key}
/>

This will change transition from left-to-right to bottom-to-up.