Creating eCommerce Apps With the MStore Pro React Native Template

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.

To follow along, you'll need:

To better understand why using React Native templates is a good idea, I suggest you also read the following article:

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:

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  property.

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 :

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

You can now use  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.

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.

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:

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.

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  object, update the  key to the URL of your WordPress instance. Then update the  and  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.

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 , , and  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:

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  property. Similarly, to change the color of the currently active tab's icon, change the  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 , , and , 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  array. Each item inside this array defines the contents of an intro page.

To modify the text an intro page displays, update its  and  properties. And to change the icon it displays, change the  property. The Icons.js file lists all the valid values for the property.

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

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.

Source: Tutsplus.com

Powered by NewsAPI.org

Keywords:

E-commerce • React (JavaScript library) • Web template system • React (JavaScript library) • Cross-platform • Mobile app • Android (operating system) • IOS • E-commerce • Mobile app • React (JavaScript library) • React (JavaScript library) • E-commerce • WooCommerce • AdMob • Facebook • Push technology • React (JavaScript library) • Envato • React (JavaScript library) • Envato • Software license • Zip (file format) • React (JavaScript library) • E-commerce • Download • Temporary folder • Archive file • Computer terminal • Command-line interface • React (JavaScript library) • Command-line interface • Directory (computing) • Copy (command) • Integrated development environment • React (JavaScript library) • Web template system • Web template system • Xcode • Project management • Android software development • React (JavaScript library) • Command-line interface • Command-line interface • Android (operating system) • Command-line interface • Android (operating system) • Integrated development environment • Splash screen • DOS • Computer hardware • WordPress • WooCommerce • WordPress • WordPress • Plug-in (computing) • Plug-in (computing) • Free and open-source software • GitHub • Repository (version control) • Repository (version control) • Clone (computing) • Repository (version control) • Zip (file format) • Command-line interface • WordPress • Server (computing) • Zip (file format) • Cut, copy, and paste • Plug-in (computing) • Directory (computing) • WordPress • Word processor • Plug-in (computing) • Directory (computing) • Plug-in (computing) • Login • WordPress • System administrator • Dashboard (macOS) • Plug-in (computing) • Installation (computer programs) • Plug-in (computing) • Event (computing) • Plug-in (computing) • JSON • Application programming interface • Apache Click • Model–view–controller • Web template system • Blog • Permalink • Permalink • Permalink • Command-line interface • Application programming interface key • WooCommerce • Representational state transfer • WooCommerce • Representational state transfer • Application programming interface key • Application programming interface key • String (computer science) • Web template system • Canadian Broadcasting Corporation • Directory (computing) • Representational state transfer • Directory (computing) • Application software • WordPress • Object (computer science) • Open standard • JSON • Computer file • Text editor • Object-oriented programming • Patch (computing) • Unique key • URL • WordPress • Object (computer science) • String (computer science) • Mobile app • Mobile phone • WooCommerce • User interface • Object (computer science) • Logo • Image • Canadian Broadcasting Corporation • Image • Screenshot • Mobile app • Logo • Color • Application software • User interface • Color • JavaScript • Color • Icon • Tab (GUI) • Tab (GUI) • Icon • Application software • Look and feel • Application software • Mobile app • User profile • Tab (GUI) • Command-line interface • DOS • Open-source software • JavaScript • Computer file • Icon • Software feature • React (JavaScript library) • Mobile app • Web template system • E-commerce • WordPress • WooCommerce • Communication • Software documentation •