Build React Native E-commerce App #3 | App Intro Slider

This tutorial is the third part of our implementation of the React Native eCommerce app series. In the previous parts, we successfully set up react-native 0.61 as well as set up a splash screen for both Android as well as the iOS platform. This part is the continuation of the same tutorial series. where we are going to implement a Splash Screen for the iOS platform. So, for the implementation of Splash Screen in the Android platform it is highly recommended to go through the second part of this tutorial series.

As mentioned in the previous part, this tutorial series was inspired by the React Native Eccomerce template which helps us to implement amazing ready to deploy eCommerce applications that anyone can use to establish eCommerce startups or sell the application templates.

Overview

In this part, we are going to implement the App Intro screen using the latest version of React Native and plugins. The App Intro screen is the screen that shows up when the user installs the app and launches it for the first time. The App Intro describes everything about the app in summary as well as states the overall features. The idea is to start by adding the react-navigation with its dependent packages. Then, we are going to implement the App Intro screen with slider using the react-native-app-intro-slider package. We are also going to set up a Home screen for the next tutorial.

So, let’s get started!!

Installing React Native Navigation Packages

In this 1st step, we are going to install the react-native-navigation package which allows us to set up navigators in order to navigate from one screen to another. With the react-native-navigation package, we are going to install additional packages that the react-native-navigation package depends upon. Without all the packages, the navigation will not work properly. So, we should make sure that we install all the packages. For that, we need to run the following command in our project directory:

yarn add react-navigation react-navigation-stack react-native-reanimated react-native-gesture-handler react-native-screens

Now, we need to link these packages to the native parts. For that, we need to navigate to the ‘./ios’ directory of our project in command prompt. Then, we need to run the following command:

pod install

Configuring App.js

Here, we are going to configure the App.js file for route management. For that, we need to import two main route packages that we installed before. The packages are react-navigation and react-navigation-stack. The code to import them to App.js file is provided in the code snippet below:

import {createAppContainer} from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack';

We can see that the class name in the App.js file is named as App. Since we are using our first screen as Intro App screen, we are going to change the class name to IntroScreen as shown in the code snippet below:

class IntroScreen extends React.Component {

Implementing Home Screen

Here, we are going to implement a basic Home screen for the next part of the tutorial. The Home screen should be displayed after we successfully navigate from the Intro screen. In order to create the Home screen, we need to create a new file named HomeScreen.js in ‘./screens/’ folder of our project directory. Then, inside the HomeScreen.js file, we need to import necessary packages and include a Component class called HomeScreen. The code to implement a simple HomeScreen.js file is provided in the code snippet below:

import React, {Component} from 'react';
import {View, Text} from 'react-native';
class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Text
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'stretch',
          }}>
          HomeScreen
        </Text>
      </View>
    );
  }
}
export default HomeScreen;

Now, we are going to include the HomeScreen to our App.js file. For that, we need to import the HomeScreen.js file into the App.js file as HomeScreen component as shown in the code snippet below:

import HomeScreen from './src/screens/HomeScreen';

Implementing Navigator

Now, we are going to create an app navigator in the App.js file. This will enable us to navigate to different screens in our React Native app. For that, we need to create an AppNavigator using createStackNavigator function provided by the react-navigation-stack package. This createStackNavigator function takes two parameters. The first parameter is for defining screens and the second is for the navigation options. In navigation options, we can set the initialRouteName which defines the screen that opens when the app is launched and headerMode which defines if the header bar should be shown or not. Then, we need to export the navigator as an app container by using createAppContainer() method provided by the react-navigation package. It takes a navigator as a parameter. The overall code to implement our navigator is provided in the code snippet below:

const AppNavigator = createStackNavigator(
  {
    IntroScreen: {
      screen: IntroScreen,
    },
    HomeScreen: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: 'IntroScreen',
    headerMode: 'none',
  },
);
export default createAppContainer(AppNavigator);

Read More

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.