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.

import React, { Component } from 'react';
import { View, Text, Button, Easing, Animated } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

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

Step – 3: Implement custom renderScreen method.

renderScreen = (title, styles, routeName) => {
  return (
    class ScreenComponent extends Component {
      static navigationOptions = {
        headerTitle: `${title} Screen`,
        headerTransparent: true,
        headerTintColor: 'white',
        headerStyle: {
          backgroundColor: 'rgba(0,0,0,0.3)'
        }
      };

      render() {
        return (
          <View style={styles}>
            {routeName !== 'Screen5'
              ? <Button
                title='Go to Next Screen'
                onPress={() => this.props.navigation.navigate(routeName)}
              />
              : <Text style={{ color: 'white', fontSize: 20 }}>No More Screens.</Text>
            }
          </View>
        )
      }
    }
  )
};

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.

const First = renderScreen(
  'First', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#EF5350'
  }, 'Screen2'
);

Step – 5: Create second screen.

const Second = renderScreen(
  'Second', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#AB47BC'
  }, 'Screen3'
);

Step – 6: Create third screen.

const Third = renderScreen(
  'Third', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FF7043'
  }, 'Screen4'
);

Step – 7: Create forth screen.

const Forth = renderScreen(
  'Forth', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#66BB6A'
  }, 'Screen5'
);

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

const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 450,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;

      const thisSceneIndex = scene.index;
      const width = layout.initWidth;

      const translateX = position.interpolate({
        inputRange: [thisSceneIndex - 1, thisSceneIndex],
        outputRange: [-width, 0],
        extrapolate: 'clamp'
      });

      return {
        transform: [{ translateX }]
      }
    }
  }
}

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.

const App = createStackNavigator({
  Screen1: First,
  Screen2: Second,
  Screen3: Third,
  Screen4: Forth
}, {
    transitionConfig
});

Step – 10: Export App  component.

export default createAppContainer(App);

Complete Source Code:

import React, { Component } from 'react';
import { View, Text, Button, Easing, Animated } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

renderScreen = (title, styles, routeName) => {
  return (
    class ScreenComponent extends Component {
      static navigationOptions = {
        headerTitle: `${title} Screen`,
        headerTransparent: true,
        headerTintColor: 'white',
        headerStyle: {
          backgroundColor: 'rgba(0,0,0,0.3)'
        }
      };

      render() {
        return (
          <View style={styles}>
            {routeName !== 'Screen5'
              ? <Button
                title='Go to Next Screen'
                onPress={() => this.props.navigation.navigate(routeName)}
              />
              : <Text style={{ color: 'white', fontSize: 20 }}>No More Screens.</Text>
            }
          </View>
        )
      }
    }
  )
};

const First = renderScreen(
  'First', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#EF5350'
  }, 'Screen2'
);

const Second = renderScreen(
  'Second', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#AB47BC'
  }, 'Screen3'
);

const Third = renderScreen(
  'Third', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FF7043'
  }, 'Screen4'
);

const Forth = renderScreen(
  'Forth', {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#66BB6A'
  }, 'Screen5'
);

const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 450,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;

      const thisSceneIndex = scene.index;
      const width = layout.initWidth;

      const translateX = position.interpolate({
        inputRange: [thisSceneIndex - 1, thisSceneIndex],
        outputRange: [-width, 0],
        extrapolate: 'clamp'
      });

      return {
        transform: [{ translateX }]
      }
    }
  }
}

const App = createStackNavigator({
  Screen1: First,
  Screen2: Second,
  Screen3: Third,
  Screen4: Forth
}, {
    transitionConfig
});

export default createAppContainer(App);

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