Thursday, January 14, 2021

Getting Started With the MStore Pro React Native App Template

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.

BeoNews React Native App Template

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 ready-made code 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 React Native 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 template to make a mobile app for your WooCommerce site. 

Getting the Template From the Marketplace

You can download the code by going to the MStore Pro template product page at CodeCanyon. Though it's not free, the MStore Pro template 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 template 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:

npm install

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:

pod install

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

adb devices

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:

react-native run-android

For iOS:

react-native run-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:

react-native start

Watcher Took Too Long to Load

 

If you get an error similar to the following:

Error building DependencyGraph:
 Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
    at [object Object]._onTimeout (index.js:103:16)
    at Timer.listOnTimeout (timers.js:89:15)

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:

sudo sysctl fs.inotify.max_user_instances=99999
sudo sysctl fs.inotify.max_user_watches=99999
sudo sysctl fs.inotify.max_queued_events=99999
watchman shutdown-server

Could Not Run ADB Reverse

 

If you're getting the following error:

error: closed Could not run adb reverse:
Command failed: /path/to/android-sdk-linux/sdk/platform-tools/adb -s
300494a80ea22200 reverse tcp:8081 tcp:8081

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

ReferenceError: Can't find variable: _fbBatchedBridge (line 1 in the generated bundle)

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

adb shell input keyevent 82

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:

YOUR_INTERNAL_IP:8081

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'll 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.

WordPress: {
    Address: 'http://mstore.io/api',
},
WooCommerce: {
    url: 'http://mstore.io',
    consumerKey: '',
    consumerSecret: '',
    wp_api: true,
    version: 'wc/v1',
    timeout: 10, //request timeout
    RootCategoryId: 0,
    Product: {
        Display: {
            ProductThumbnails: {width: 180, height: 216,},
            CatalogImages: {width: 300, height: 360,},
            SingleProductImage: {width: 600, height: 720,}
        }
    },
},

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.

Auth0: {
    clientId: '',
    domain: '',
},

Icons

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

Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons.
    Menu: 'ios-menu',
    Home: 'ios-home',
    Back: 'ios-arrow-back',
    Forward: 'ios-arrow-forward',
    Config: 'ios-settings',
    More: 'ios-more',
    SignIn: 'ios-log-in',
    SignOut: 'ios-log-out',
    ShoppingCart: 'ios-cart',
    ShoppingCartEmpty: 'ios-cart-outline',
    Sort: 'ios-funnel',
    Filter: 'ios-funnel-outline',
    ShowItem: 'ios-arrow-dropright',
    HideItem: 'ios-arrow-dropup',
    ListMode: 'ios-list-box',
    GridMode: 'ios-grid',
    RatingFull: 'ios-star',
    RatingEmpty: 'ios-star-outline',
    Wishlist: 'ios-heart',
    WishlistEmpty: 'ios-heart-outline',
    Delete: 'ios-trash',
    AddToCart: 'ios-cart',
    MyOrder: 'ios-cube',
    News: 'ios-paper',
    Mail: 'ios-mail',
    RatioOff: 'ios-radio-button-off',
    RatioOn: 'ios-radio-button-on',
    Search: 'ios-search',
    Close: 'ios-close',
    HappyFace:'ios-happy-outline',
    SadFace: 'ios-sad-outline',
},

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:

Color: {
    TopBar: 'white',
    TopBarIcon: '#283747',
}

Images

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

Image: {
    Logo: require('./images/logo.png'),
    SplashScreen: require('./images/splash_screen.png'),
    CategoryPlaceholder: require('./images/category_placehodler.png'),
    DefaultAvatar: require('./images/default_avatar.jpg'),
    AvatarBackground: require('./images/avatar_background.jpg'),
    CheckoutStep1: require('./images/line-1.png'),
    CheckoutStep2: require('./images/line-2.png'),
    CheckoutStep3: require('./images/line-3.png'),
    Stripe: require('./images/stripe.png'),
    PayPal: require('./images/PayPal.png'),
    CashOnDelivery: require('./images/cash_on_delivery.png'),
    PlaceHolder: require('./images/placeholderImage.png'),
},

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.

PayPal: {
    clientID: '',
    secretKey: '',
    sandBoxMode: true, //change to false on production
},

Customizing Individual Pages

To customize individual pages, you need to go to the app/containers directory. This is where you'll 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:

this.styles = {
    container: {flex: 1},
    imageCard: {
        width: Constants.Dimension.ScreenWidth(1),
        height: 200,
    },
    mainCategoryText: {
        color: 'white', //change the color of the category text
        fontSize: 40 //make the category text bigger
    },
    numberOfProductsText: {
        color: 'white',
        fontSize: 15
    }
}

Top React Native App Templates From CodeCanyon

Learning how to use the MStore React Native template is a great way to get an e-commerce app ready for the public. But do you still have an appetite for making apps? 

1. Antiqueruby React Native Material Design UI Components

Antiqueruby React Native App Template

Antiqueruby is one of the top React Native app templates found on CodeCanyon. It's filled with beautifully-designed UI components. You'll save hours of development time by designing with Antiqueruby. It features e-commerce and music ready screens among others. Documentation is also included, so you don't have to wonder how to use this React template.

2. BeoNews Pro—React Native Mobile App for WordPress

BeoNews Pro React Native Template

This React Native template is built for anyone with a WordPress website. BeoNews Pro converts your site into an easy-to-use app. Multimedia like videos, photos, and blogs  all get integrated nicely in the new format. With regular updates, you can make sure your React Native app looks its best with this template.

3. Oreo Fashion—Full React Native App for WooCommerce

Oreo Fashion Modern Full App Template

Are you looking to build a modern mobile experience for your shop? Then you'll want to check out Oreo Fashion. It's a way to port over your desktop website to a mobile app. Edit layouts with the included layout builder. Oreo Fashion even support multi-vendor stores built with Dokan and WCFM Marketplace.

4. Felix Travel—Mobile React Native Travel App Template

Felix Travel Mobile React Native App Template

Felix Travel is a great template for 2021 and beyond. It's perfect for setting up crucial booking services. There are over 100 sample screens and more than 40 reusable React Native components. Having these tools available let you build a unique look for your app. Felix Travel also comes with documentation and support so you know exactly how to use this React Native template. 

5. GrabCab React Native Full Taxi App

GrabCab React Native App Template Taxi Rideshare Service

Ridesharing is a popular way of getting around. If you're looking to offer your community another option, build your app with GrabCab. This React Native template is filled with every tool you need to start a taxi service. It includes features like:

  • iOS and Android ready
  • industry-standard registration page
  • support for multiple payment methods
  • Google Maps API compatible
  • easy-to-use admin panel

Learn More About Code From Envato Tuts+

Learning different programming languages and how to code apps are useful skills in the 21st century. If you want to pick up some knowledge or brush up on what you already know, check out Envato Tuts+. Our instructors have made courses and tutorials that let you learn all kinds of skills.

Conclusion

With your app up and running, you can now start to dig in further. We barely scratched the surface of the MStore Pro template, 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.

This post has been updated with contributions from Nathan Umoh. Nathan is a staff writer for Envato Tuts+.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)