Using React Native is one of the fastest ways to develop a cross-platform mobile app today. Apps you create with it look good on both Android and iOS, and usually deliver near-native performance. Creating a successful eCommerce app with it, however, would still require substantial amounts of skill and effort, especially if you're starting from scratch.
Fortunately, React Native supports custom templates. A well-designed custom template can boost your productivity and dramatically reduce your time to market. CodeCanyon has plenty of premium React Native templates aimed at eCommerce app developers. Among them, MStore Pro stands out as one of the most mature, reusable, and comprehensive.
Right out of the box, MStore Pro supports WooCommerce integration, AdMob and Facebook ads, push notifications, and multiple payment gateways. Additionally, it comes with a large collection of modular components and over 30 beautiful layouts.
In this tutorial, I'll show you how to install MStore Pro and make the most of its primary features.
Prerequisites
To follow along, you'll need:
- the latest version of NodeJS
- the latest version of Android Studio
- a device or emulator running Android 5.0 or higher
- a WordPress instance with the WooCommerce plugin installed
- an Envato account
To better understand why using React Native templates is a good idea, I suggest you also read the following article:
1. Download the Template
MStore Pro, developed by Envato elite author InspireUI, is one of the most popular React Native templates currently available on CodeCanyon.
To download it, log in to your Envato account and purchase a regular license for it. Once you do so, you'll have access to a ZIP file named codecanyon-17010642-beostore-complete-react-native-template-for-ecommerce.zip.
Download the file to your computer and extract it to a temporary directory using an archive manager. If you prefer using a terminal, you can run the following commands:
cd /tmp unzip ~/Downloads/codecanyon-17010642-beostore-\ complete-react-native-template-for-ecommerce.zip
MStore Pro can be used with both Expo and React Native CLI. For now, we'll be using it with the latter. So we need only the mstore-3.8.0/mstore-pro directory. Copy it to your development environment and enter it.
cp -r mstore-3.8.0/mstore-pro ~/dev cd ~/dev/mstore-pro
Like most React Native templates, this template too has both an Android project and an Xcode project inside it. In this tutorial, we'll be working only with the Android project.
The Android project needs to know the location of your Android SDK. So open the android/local.properties file and update the value of the sdk.dir property.
sdk.dir=/home/me/Android/Sdk
2. Install Dependencies
You'll, of course, need React Native CLI to build the project you prepared in the previous step. If you don't have it already, here's how you can install it using npm:
npm install -g react-native-cli
To manage MStore Pro's dependencies, you're going to need yarn. Use npm again to install it.
npm install -g yarn
You can now use yarn to download and install all the dependencies.
yarn install
The above command may take a while, depending on how fast your Internet connection is. Once it's complete, do remember to link all the native dependencies by running the following command:
react-native link
At this point, MStore Pro is ready to be used.
3. Build and Run
To install MStore Pro on your Android device, all you need to do is run this command:
react-native run-android
If your Android development environment has no configuration issues, after a successful build, you should be able to see MStore Pro's splash screen and intro screens on your device.
4. Configure WordPress
MStore Pro is meant to be used with WordPress and WooCommerce. To allow it to communicate with your WordPress instance, you'll have to install a few WordPress plugins. All the necessary plugins are free and open source, and are available on the MStore GitHub repository, which is maintained by InspireUI.
Visit the repository, select Clone or download, and press the Download ZIP button to download the entire repository as a ZIP file. Alternatively, you can run the following command from your WordPress server:
wget 'https://github.com/inspireui/mstore/archive/master.zip'
Extract the ZIP file and copy all the contents of the plugins directory to your WordPress instance's wp-content/plugins directory.
You must now activate all the newly installed plugins. To do so, log in to your WordPress admin dashboard and navigate to Plugins > Installed Plugins. Then click on the Activate links shown below the following plugins:
- JSON API - InspireUI
- JSON API Auth
- MStore CheckOut Plugin and API
- Regenerate Thumbnails
- Better REST API Featured Images
Additionally, navigate to Settings > JSON API and click on the Activate link shown below the MStoreUser controller.
In addition to your store's products, the template can display blog posts too, so long as they have pretty permalinks. So if you're using plain permalinks, make sure you go to Settings > Permalinks and select the Post name option.
MStore Pro supports user registrations. If you want to use this feature, go to Settings > General and enable the Anyone can register option.
Lastly, you must generate an API key for WooCommerce's REST API. To do so go to WooCommerce > Settings > REST API and press the Create an API key button. In the form that pops up, add a simple description to the key and press the Generate API key button.
Once the key's generated, you'll have access to two strings: a consumer key and a consumer secret.
5. Configure the App
Almost all the important configuration files of the template are present in the src/common/ directory. For the rest of this tutorial, we'll be modifying files in this directory.
cd src/common
To point your MStore Pro app to your WordPress instance, open the AppConfig.json file using any text editor. There, inside the WooCommerce object, update the url key to the URL of your WordPress instance. Then update the consumerKey and consumerSecret to the strings you generated in the previous step.
"WooCommerce": {
"url": "https://example.com/wordpress/",
"consumerKey": "ck_28ed657b985de90f4ec9229f32d4ce73411251121100",
"consumerSecret": "cs_89bd6677fe547e587115b21e95a4172777ffa22910"
}If you reload the app on your phone now, you should be able to see items from your own WooCommerce store.
6. Customize the App
MStore Pro is highly customizable. Every aspect of its user interface can be modified by making minor changes in its configuration files.
For instance, to replace MStore Pro's logo with your own business's logo, you'll have to make changes in the Config.js file. More specifically, you'll have to change the values of the LogoImage, LogoWithText, and LogoLoading properties.
LogoImage: require("@images/my-logo-main.png"),
LogoWithText: require("@images/my-logo-with-text.png"),
LogoLoading: require("@images/my-logo-main.png"),Before making the above changes, make sure that the new images are present in the src/images directory.
Here's a screenshot of the app with a custom logo:
To change the colors of the app's UI components, you must modify the Color.js file. For example, if you want to change the color of the icons shown in the tab bar, change the tabbarColor property. Similarly, to change the color of the currently active tab's icon, change the tabbarTint property.
If you want to change the overall theme of the app, however, you must modify the Theme.js file. It has intuitively named properties, such as primary, accent, and background, which you can change to quickly make major changes to the look and feel of your app.
Note that MStore Pro has a dark theme built into it. To activate it, inside the app, navigate to the User profile tab and turn on the Dark Theme switch.
MStore Pro also allows you to easily change the textual content of your screens. For instance, you may have noticed that the intro screens still mention "MStore" instead of the name of your business. To fix this, open the Config.js file and look for the intro array. Each item inside this array defines the contents of an intro page.
To modify the text an intro page displays, update its title and text properties. And to change the icon it displays, change the icon property. The Icons.js file lists all the valid values for the icon property.
{
key: "page1",
title: "Welcome to My Fashion Store",
text: "Trendy Outfits for Millennials",
icon: "ios-cart",
colors: ["#0FF0B3", "#036ED9"],
}With the above changes, the intro page will look like this:
Conclusion
You now know how to use MStore Pro, a feature-rich React Native app template, to quickly create an eCommerce app for your online business. In this tutorial, you also learned how to configure your WordPress instance—and WooCommerce—to communicate with MStore Pro.
MStore Pro is a very well-maintained template. It sees frequent updates, with new and interesting features added regularly. To learn about its latest features, do refer to its online documentation.