MStore Multi Vendor - Complete React Native template for WooCommerce

1. Setup MStore Multi Vendor Shop

Extract the download package and go top project mstore-multi-vendor folder, and edit the src/common/AppConfig.json to update the website URL:

  "WooCommerce": {
    "url": "http://rehub.mstore.io",
    "consumerKey": "ck_b4eedc76dd236a78d15001321ec4c20e1e5a4196",
    "consumerSecret": "cs_39e123766f289c5508a007c8c55ffc9388766ea7"
  },

URL: is the URL of your your store
consumerKey: consumerKey of your store, you can find it in Woocommerce->Setting->Advanced
consumerKey: consumerSecret of your store, you can find it in Woocommerce->Setting->Advanced

2. Update the Homepage Layout

Open src/common/AppConfig.json and edit the categoryId or TagId of your site

"HorizonLayout": [
    { "tag": 62, "layout": 10 },
    {
      "layout": 14,
      "tag": 32
    },
    {
      "name": "Feature Products",
      "featured": true,
      "image": "",
      "layout": 6
    },
    {
      "name": "On Sale Products",
      "onSale": true,
      "image": "",
      "layout": 2
    },
    {
      "name": "Electronics",
      "category": 35,
      "image": "",
      "layout": 8
    },
    {
      "name": "Digital",
      "category": 34,
      "image": "",
      "layout": 1
    }
  ],

The layout should be the number that according to these values:

Layout: {
    card: 1,
    twoColumn: 2,
    simple: 3,
    list: 4,
    advance: 5,
    threeColumn: 6,
    horizon: 7,
    twoColumnHigh: 8,
    miniBanner: 9,
    Banner: 10,
    BannerPromo: 11,
    circle: 12,
    BannerHigh: 13,
    BannerSale: 14,
  },

3. Change the logo and Icons, splash screen

Open src/common/config.js to map your news image Logo and icon file.

LogoImage: require('@images/new_logo.png'),
LogoWithText: require('@images/logo_with_text.png'),
LogoLoading: require('@images/logo.png'),

If you need to change other image files please locate to src/common/Images.js

4. Change the App Color

Open /src/Common/Color.js file in project.

You could change most of components color in Color section.

For example, you could change the color of Tabbar to any color you like, then reload the app to see the effect.

const Constants = {
...
//Product tabs
TabActive: '#00BCD4',
TabDeActive: 'white',
TabActiveText: '#333',
TabText: '#333',
BuyNowButton: '#00BCD4',
...
};

The mainColor is moved to src/common/AppConfig.json file which can be change via App Builder

5. Add payment Gateway

As the app is already integrated with multi payment gateway, once you config it run success on the website, it can be run smoothly from the app, add new payment key value and the image URL to enable it:

Payments: {
    cod: require("@images/payment_logo/cash_on_delivery.png"),
    paypal: require("@images/payment_logo/PayPal.png"),
    stripe: require("@images/payment_logo/stripe.png"),
},

6. Running on Expo app Client

Beside running the demo right on the Simulator, it's possible to run it right on your mobile phone but it should have the same wifi network (or using USB cable)
Dowload the Expo Client app: download for Android from the Play Store or for iOS from the App Store
Running by openning the Expo Client, select the Project tab menu, then you can see the list of RECENTLY IN DEVELOPMENT where content the URL point to your local URL (make sure you are login the same account on Expo Cli)

7. Add new language to app

Example, You need a new language French

Go to to src/common folder, find to the file Languages.js,

const langs = {
en: {
  abc: 'English'
},
fr: {
  abc: 'French'
}
// same for other language
}

Add a new language to choose, go to src/containers/Setting/LangSwitch.js, find this section

& add a new row

<Picker.Item label={"🇷🇺 French"} value={"fr"} />

Done

8. How to change currency on app

Go to common folder (src/common/Config.js), find with a key "DefaultCountry"

DefaultCountry: {
code: "us",
RTL: false,
language: "English",
countryCode: "us",
hideCountryList: false, // when this option is try we will hide the country list from the checkout page, default select by the above 'countryCode'
}

and you can change here.

9. How to change Intro App - The app Guide Screen

Go to src/Components/AppIntro
This component can be changed here or you can remove the intro ap by going src/Router.js and find this section
```
if (!this.props.introStatus) {
return <AppIntro />;
}
```

10. Config multi payment gateway

The powerful of Mstore app is support the multi payment features, to add the new payment gateway, open the common/Config.js file and add new payment option

  Payments: {
    cod: require("@images/payment_logo/cash_on_delivery.png"),
    paypal: require("@images/payment_logo/PayPal.png"),
    stripe: require("@images/payment_logo/stripe.png"),
    ... your new payment gatway here ...
  },

First create your new Facebook Developer app, refer to this [document guide](https://docs.expo.io/versions/latest/sdk/facebook/#__next_ from Expo document
Open the common/config.js to change the appFacebookId to your own appFacebookId

12. Change the onboarding screen

Open common/config.js file and change the intro section to your own content.

intro: [
    {
      key: "page1",
      title: "Welcome to MStore",
      text: "Get the hottest fashion by trend and season right on your pocket.",
      icon: "ios-basket-outline",
      colors: ["#0FF0B3", "#036ED9"],
    },
    {
      key: "page2",
      title: "Secure Payment",
      text: "All your payment infomation is top safety and protected",
      icon: "ios-card-outline",
      colors: ["#13f1fc", "#0470dc"],
    },
    {
      key: "page3",
      title: "High Performance",
      text: "Saving your value time and buy product with ease",
      icon: "ios-finger-print-outline",
      colors: ["#b1ea4d", "#459522"],
    },
  ],

Open common/config.js file and update the menu section

menu: {
    // has child categories
    isMultiChild: true,
    // Unlogged
    listMenuUnlogged: [
      {
        text: "Login",
        routeName: "LoginScreen",
        params: {
          isLogout: false,
        },
        icon: Icons.MaterialCommunityIcons.SignIn,
      },
    ],
    // user logged in
    listMenuLogged: [
      {
        text: "Logout",
        routeName: "LoginScreen",
        params: {
          isLogout: true,
        },
        icon: Icons.MaterialCommunityIcons.SignOut,
      },
    ],
    // Default List
    listMenu: [
      {
        text: "Shop",
        routeName: "Default",
        icon: Icons.MaterialCommunityIcons.Home,
      },
      {
        text: "News",
        routeName: "NewsScreen",
        icon: Icons.MaterialCommunityIcons.News,
      },
      {
        text: "contactus",
        routeName: "CustomPage",
        params: {
          id: 2,
          title: "Contact Us",
        },
        icon: Icons.MaterialCommunityIcons.Pin,
      },
      {
        text: "aboutus",
        routeName: "CustomPage",
        params: {
          id: 2,
          title: "About Us",
        },
        icon: Icons.MaterialCommunityIcons.Email,
      },
      {
        text: "Settings",
        routeName: "SettingScreen",
        icon: Icons.MaterialCommunityIcons.Setting,
      },
    ],
  },

Open common/config.js file and update the menu section

ProfileSettings: [
    {
      label: "Cart",
      routeName: "Cart",
    },
    {
      label: "MyOrder",
      routeName: "MyOrders",
    },
    {
      label: "chatList",
      routeName: "ChatList",
    },
    {
      label: "WishList",
      routeName: "WishListScreen",
    },
    {
      label: "MyProducts",
      routeName: "MyProducts",
    },

    {
      label: "Currency",
      isActionSheet: true,
    },
    {
      label: "PushNotification",
    },
    {
      label: "contactus",
      routeName: "CustomPage",
      params: {
        id: 10941,
        title: "contactus",
      },
    },
    {
      label: "Privacy",
      routeName: "CustomPage",
      params: {
        url: "https://inspireui.com/privacy",
      },
    },
    {
      label: "termCondition",
      routeName: "CustomPage",
      params: {
        url: "https://inspireui.com/term-of-service",
      },
    },
    {
      label: "About",
      routeName: "CustomPage",
      params: {
        url: "https://inspireui.com",
      },
    },
  ],

14. Change the default Country Code, symbol

Open common/config.js file and update the menu section

DefaultCurrency: {
    symbol: "$",
    name: "USD ",
    code: "us",
    name_plural: "USD dollars",
    decimal: ".",
    thousand: ",",
    precision: 2,
    format: "%s%v", // %s is the symbol and %v is the value
  },
  DefaultCountry: {
    code: "us",
    RTL: false,
    language: "English",
    countryCode: "us",
    hideCountryList: false, // when this option is try we will hide the country list from the checkout page, default select by the above 'countryCode'
},

MStore Multi Vendor - Complete React Native template for WooCommerce

Customization

1. Setup MStore Multi Vendor Shop

2. Update the Homepage Layout

3. Change the logo and Icons, splash screen

4. Change the App Color

5. Add payment Gateway

6. Running on Expo app Client

7. Add new language to app

8. How to change currency on app

9. How to change Intro App - The app Guide Screen

10. Config multi payment gateway

12. Change the onboarding screen

13. Update the left menu side content

13. Update the Profile menu side content

14. Change the default Country Code, symbol

General

Customization

MStore Multi Vendor - Complete React Native template for WooCommerce

Customization

1. Setup MStore Multi Vendor Shop

2. Update the Homepage Layout

3. Change the logo and Icons, splash screen

4. Change the App Color

5. Add payment Gateway

6. Running on Expo app Client

7. Add new language to app

8. How to change currency on app

9. How to change Intro App - The app Guide Screen

10. Config multi payment gateway

11. Config Facebook Login

12. Change the onboarding screen

13. Update the left menu side content

13. Update the Profile menu side content

14. Change the default Country Code, symbol

General

Customization