Build React Native E-commerce App #3 | App Intro Slider
absek
Posted on October 18, 2019
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);
Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.
Posted on October 18, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.