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.
Building a mobile app in React? Need a strong user interface to get you started? These UI kits, themes and templates will help get your project off on the...
Check out these 9 React Native apps, app templates and component libraries from Envato Market. They'll help you step up your development, whether you're a...
Are you building a project using React Native? Check out some of the best tools and templates out there to help make your project into a success!
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 download the template by going to the MStore Pro product page at CodeCanyon. Though its 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 get an idea 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.
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 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:
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.
There is also a cart review screen that makes it easy for users to view or modify the contents of their cart.
The template comes with a product detail screen for getting more information about a product.
Last but not least, the template comes with a complete, working login flow, including support for social login.
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
Watch 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:
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 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 (eg. the error message, 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.
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.
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 Fontawesome, but you should prefix the name with ios-.
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:
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 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:
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
}
}
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.
Building a mobile app in React? Need a strong user interface to get you started? These UI kits, themes and templates will help get your project off on the...
Check out these 9 React Native apps, app templates and component libraries from Envato Market. They'll help you step up your development, whether you're a...