Mash – Ecommerce React Native App

Introduction

Mash is a popular open-source ecommerce React Native app that allows you to create a fully functional online store using React Native. With Mash, you can build a mobile-first ecommerce application with a rich set of features, including product catalog, shopping cart, checkout, and order management. In this tutorial, we will guide you through the process of setting up and using the Mash ecommerce React Native app.

Prerequisites

Before you start, make sure you have the following:

• Node.js installed on your machine
• Yarn or npm installed on your machine
• A code editor or IDE of your choice
• A mobile device or emulator to test the app
• A basic understanding of React Native and JavaScript

Step 1: Setting up the Mash App

To start using Mash, you need to clone the repository and install the required dependencies. Follow these steps:

1. Clone the Mash repository using the following command:

   git clone https://github.com/mash-ecommerce/mash.git

2. Navigate to the cloned directory:

   cd mash

3. Install the required dependencies using yarn or npm:

   yarn install

   or

   npm install

4. Link the native modules using the following command:

   npx react-native link

   Step 2: Configuring the App

Before you can start using the app, you need to configure it. Follow these steps:

1. Create a new file called config.json in the root directory of the project and add the following code:

   {
   "API_URL": "https://your-api-url.com",
   "API_KEY": "your-api-key",
   "STORE_NAME": "Your Store Name",
   "STORE_DESCRIPTION": "Your Store Description",
   "CONTACT_EMAIL": "your-contact-email",
   "CONTACT_PHONE": "your-contact-phone"
   }

   Replace the placeholders with your own values.

2. Create a new file called routes.json in the src directory and add the following code:

   [
   {
   "path": "/",
   "component": "HomeScreen"
   },
   {
   "path": "/products",
   "component": "ProductListScreen"
   },
   {
   "path": "/product/:id",
   "component": "ProductDetailScreen"
   },
   {
   "path": "/cart",
   "component": "CartScreen"
   },
   {
   "path": "/checkout",
   "component": "CheckoutScreen"
   },
   {
   "path": "/orders",
   "component": "OrderListScreen"
   }
   ]

   This configuration defines the routes for the app.

Step 3: Running the App

Now that you have set up and configured the app, you can run it on your mobile device or emulator. Follow these steps:

1. Start the packager using the following command:

   yarn start

   or

   npm start

2. Open the app on your mobile device or emulator using the following command:

   npx react-native run-ios

   or

   npx react-native run-android

3. You should now see the Mash app running on your mobile device or emulator.

Step 4: Using the App

Now that you have the app running, you can start using it. Follow these steps:

1. Navigate to the product list screen by tapping on the "Products" button.
2. Tap on a product to view its details.
3. Tap the "Add to Cart" button to add the product to your cart.
4. Tap the "Cart" button to view your cart and update the quantities of the products.
5. Tap the "Checkout" button to proceed to the checkout screen.
6. Enter your shipping and payment information to complete the checkout process.
7. View your orders by tapping on the "Orders" button.

Conclusion

In this tutorial, we have set up and configured the Mash ecommerce React Native app. We have also run the app on our mobile device or emulator and used it to browse products, add them to our cart, and checkout. With Mash, you can create a fully functional online store with a rich set of features.