Create an E-commerce App using React-Native

An E-commerce app using react native is an application designed to facilitate online buying and selling of goods and services. These apps aim to provide a digital platform for businesses to showcase their products or services and for consumers to browse, compare, and purchase items without the need to visit physical stores. In this article, you will learn how you can create an E-commerce App using React-Native.

Preview of final output: Let us have a look at how the final application will look like.

Preview of the app

Prerequisites:

• React Native
• React Native State
• React Native Props

Approach to create E-Commerce App:

• We created a FlatList in the app to showcase the available products with details like name, price, and an “Add to Cart” button.
• Implemented the ability to add products to the shopping cart using the “Add to Cart” button.
• Shopping Cart Displays the items added to the cart in a separate section using another FlatList. It also includes a “Remove” button for each item.
• We created a “Proceed to Checkout” button that triggers the handleCheckout function. If the cart is empty, It displays a message to add products. Otherwise, displays a modal with a success message.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init  Ecommerce App

Step 2: We will use some Icons in our app so, we will install dependency for icon.

npm i react-native-vector-icons
npm i react-native-fontawesome

Project Structure:

Structure of the project

The updated dependencies in package.json file will look like:

"dependencies": {
    "mobx": "4.1.0",
    "mobx-react": "5.0.0",
    "@expo/vector-icons": "^13.0.0",
    "react-native-elements": "0.18.5"
}

Example: Write the below source code into the App.js file.

Javascript

//App.js

import React, { useState } from "react";
import {
    View,
    Text,
    FlatList,
    TouchableOpacity,
    StyleSheet,
    Button,
    Modal,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

const ECommerceApp = () => {
    const [products, setProducts] = useState([
        { id: "1", name: "Samsung galaxy M11", price: 70.99 },
        { id: "2", name: "MacBook pro", price: 109.99 },
        { id: "3", name: "Study Table", price: 39.99 },
    ]);

    const [cart, setCart] = useState([]);
    const [isModalVisible, setModalVisible] = useState(false);

    const addToCart = (product) => {
        setCart([...cart, product]);
    };

    const removeFromCart = (productId) => {
        const updatedCart = cart.filter((item) => item.id !== productId);
        setCart(updatedCart);
    };

    const calculateTotal = () => {
        return cart.reduce((total, item) => total + item.price, 0).toFixed(2);
    };

    const renderProductItem = ({ item }) => (
        <View style={styles.productItemContainer}>
            <Text style={styles.productItemName}>{item.name}</Text>
            <Text style={styles.productItemPrice}>
                ${item.price.toFixed(2)}
            </Text>
            <TouchableOpacity
                style={styles.addButton}
                onPress={() => addToCart(item)}
            >
                <Text style={styles.addButtonText}>Add to Cart</Text>
                <Ionicons name="cart-outline" size={20} color="white" />
            </TouchableOpacity>
        </View>
    );

    const renderCartItem = ({ item }) => (
        <View style={styles.cartItemContainer}>
            <View>
                <Text style={styles.cartItemName}>{item.name}</Text>
                <Text style={styles.cartItemPrice}>
                    ${item.price.toFixed(2)}
                </Text>
            </View>
            <TouchableOpacity
                style={styles.removeButton}
                onPress={() => removeFromCart(item.id)}
            >
                <Ionicons name="trash-outline" size={20} color="white" />
            </TouchableOpacity>
        </View>
    );

    const toggleModal = () => {
        setModalVisible(!isModalVisible);
    };

    const handleCheckout = () => {
        if (cart.length === 0) {
            toggleModal();
        } else {
            toggleModal();
        }
    };

    return (
        <View style={styles.container}>
            <Text style={styles.heading}>E-Commerce App</Text>

            <FlatList
                data={products}
                keyExtractor={(item) => item.id}
                renderItem={renderProductItem}
            />

            <View style={styles.cartContainer}>
                <Text style={styles.cartHeading}>Shopping Cart</Text>
                {cart.length === 0 ? (
                    <Text style={styles.emptyCartMessage}>
                        Add at least one product to the cart.
                    </Text>
                ) : (
                    <FlatList
                        data={cart}
                        keyExtractor={(item) => item.id}
                        renderItem={renderCartItem}
                    />
                )}
                <View style={styles.totalContainer}>
                    <Text style={styles.totalText}>
                        Total: ${calculateTotal()}
                    </Text>
                    <TouchableOpacity
                        style={styles.checkoutButton}
                        onPress={handleCheckout}
                    >
                        <Text style={styles.checkoutButtonText}>
                            Proceed to Checkout
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>

            <Modal
                animationType="slide"
                transparent={true}
                visible={isModalVisible}
                onRequestClose={toggleModal}
            >
                <View style={styles.modalContainer}>
                    <View style={styles.modalContent}>
                        <Text style={styles.modalText}>
                            {cart.length === 0
? "Add at least one product to the cart before proceeding."
: "Congratulations! Your order is placed successfully."}
                        </Text>
                        <Button title="Close" onPress={toggleModal} />
                    </View>
                </View>
            </Modal>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: "#f5f5f5",
    },
    heading: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 20,
        textAlign: "center",
        color: "#333",
    },
    productItemContainer: {
        marginBottom: 10,
        borderRadius: 10,
        backgroundColor: "#fff",
        padding: 15,
        elevation: 3,
    },
    productItemName: {
        fontSize: 18,
        fontWeight: "bold",
        marginBottom: 5,
        color: "#333",
    },
    productItemPrice: {
        fontSize: 16,
        marginBottom: 10,
        color: "#666",
    },
    addButton: {
        backgroundColor: "#4caf50",
        padding: 10,
        borderRadius: 5,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    addButtonText: {
        color: "white",
        marginRight: 5,
    },
    cartContainer: {
        marginTop: 20,
    },
    cartHeading: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 10,
        textAlign: "center",
        color: "#333",
    },
    cartItemContainer: {
        borderRadius: 10,
        backgroundColor: "#fff",
        padding: 15,
        elevation: 3,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    cartItemName: {
        fontSize: 16,
        fontWeight: "bold",
        marginBottom: 5,
        color: "#333",
    },
    cartItemPrice: {
        fontSize: 14,
        color: "#666",
    },
    removeButton: {
        backgroundColor: "#e53935",
        padding: 10,
        borderRadius: 5,
        justifyContent: "center",
        alignItems: "center",
    },
    totalContainer: {
        marginTop: 10,
        alignItems: "flex-end",
    },
    totalText: {
        fontSize: 18,
        fontWeight: "bold",
        color: "#333",
    },

    cartItemContainer: {
        borderRadius: 10,
        backgroundColor: "#fff",
        padding: 15,
        elevation: 3,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 10,
    },
    checkoutButton: {
        backgroundColor: "#2196F3",
        padding: 15,
        borderRadius: 5,
        alignItems: "center",
        marginTop: 10,
    },
    checkoutButtonText: {
        color: "white",
        fontSize: 16,
        fontWeight: "bold",
    },

    checkoutButton: {
        backgroundColor: "#2196F3",
        padding: 15,
        borderRadius: 5,
        alignItems: "center",
        marginTop: 10,
    },
    checkoutButtonText: {
        color: "white",
        fontSize: 16,
        fontWeight: "bold",
    },
    modalContainer: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    modalContent: {
        backgroundColor: "#fff",
        padding: 20,
        borderRadius: 10,
        elevation: 5,
        alignItems: "center",
    },
    modalText: {
        fontSize: 18,
        marginBottom: 20,
        textAlign: "center",
    },

    emptyCartMessage: {
        fontSize: 16,
        textAlign: "center",
        marginVertical: 10,
    },
});

export default ECommerceApp;

Step to Run the Project:

Step 1: Depending on your operating system, type the following command

• For android:

React-native run-android

• For IOS:

React-native run-ios

Output:

output of the app