How to Build an E-Commerce Mobile App with React Native?

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.”

Introducing Flexbox

Flexbox is an amazing layout tool in CSS3 that allows you to divide the space into different columns and rows.

Open src/views/Home.js and put this into it:

// src/views/Home.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { withNavigation } from 'react-navigation';
class HomeScreen extends React.Component {
    render() {
      return (
              Product here
      );
    }
}
const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});
export default withNavigation(HomeScreen);

We developed a new style object similar to CSS Stylesheets. Define the direction of the main axis row.

React Native Elements

React Native Elements offer all-in-one UI kit for building apps in react native: cards, button, pricing, etc.

Let’s create a new component: Product that is basically a Card component described here.

// src/components/Product.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { withNavigation } from 'react-navigation';
class Product extends React.Component {
    render() {
      return (
        <Card
            image={{uri: 'http://oldiverve.i-verve.com//wp-content/uploads/2019/06/timberland-shoes.jpg'}}>
            <Text style={{marginBottom: 10, marginTop: 20 }} h2>
                Timberland shoes
            </Text>
            <Text style={styles.price} h4>
                $ 450
            </Text>
            <Text h6 style={styles.description}>
                added 1d ago
            </Text>
            <Button
            type="clear"
            title='Buy now'
            onPress={() => this.props.navigation.navigate('Details')} />
        </Card>
      );
    }
}
const styles = StyleSheet.create({
    name: {
        color: '#5a647d',
        fontWeight: 'bold',
        fontSize: 30
    },
    price: {
        fontWeight: 'bold',
        marginBottom: 10
    },
    description: {
        fontSize: 10,
        color: '#c1c4cd'
    }
});
export default withNavigation(Product);

Let’s use this component in src/views/Home.js:

// src/views/Home.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { withNavigation } from 'react-navigation';
import Product from '../components/Product';
class HomeScreen extends React.Component {
    render() {
      return (
      );
    }
}
const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});
export default withNavigation(HomeScreen);

You’re all set.

It’s time to add some random products. Create an array in src/views/Home.js file. You can also use it to render a list of products. Here’s how to do it:

// src/views/Home.js
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { withNavigation } from 'react-navigation';
import Product from '../components/Product';
const BASE_URL = 'https://raw.githubusercontent.com/sdras/sample-vue-shop/master/dist';
const products = [
  {
    name: 'Nike Shoes',
    price: 449.99,
    img: `${BASE_URL}/1.png`
  },
  {
    name: 'Shoes 2',
    price: 389.99,
    img: `${BASE_URL}/2.png`
  },
  {
    name: 'Shoes 3',
    price: 249.99,
    img: `${BASE_URL}/3.png`
  },
  {
    name: 'Shoes 4',
    price: 185.99,
    img: `${BASE_URL}/4.png`
  },
];
class HomeScreen extends React.Component {
    render() {
      return (
          {
            products.map((product, index) => {
              return(
              )
            })
          }
      );
    }
}
const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});
export default withNavigation(HomeScreen);

You need to change the src/components/Product.js file to display product data.

// src/components/Product.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { withNavigation } from 'react-navigation';
class Product extends React.Component {
    render() {
      return (
        <Card
            image={{uri: this.props.product.img}}>
            <Text style={{marginBottom: 10, marginTop: 20 }} h2>
                {this.props.product.name}
            </Text>
            <Text style={styles.price} h4>
                {this.props.product.price}
            </Text>
            <Text h6 style={styles.description}>
                added 1d ago
            </Text>
            <Button
            type="clear"
            title='Buy now'
            onPress={() => this.props.navigation.navigate('Details')} />
        </Card>
      );
    }
}
const styles = StyleSheet.create({
    name: {
        color: '#5a647d',
        fontWeight: 'bold',
        fontSize: 30
    },
    price: {
        fontWeight: 'bold',
        marginBottom: 10
    },
    description: {
        fontSize: 10,
        color: '#c1c4cd'
    }
});
export default withNavigation(Product);

Let’s keep the blog content short. The last two things remaining are:

1. Passing data here:

// src/components/Product.js
...
<Button
  type="clear"
  title='Buy now'
  onPress={() => this.props.navigation.navigate('Details')} />
...

Navigating with params using React Navigation is easy

// src/components/Product.js
...
<Button
  type="clear"
  title='Buy now'
  onPress={() => this.props.navigation.navigate('Details', {
    name: this.props.product.name,
    price: this.props.product.price,
    img: this.props.product.img
  })} />
...

2. And make the product detail page looks great

A few suggestions for you to try:

1. Add a cart system into our app

We shall show you how to add a shopping cart system to your React Native app.

1. The list of items chosen by the customer would be called via “Add to cart” button.

2. All the stateful components can be shown.

3. All the items are displayed in a ProductDisplay list.

4. The list is sent to the checkout.

5. The Display component allows the users to change the quantity, add or delete the items from the cart.

6. ProductDisplay callback

 

2. Setup authentication into React Native

It is important to setup authentication while building React Native apps. Secure the API to accept only authenticated requires is essential.

import React, {Component} from 'react';
import {
  Text,
  View,
  Button,TextInput,
  TouchableOpacity,
} from 'react-native';
var baseURL = "http://www.xyzwebsite.com/";
class Signin extends Component {
   constructor(props) {
    super(props);
    this.state = {
      email  : '',
      password: '',
    }
  }
  onClickListener(){
    let postData = {
      emailId: this.state.email,
      password: this.state.password,
    };
      this.axios
        .post(baseURL + "/SignIn", postData,{
            headers: {                      
              'Content-Type': 'application/json',
            }
          }) 
        .then(response => {
          console.log("#Api Response ", response);
          alert(response.message);
          resolve(response.data)
        })
        .catch(error => {
          reject(error)
        })
  }
  render() {
    return (
                 this.refs['password'].focus()}
                 onChangeText={(email) => this.setState({email})}/>
                 this.setState({password})}/>
               this.onClickListener()}>
                Login
    );
  }
}
module.exports=Signin;

3. Apply some aesthetics to the UI

Modern users expect good UI for the apps they use. React Native developers should pay special attention to the aesthetic appeal of the UI of the mobile apps to create a lasting impression on the users. You can strengthen your bond with the users with an exceptional and eye-catchy UI.

Summary – Finding the Right Partner

We have finished eCommerce mobile app with react native. You now have a fully eCommerce mobile app with React native.

If you want to save time, efforts, and money, then you should select React Native platform to build awesome ecommerce applications by hiring dedicated React Native developers. Choose to hire experienced React Native app Development Company to transform your vision into a reality.

Don’t forget to read tips to reduce mobile app development cost

Our main aim is to help you grow and scale up your business.

Are you still not sure about React Native? Drop us a line, and our react native experts will help you determine the best technology stack for your mobile app.