Custom React Navigation Transition | Implementation and Demo
Tags: react, javascriptdevelopme, javascript, javascripttips
Published: 2019-08-25 10:44:44

---
title: Custom React Navigation Transition | Implementation and Demo
published: true
tags: reactjs,javascript-developme,javascript,javascript-tips
canonical_url: https://kriss.io/custom-react-navigation-transition-implementation-and-demo/
cover_image: https://cdn-images-1.medium.com/max/1024/1*CWZm0DvrW0KkLg3rCrwC4g.png
---


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](https://facebook.github.io/react-native/docs/navigation#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](https://snack.expo.io/@krissnawat/8a3193) 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:

![](https://cdn-images-1.medium.com/proxy/1*MaXY1tecRsnozOlb9-OOKA.gif)

![](https://cdn-images-1.medium.com/max/299/1*OpXPcbv6NfZFwiKv8G66eA.gif)

### 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:

```javascript
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:

```javascript
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:

```javascript
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:

![](https://cdn-images-1.medium.com/proxy/1*w2CW7n-3OeOq5m5w50PbeQ.gif)

![](https://cdn-images-1.medium.com/proxy/1*lIUXblelDlCmuj5jKNgaDA.gif)

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.

```javascript
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:

```javascript
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:

![](https://cdn-images-1.medium.com/proxy/1*2ZlYJC75HWfkX2DlJzzMzQ.gif)

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](https://snack.expo.io/@krissnawat/8a3193).


_Originally published at_ [_https://kriss.io_](https://kriss.io/custom-react-navigation-transition-implementation-and-demo/) _on August 24, 2019._

* * *