Slide in from Left React Navigation Custom Transition Animation React Native Tutorial

Hi Guys, Through this tutorial, I am going to show you how we perform nice slide in from left react navigation custom transition animation. As we know react-navigation is a very nice library which provides the different navigation(s) such as Stack, Tab, Drawer etc. with much more customization option(s).

Final result of slide in from left react navigation custom transition animation tutorial:

 

So, let’s begin…

Step – 1: Install react-navigation (latest version – 3.11.1 at the time of creation of this post). Please follow the react-navigation  official site for installation instructions. Here is the official docs link:

https://reactnavigation.org/docs/en/getting-started.html

Step – 2: Import all required components from react , react-native , react-navigation  packages.

Create a custom method which is responsible to return a class component:

Step – 3: Implement custom  renderScreen method.

Explanation:

  • This renderScreen function is responsible to return a class component and this class component acts as react-navigation screen. Basically, my motive is to create a reusable function here.

Step – 4: Create first screen.

Step – 5: Create second screen.

Step – 6: Create third screen.

Step – 7: Create forth screen.

Step – 8: Create transition config(s) for our custom slide in from left react navigation custom transition animation. From here is the magic begins.

Explanation:

  • Basically, transitionConfig  function returns configuration object for our custom slide in from left react navigation custom transition animation.
  • We have to provide configurations for transitionSpec  and screenInterpolator . As you can see, transitionSpec  contains animation related configuration(s) and screenInterpolator  is responsible to execute the animation.

Step – 9: Create a StackNavigator to configure and arrange our app’s screen(s) into stack layout.

Step – 10: Export App  component.

Complete Source Code:


Enjoy guys, I will upload more post(s) on react native custom transition animation(s). Keep in touch.

Leave a Reply

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