Custom React Navigation Transition | Implementation and Demo

In this tutorial, we are going to learn how to customize React Navigation transition. If you are just about to learn about React Native navigation, you should probably go through React Navigation first. This will make things easier for you in this tutorial.

Here, to exemplify the use of React Native navigation and customized transitions, we are going to add transition effect when we change the screens in the React Native app.

First, I have prepared a seed project here in expo so that you can get the boilerplate to implement the customized navigation transitions. Then, you can follow step by step instruction in this tutorial in order to create your own customized transitions while navigating to different screens.

The simulation given below shows the transitions from one screen to another without animation:

1. Bootstrap Animation for React Navigation Transition

In this step, we are going to get started with our animation with different props. Here, we need to create a new variable to handle animation properties in our App.js file. The code to handle this is provided in the code snippet below:

const NavigationOptions = () =>{
  return {
    screenInterpolator:(sceneProps)=>{
      const { layout, position, scene } = sceneProps;
      const { index } = scene;
      return FadeTransition(position,index);
    }
  }
}

In the code above, we use screenInterpolator method to intercept navigation data.

• position refers to screen position.
• index refers to the current screen index.

Then, we need to pass data to the Animation function i.e. FadeTransition function in the code above.

2. Create Animation function

In this step, we are going to create the Animation function that we mentioned above. The animation function we are going to create is FadeTransition that will accept two arguments position and index. The code to implement the animation function is provided in the code snippet below:

const FadeTransition = (position,index) =>{
  const sceneRange = [index-1,index]
  const outputOpacity = [0,1]
  const transition = position.interpolate({
    inputRange:sceneRange,
    outputRange:outputOpacity
  })
  return {
    opacity:transition
  }
}

Here, we are creating two variables. sceneRange to defined start screen and previous screen and then, outputRange to control opacity range. Then, finally, we need to add these two variables to interpolate function that we are using for initializing animation.

3. Add to main navigation

The last thing we need to do is to add all the options to AppNavigator variable initialized to createStackNavigator method. The code to add all the options to our main navigation constant AppNavigator is provided in the code snippet below:

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: Home
    },
     Screen1: {
      screen: Screen1
    },Screen2: {
      screen: Screen2
    }
  },
  {
    headerMode:'none',
 **transitionConfig:NavigationOptions**
  });

Here, as we can see we have added our NavigationOptions to transitionConfig in order to integrate our animation to the transition.

Now, we need to test if everything works as expected. The simulation of the test is shown in the emulator simulation below:

Hence, we have got the result of our implementation. The customized navigation transitions work as expected as per the above simulations.

4. Adding other Animations

In this step, we try to further customize our animation. Here, we are going to other animation styles such as translateY. In order to do this, we need to create a new animation function named BottomTransition as shown in the code snippet below.

const BottomTransition = (position,index,height)=>{
  let sceneRange = [index-1,index]
  let outputHeight = [height,0]
  let transition = position.interpolate({
    inputRange:sceneRange,
    outputRange:outputOpacity
  })
  return {
   transform:[{translateY:transition}]
  }
}

Here, we need to do just as in the second step but we need to replace opacity with translateY. Then, the animation function also receives a new parameter i.e. height.

Then, we also need to change the function in NavigationOptions from FadeTransition to BottomTransition as shown in the code snippet below:

const NavigationOptions = () =>{
  return {
    screenInterpolator:(sceneProps)=>{
      const { layout, position, scene } = sceneProps;
      const { index } = scene;
      const height = layout.initHeight;
       return BottomTransition(position,index,height);
      // return FadeTransition(position,index);
    }
  }
}

Here, you can see that the FadeTransition method is commented out.

Now, let’s try to run our new customized navigation transition animation on our emulator:

Thus, our navigation transition for one screen to another is now vertical animation. This successfully completes our tutorial to create customized navigation transitions.

Hope you enjoyed the tutorial!

Conclusion

In this tutorial, we learned how to use customized transitions in React Native navigations. We also learned to implement react-native animations in a simple and basic way. With this tutorial, you will be able to create your very own React Native animations as well as add customized navigation transitions. The full demo of the tutorial is available in the snack.

Originally published at https://kriss.io on August 24, 2019.