Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Creating eCommerce Apps With the MStore Pro React Native Template

by
Difficulty:BeginnerLength:MediumLanguages:

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 Node.js
  • 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.

MStore Pro page 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:

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.

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.

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:

To manage MStore Pro's dependencies, you're going to need yarn. Use npm again to install it.

You can now use yarn to download and install all the dependencies.

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:

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:

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.

Splash and intro screens of MStore Pro

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:

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
List of new plugins waiting to be activated

Additionally, navigate to Settings > JSON API and click on the Activate link shown below the MStoreUser controller.

List of controllers

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.

Key generation form

Once the key's generated, you'll have access to two strings: a consumer key and a consumer secret.

Generated key strings

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.

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.

If you reload the app on your phone now, you should be able to see items from your own WooCommerce store.

WooCommerce store items

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.

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:

App with new 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 with dark theme

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.

With the above changes, the intro page will look like this:

Changed intro page

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.