Build An E-Commerce Mobile App With React Native

Sharing is caring!

With the growth of mobile platforms, there have been a lot of revolutionary changes in the ecommerce industry.

In 2018, 52.2% web traffic was witnessed through mobile devices. 2017 generated 50.3% web traffic through smartphones. These numbers would be increasing each year.

What could be the reason behind the rapid growth of mobile revenues?

Global Paid-for mobile app revenues are boosting each year and industry experts expect mobile app revenue to reach $189 billion by 2020.

There’s no doubt that the ecommerce world is becoming advanced with innovative mobile applications. The consumers can expect a seamless navigation and improved performance with mobile apps for the ecommerce industry.

Also Read – New React Native Mobile App Trend helps businesses succeed in 2020

Native mobile apps are an important weapon for businesses these days. Ecommerce business owners can leverage mobile app platforms and build powerful apps for different platforms. Most of the ecommerce business owners avoid jumping into the arena of mobile apps as they think that it’s a time-consuming and expensive.

And if you need a cost effective mobile app development solution, React Native is here.

What is React Native?

Heard the term “React Native” for the first time? React Native is a popular JavaScript frameworks to create great feature-rich apps. The development tools and libraries can be used to build functional mobile app for different platforms. The huge community is focusing on helping developers and users build ecommerce mobile apps with React Native.

According to Google Trends reports, the term “React Native” has been searched more in 2019 as compared to Xamarin and Flutter app development.

Why choose React Native for building ecommerce mobile apps?

React Native provides great flexibility to the users and offers great features that are required for building an ecommerce store. React Native mobile app development framework is 60% faster than native mobile apps development.

Practical benefits of React Native for ecommerce mobile apps:

• Cross platform compatibility
• Native functionality
• Real-time updates
• Favorable developer experience
• Growing technology

Selling products and services online has become the need of the hour. A lot of people choose mobile devices to shop for the products as well as services. This blog will help you understand how to leverage the power of React Native mobile framework to develop an ecommerce store.

React Native has become one of the most popular JavaScript frameworks for developing awesome apps. The libraries and development tools have been matured gracefully. The community is working hard to develop ecommerce mobile apps with React Native.

Usually, a typical ecommerce website would have three different screens

• Home page or product page
• Checkout page
• Receipt page

React Native was introduced for iOS, but now it is available for Android also. React Native apps work seamlessly for web, iOS and Android platforms. As the developers do not have to code separately for different platforms, it is a trusted choice of several users and developers all over the world.

We’ll show you how to create ecommerce mobile app with React Native.

Prerequisites

Before you read this tutorial, you would need Node.js and npm installed on your system. We will use Expo for faster development. We’ll explain you what Expo is in the later part of the blog.
npm install -g expo-cli

Setting up

Develop iOS and Android would require installation and configuration of Android Studio and Xcode. Expo CLI can be used to set up a development environment on your system and you can begin writing the app code instantly.

Building mobile applications for iOS and Android require installing and configuring Xcode or Android Studio. Expo CLI sets up a development environment on your local machine and you can be writing a React Native app within minutes. Learn How to Optimize The Performance of React Native Apps

You need to install the Expo client app on your iOS and Android mobile. Connect it with the wireless network just as your computer.

Let’s create a new React Native project:

expo init EcommerceApp
cd EcommerceApp

Install the required packages

In this tutorial, we would use two libraries:

• react-native-elements : React Native UI elements that are easy to use & fully customizable
• react-navigation : Community solution to navigation in React Native apps

yarn add react-native-elements

yarn add react-navigation

After the required packages are installed, you need to run npm start to initiate the development server.

You would see the following result:

We have 2 views into the mobile app. We’d find a way to switch between the two views easily.

How the flow will work?

Once the application would load, we will render the products’ home page and products detail pages.

Build a src folder. After that, create a stack navigator and the following routes:

Develop a stack navigator and our routes:

import { createStackNavigator } from 'react-navigation';
import HomeScreen from './views/Home';
import DetailsScreen from './views/Details';

const AppNavigator = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
            navigationOptions: { title: 'Home' }
        },
        Details: {
            screen: DetailsScreen,
            navigationOptions: { title: 'Details' }
        }
    },
    {
        initialRouteName: "Home"
    }
);

export default AppNavigator;

We developed the HomeScreen and the DetailsScreen. navigationOptions is helpful to set up the title for the screen.

initialRouteName option sets the default screen.

If you look at the files, HomeScreen and DetailsScreen are not created yet. Create a new folder called views.

Just create a sample React components with React Native’s View and Text:

// src/views/Home.js
import React from 'react';
import { View, Text } from 'react-native';

class HomeScreen extends React.Component {
    render() {
      return (
        
            Home
        
      );
    }
}

export default HomeScreen;
// src/views/Details.js
import React from 'react';
import { View, Text } from 'react-native';

class DetailsScreen extends React.Component {
    render() {
      return (
        
            Details
        
      );
    }
}

export default DetailsScreen;

Now, eliminate the content from App.js file. You need to tell your app to use the stack navigator that was built previously.

import { createAppContainer } from 'react-navigation';
import AppNavigator from './src/AppNavigator';
export default createAppContainer(AppNavigator);

You’ll see this on the screen.

Another challenge before making our app looks awesome is how we move from HomeScreen to DetailsPage.

// src/views/Home.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
      return (
        <View>
            <Text>Home</Text>
            <Button
                onPress={() => this.props.navigation.navigate('Details')}
                title="Open details page"
            />
        </View>
      );
    }
}

export default withNavigation(HomeScreen);

Well done! In the second part, we shall show you how to make the app look awesome. This will help you make the app “a real ecommerce app.”

For more details check the original source – How To Build An E-Commerce Mobile App With React Native?

About the author:

Jeff is a Co-founder of i-Verve INC that is based in New Jersey USA, who has more than 9 years of experience in developing Mobile, Web, Enterprise App, Cloud & Microsoft Technologies solutions for businesses and startups across the globe. He has a knack of creating beautiful web/mobile portals in all platforms which turns local stores into global superstores. Jeff loves experimenting with new ideas to help clients win more customers and generate revenue to cash in more profits. If you're looking for a person who can help you with design, development and deployment of your website, then I would recommend you to consult with Jeff and his no-nonsense professional advice.