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.
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
For the Android Emulator, press " a" as mentioned in the image below.
For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
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.
Let's dive into the code in detail.
- :
Import required libraries at the top of the file.
- :
Create a new StyleSheet file named "Styles.js" to style components like container, heading, productItem, etc.
- :
This title explains what the app does. We use the text "E-Commerce App" to show that the app is an E-Commerce App.
- :
The Below code includes,
Product list: List of maps of products which have keys named id, name, and price.
The renderProductItem function: It renders the UI of every product.
FlatList: It will enable the scrolling list functionality for a list of products.
- :
This function is called when the user taps on any product, and it ensures to update the list of cart products by updating the cart state variable using the setCart function.
- :
This section is used to display the list of cart products, which include,
cart state: This is the source of cart products.
The renderCartItem function: it renders the UI of every cart item.
FlatList wrapped by View, which displays the list of cart products.
- :
This section is used to checkout the cart products, which include
isModalVisible state: It ensures the visibility of the Modal component at the end.
The calculateTotal function: It calculates and returns the total amount.
toggleModal & handleCheckout: These functions are used to call the setModalVisible function, which updates the state of the isModalVisible state variable.
TouchableOpacity wrapped by View: This shows a Button with text "Proceed to Checkout", and user taps on it will call the handleCheckout function.
Modal Component: This component is only visible when the value of isModalVisible is true, and it will show a pop-up with text "Congratulations! Your order is placed successfully." if the user has cart items, else the text will be "Add at least one product to the cart before proceeding".
Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.
