React Native Screen Navigation using Animated Transition React Navigation

Multiple screens is base of every dynamic react native application & there is a fix animated transition on screens opening time. When application user navigate from one activity to another react navigation gives us fix pop out and pop in animated transition. But sometimes application developer required to change the animated transition between activities navigation time. In this tutorial we would apply Left to right and Right to left animated transition using custom transition effects on screens navigation time. This tutorial is a major change in React Native Screen Navigation using Animated Transition in React Navigation.

Live Screenshot of application with Left to right transition:

Live screenshot of application with Right to Left transition:

Contents in this project React Native Screen Navigation using Animated Transition in React Navigation :

1. Before getting started the coding as we all know we have to install the React Navigation library in our react naive project to use the customized activity multiple screens. So open your react native project folder in Command prompt or Terminal and execute below command to install react navigation.

Screenshot of CMD:

2. After done installing the react navigation library, we need to install the React Native Gesture Handler library and  React Native Re-Animated library. This library provides us the best on touch screen experience. So execute the below command to install both libraries together.

Screenshot of CMD:

3. Next step is to starting coding. Open your project’s App.js file and import Animated, Button, View, Text, Easing and StyleSheet component.

4. Import createStackNavigator & createAppContainer component from react navigation library to use multiple screens in your project.

5. Create a class named as Screen_1. This class would be our main first home screen.

static navigationOptions :

  1. title : Used to set the screen title which display in Action title bar.
  2. headerTransparent : Making the action bar header transparent.
  3. headerTintColor : Action bar title text color.
  4. backgroundColor : Setting up the action bar background color.

6. Create a class named as Screen_2. This class would be our second screen.

7. Create another class named as Screen_3. This would be our final third screen of application.

8. Create a constant stand alone function named as transitionConfig() and define all the animation properties.

  • duration : Define the animation performing duration.

Note: By default the animation is Left to Right. If you wish to change the animation to Right to Left then simply remove the Minus(-) from outputRange: [-width, 0] line. If you remove the – minus from here then the animation will automatically changes to right to left position.

9. Create a constant named as root using createStackNavigator() component and define all above 3 Screen classes in it. As you can see in below code we have also called the transitionConfig here.

10. Final step is to call the root component using create App Container component.

11. Creating Style.

12. Complete source code for App.js file class.

Screenshots:

React Native Screen Navigation using Animated Transition React Navigation

One Comment

  1. onpress function is not working inside the native base card
    but if we run seperately it works fine can you pls help me

Leave a Reply

Your email address will not be published. Required fields are marked *