fbpx

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

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);

Here, we set the IntroScreen as default first screen and hide header with headerMode as none.

Hence, we have successfully setup react-navigation. Next, we are going to set up the App Intro Screen.

 

Setting up Intro Screen

Here, we are going to set up IntroScreen screen component in the App.js file. This screen will contain the slider which will provide the introduction of the App to the users. For the sliders, we are going to use a react-native-app-intro-slider package. This package provides a simple and configurable app introduction slider for react-native. It enables us to implement easy-to-use yet configurable app introduction slider/swiper based on FlatList component. In order to install this package, we need to run the following commands:

>>yarn add react-native-app-intro-slider

>>cd ios

>>pod install

Now, we need to import this package into our App.js file as shown in the code snippet below:

import AppIntroSlider from 'react-native-app-intro-slider';

For the next step, we are going to follow the tutorial from aboutreact in order to create a slider dataset.

Note that, the required icon set can be downloaded from the flaticon. The link is attached to the image below:

50 free vector icons of Ecommerce designed by Freepik

Download this free icon pack available in SVG, PSD, PNG, EPS format or as webfonts. Flaticon, the largest database of free vector icons.

Now, we need to download the icons that are required and copy them to ‘./images/’ folder of our project directory as shown in the screenshot below:

Defining Dataset for sliders

Here, we are going to define a simple array dataset for each slider. We are going to have 5 slider screens. Hence, we are going to define 5 arrays of objects containing information on an introduction to our app. The dataset is going to contain a key-value, title text, description text, image and background color as shown in the code snippet below:

const slides = [
  {
    key: 's1',
    text: 'React native Shop',
    title: 'Welcome to React native Ecommerce App',
    image: require('./images/shopping.png'),
    backgroundColor: '#968c7e',
  },
  {
    key: 's2',
    title: 'Multiple payments',
    text: 'we support apple or even google pay',
    image: require('./images/credit-card-1.png'),
    backgroundColor: '#968c7e',
  },
  {
    key: 's3',
    title: '24/7 customer support',
    text: 'fast and great customer support',
    image: require('./images/telephone.png'),
    backgroundColor: '#968c7e',
  },
  {
    key: 's4',
    title: 'Whitelist',
    text: ' Easily build whitelist of your favourite product',
    image: require('./images/wishlist.png'),
    backgroundColor: '#968c7e',
  },
  {
    key: 's5',
    title: 'Free shipping',
    text: 'instant shiiping free and fast',
    image: require('./images/cargo-ship.png'),
    backgroundColor: '#968c7e',
  },
];
const AppNavigator = createStackNavigator(
  {
    IntroScreen: {
      screen: IntroScreen,
    },
    HomeScreen: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: 'IntroScreen',
    headerMode: 'none',
  },
);
const styles = StyleSheet.create({
  buttonCircle: {
    width: 40,
    height: 40,
    backgroundColor: 'rgba(0, 0, 0, .2)',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

Now inside the IntroScreen class, we are going to create a function called renderItem(). This renderItem() function will return the template for each slider screen. The template consists of a parent View component with some inline styles. The parent View component wraps the Text and Image components with some inline styles. These Image and Text component contains a title, intro description, and image for each slider screen. The code to implement this function is provided in the code snippet below:

_renderItem = ({item}) => {
   return (
     <View
       style={{
         flex: 1,
         backgroundColor: item.backgroundColor,
         alignItems: 'center',
         justifyContent: 'space-around',
         paddingBottom: 100,
       }}>
       <Text style={styles.title}>{item.title}</Text>
       <Image style={styles.image} source={item.image} />
       <Text style={styles.text}>{item.text}</Text>
     </View>
   );
 };

Note that we should not forget to import the necessary component like View, Text, Image, etc. from the react-native package.

Finishing slide action

Here, we are going to end the App Intro slides by either using a skip option or finish button.  If the user clicks on the skip or completes the app intro slides by pressing the finish button, the app should navigate to Home Screen. For that, we are going to define a state called showRealApp in App.js file as shown in the code snippet below:

constructor(props) {
   super(props);
   this.state = {
     showRealApp: false,
     //To show the main page of the app
   };
 }

Then, we are going to create two functions in order to handle the navigation from the App intro Screen to the Home screen. The function is named onDone() and onSkip(). The onDone() function should trigger when the user presses the finish button at the end of the slide which navigates the user to the Home screen. Likewise, the onSkip() function should trigger when the user presses the skip button in order to skip the intro slides and navigate to the Home screen. Both of this function changes the state of showRealApp state to true as shown in the code snippet below:

_onDone = () => {
    this.setState({showRealApp: true});
  };
  _onSkip = () => {
    this.setState({showRealApp: true});
  };

Now, we are going to bring it all together in the render() function of the App.js file as shown in the code snippet below:

render() {
    //If false show the Intro Slides
    if (this.state.showRealApp) {
      //Real Application
      return this.props.navigation.navigate('HomeScreen');
    } else {
      //Intro slides
      return (
        <AppIntroSlider
          slides={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
        />
      );
    }
  }

Here, we use state showRealApp in order to handle the user’s action when the user presses the skip or finish button. If showRealApp is true, we are going to navigate the user to Home Screen using navigate() function provided by navigation prop. Else, we are going to return the AppIntroSlider component with its prop configuration as shown in the code snippet above.

Hence, we will get the following result in our emulator screen:

As we can see, the app intro screen is implemented using a slider. Users can slide the slider left in order to read the intro of different features available in our React Native eCommerce app.

With this, we have come to the end of this part of the tutorial. Finally, we have successfully implemented the App Intro Screen using sliders in our React Native eCommerce app.

 

Conclusion

This tutorial is the third part of the React Native Ecommerce app development tutorial series. In this part, we continued from where we left off in the first and second parts of this tutorial series where we implemented a splash screen for both iOS and Android. Here, we learned how to use the react-navigation and its dependent packages in our implement navigation into our app. Then, we got step by step guide on how to implement the App Intro Screen using react-native-app-intro-slider package. Finally, we also handled the navigation away from the App Intro screen.

 

krissanawat

React Native developer from beautiful Chiangmai, love Americano and travel so much