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:
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.jsimport 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