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

Getting Started With the MStore Pro React Native App Template

by
Difficulty:BeginnerLength:LongLanguages:

Building a React Native app from scratch can be difficult. Setting up the initial project can be complex and annoying, especially for those who work primarily on web applications.

How do you deal with the command-line interface? What is exporting your project? These questions pop up, and for your first few apps, they'll seem like a mystery.

Not only that, but the transition to building native apps can be a shock. Responsive designs behave differently on smaller screens, and things like status bars have to be planned for.

This is where templates come in handy. Allowing you to skip over the initial setup and creating a framework to work within, they can become one of the best tools in a React Native developer's kit.

A number of templates are available at CodeCanyon, along with many more tools for developers. You can also find different kinds of templates geared to specific niches, helping to cover ground on functionality only common in certain industries.

In this tutorial, we'll take a look at how to use the MStore Pro template. This eCommerce app template for React Native helps you get an online store going quickly, and has a number of features you're going to love. Let's get started! 

You can also read how to use MStore Pro to make a mobile app for your WooCommerce site

Getting the Template From the Marketplace

You can download the template by going to the MStore Pro product page at CodeCanyon. Though it's a paid template, MStore Pro will help to reduce your development workload significantly. It'll take care of the most common functions and screens, and you just need to alter the design and hook it into your existing store (if you have one).

To give you an idea of what it offers out of the box, here are some of its top features:

  • Full integration with WooCommerce: if you're running a WooCommerce website, the app can display the same products which you have on your existing website.
  • Support for both iOS and Android: the app runs and looks good on both Android and iOS platforms.
  • Social logins: customers can log in using their Facebook or Google account.
  • Easy customization: everything is broken down into components. This ensures that you can easily customize the template based on your brand.
  • Push notifications: this automatically alerts your customers when there's an update to the status of their order. You can also send out push notifications for product promotions. Push notifications are implemented with Firebase.  
  • Multi-language support: out of the box you get English as the main language. Vietnamese exists as a second option, but you can also add your own language.
  • Secure payment integration: payments are done with PayPal.

If you don't have an Envato account yet, you can sign up here. Once that's done, log in to your newly created account. Then you can go back to the MStore Pro page and click on the Buy Now button. 

Setting Up the Project

Once you've purchased the template, you'll get a download link to the template's archive file. Extract that and you'll get a CodeCanyon folder which contains MStore 2.2.

MStore 2.2 is the directory for the template project. Go ahead and open a new terminal window inside that directory and execute the following command:

This will install all the project dependencies. This may take a while depending on your download speed, because it has to download a lot of dependencies. Take a look at package.json if you want to see the packages it needs to download.

Once that's done, there's an additional step if you want to build for iOS devices. Go to the iOS folder and execute the following:

Next, for Android, connect your mobile device to your computer and execute:

This will list all the Android devices connected to your computer. If this is the first time you're connecting the device, you should get a prompt asking you if you want to allow the computer for USB debugging. Just tap on yes once you get that prompt.

Now you can run the app on your Android device:

For iOS:

If you didn't encounter any errors, you should be greeted with the following page:

MStore Template Home page

To give you an idea of the different pages available in the template, here are a few more screenshots.

The template comes with a complete, customizable multi-step checkout form.

Multi-step checkout form

There is also a cart review screen that makes it easy for users to view or modify the contents of their cart.

Cart review screen

The template comes with a product detail screen for getting more information about a product.

Product detail screen

Last but not least, the template comes with a complete, working login flow, including support for social login.

Social login screen

Troubleshooting Project Setup

In this section, I've compiled a list of common project setup errors and their solutions. 

Development Server Didn't Start

If the development server didn't automatically start when you executed react-native run-android or react-native run-ios, you can manually run it by executing:

Watcher Took Too Long to Load

If you get an error similar to the following:

This is because an existing Watchman instance is running. This is a component of the React Native development server. You can solve this error and shut down Watchman by executing the following commands:

Could Not Run ADB Reverse

If you're getting the following error:

It means that your Android device is running on a version that's lower than 5.0 (Lollipop). This isn't actually an error. It simply means that your Android device doesn't support adb reverse, which is used to connect the development server to your device via USB debugging. If this isn't available, React Native falls back to debugging using WiFi. You can find more information about it here: Running on Device.

Something else might be causing your build to fail. You can scroll up the terminal to see if there are any errors that happened before that.

Can't Find Variable _fbBatchedBridge

If you're getting the following error and the development server is running in WiFi mode, this means that you haven't set up the IP of your computer in your Android device. (This usually only comes up with Android devices below version 5.0.)

You can execute the following to show the React Native developer options on your device:

Select Dev Settings from the menu that shows up. Under the Debugging section, tap on Debug server host & port for device. Enter the internal IP assigned by your home router along with the port in which the development server is running and press OK:

Go back to the home screen of the app and execute adb shell input keyevent 82 again. This time, select Reload to reload the app.

Could Not Find Firebase, App Compat, or GMS Play Services

If you're getting "could not find" errors, this means you haven't installed the corresponding packages using the Android SDK Manager.

Here are the packages that need to be installed:

  • Android Support Repository
  • Android Support Library
  • Google Play Services
  • Google Repository

Make sure to also update existing packages if there are any available updates.

Other Problems

If your problem doesn't involve any of the above, you can try the following:

  • Check out the documentation on troubleshooting.
  • Check out the template product comments. You can search for the error you're getting. Try to generalize and shorten the error message, though—don't just search for the entire error message. If you can't find the error, you can try asking your own question in the comments thread. The support team usually replies promptly.
  • Try searching for the error on Google. Even if the results you find don't involve the use of the template, they will give you an idea on how to solve the problem.
  • Search on StackOverflow or ask a new question. Make sure to include all the necessary details (e.g. the error message and any steps that you've taken). There's a good article about how to ask questions on StackOverflow.

Customizing the Template

A good place to start learning how to do things in the template is its documentation:

  • API and Project Structure: shows where to find the different files in the template and what they're used for.
  • WooCommerce Settings: shows how you can hook up your existing WooCommerce website to the app. Hooking up the app to your WooCommerce means that it will be able to fetch all the product categories and products in your WooCommerce store. 
  • Customize the App Branding: shows how to customize the theme for your own brand.

Be sure to check those out! I'm not going to repeat what was mentioned in the documentation. Instead, what we're going to do in this section is to actually customize the template so it looks the way we want.

Most of the project configuration settings are stored inside the app/Constants.js file. Here are a few examples of things which you can change from this file:

WooCommerce Integration

The URL of the WooCommerce store being used by the app. By default, this uses mstore.io.

Social Login Options

This is implemented using Auth0, an authentication platform. By default, the template only supports Google and Facebook sign-ins. But you should be able to add any service which Auth0 supports.

Icons

You can use any icon from Font Awesome, but you should prefix the name with ios-.

Theme

Colors for the different components that make up each page can also be updated. For example, if you want to change the header background color, you can update the value for TopBar:

Images

The splash screen and other images can also be updated by specifying a new path to each of the following:

These images are stored in the app/images directory; you can simply replace them if you don't want to keep the old images.

PayPal Options

You can also change the PayPal options from this file. Be sure to create your own PayPal Developer Account to obtain the clientID and secretKey. Don't forget to update sandBoxMode to false when you deploy your app to production, because by default it uses sandbox mode so that no actual money will be spent on transactions.

Customizing Individual Pages

To customize individual pages, you need to go to the app/containers directory. This is where you will find the files for each page. For example, if you want to customize the home page, navigate to the home folder and open the index.js file. Once opened, you'll see that the page uses the <ImageCard> component to render each product category. So if you want to add a general styling for the <ImageCard> component, you have to update the app/Components/ImageCard/index.js file. Otherwise, you can simply update the styles within the page itself:

Conclusion

With your app up and running, you can now start to dig in further. We barely scratched the surface of MStore Pro, but with the documentation in hand, you should have no problem finding out what to work on next.

For those with WooCommerce sites, hooking it into your online store should be next on the docket. Otherwise, try changing around some of the components or altering the design to fit your own brand better.

Download the template now, or If you want to learn more about it, you can check out the documentation. You can also find many more React Native app templates on CodeCanyon.

You can also read how to use MStore Pro to make a mobile app for your WooCommerce site


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.