Build React Native E-commerce App #3 | App Intro Slider
Tags: reactnative, reactnativeecommer
Published: 2019-10-18 04:42:12

---
title: Build React Native E-commerce App #3 | App Intro Slider
published: true
date: 2019-10-18 03:04:01 UTC
tags: React native,React native Ecommer,react native,react native ecommer
canonical_url: https://kriss.io/build-react-native-e-commerce-app-3-app-intro-slider/
cover_image: https://kriss.io/wp-content/uploads/2019/10/react-native-ecommerce-app.png
---

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](https://www.instamobile.io/app-templates/react-native-ecommerce-app-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:

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

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

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

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

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

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

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

[Read More](https://kriss.io/build-react-native-e-commerce-app-3-app-intro-slider/)


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