Smart Tech Tips to Build Your Business App on React Native v.0.59
Invite pending
This tutorial focuses on building native mobile apps using React Native (v.0.59) which is an open-source mobile application framework based on the core concepts of ReactJS and JavaScript. After the release of the React Native 0.59 version in March 2019, it is expected that it can solve a vast number of problems in the React Native app development environment.
React Native v.0.59 is updated with React Hooks that will allow developers to reuse the logic of app components without restructuring the main components.
It is also expected that React Native new version will make it possible to divide the app components into small functions as per the relatability between them.
The CLI tools (command line tools) have also been updated and shifted to a new repository and to the specific group of maintainers.
The new JSC (JavaScript) has also come up with the major performance improvements such as 64-bit support and the new JavaScript frameworks such as AppCompatActivity, etc.
React Native v.0.59 has also introduced the feature such as “Inline Requires” that will help developers to avoid errors during the process of app launch. This new feature work on the tool like Bundler tool Metro that identifies components which are facilitating lazy loading and fix those application components so that they could be loaded seamlessly. To use this feature use value “inlineRequires’ as “true” in the “metro.config.js” configuration. Commands will run instantly. You’ll definitely notice a change:
Building Cross-Platform Mobile Apps Using React Native v. 0.59
In this post, we will help you understand how to build a React Native application. This mobile application will be cross-platform meaning it will run both on Android and iOS devices.
The easiest way to get started with React Native is with Expo tools because these tools allow you to code without installing and configuring Android Studio. Expo CLI help you set up a seamless and error-free development environment on your local machine and you can be writing codes for your React Native app in an easy way. For example, to instant development of your React Native app, you can use Snack to try and test React Native in your web browser.
How to Use expo-cli?
The expo-cli tool helps download and install the React Native boilerplate and can be also integrated with expo API. It provides an easy way to build React Native app, and it’s the most recommended tool if you’ve just started with React Native. Here are the guidelines to use and install expo-cli.
First of all, make sure you use Node v6 for installation.
Follow commands:
The npm start command starts the Expo CLI server. You can now run the project on your phone by using the Expo app.
Android
iOS
With Expo CLI you can work with all of the Components and APIs in React Native, and also with the components of JavaScript APIs that comes with the Expo app.
The benefit of using expo-cli are many. For example, it gives you options to run and test your application on a mobile device without any need of configuration. You just need to scan a QR code to open up your app with expo mobile app.
Using react-native-cli
React-native-cli works in the same manner as expo-cli, but it follows a different approach with some extra advantages. For example, the apps installed using React-native-cli gives you the option to create our own native modules for your application. You don’t need to force your application to write your own native modules.
Developing React Native apps for Android need some specific configuration and you need to use the Android SDK.
How to Build React Native App for Android?
First, you need to download and configure Android Studio and Android SDK both in your system. Check the link here
Once you are done with Android Studio installing process, you also need to download APIs as well. To download APIs you need to follow these steps:
Step 1
Click on “Settings” in the Android Studio.
Step 2
Now, select the platform you want your React Native to support in the Android SDK platform.
Step 3
Now, switch to SDK tools
Step 4
Check for Android SDK Build-Tools, Android SDK tools, and google play service. Under Android SDK Build-Tools select all the platforms:
That’s all for setting up SDK and Android Studio.
Move onto the next step of setting up the Emulator or the Simulator that is a tool to run and test your Android app. You can select different types of simulators as there are many different choices.
The best is to use the Android Studio emulators. Here’s how you can create an emulator on Android Studio. Or, you can prefer to use Genymotion that is a type of virtual emulator to test your Android application. It’s also a great option to use for developers because it comes with the options of creating a customized phone with the features that you can only find in a real device.
Nothing is better than using a real device to test your Android app as it lets you know how your application looks like in reality on a real device. So, if you’ve any requirement, don’t hesitate using Genymotion.
How to Run Your React Native Application?
Now that I have connected all of the components, go to the terminal, install the Expo client app on your Android phone, and run the command expo-cli start to the same wireless network saved in your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project.
Conclusion
That’s an absolute guide for building mobile apps with React Native 0.59. Hope you have learned some useful principles to apply to your next Android mobile app development. If you have any questions or comments on this React Native tutorial & tips, feel free to comment in the comment section below.
React Native v.0.59 is updated with React Hooks that will allow developers to reuse the logic of app components without restructuring the main components.
It is also expected that React Native new version will make it possible to divide the app components into small functions as per the relatability between them.
The CLI tools (command line tools) have also been updated and shifted to a new repository and to the specific group of maintainers.
The new JSC (JavaScript) has also come up with the major performance improvements such as 64-bit support and the new JavaScript frameworks such as AppCompatActivity, etc.
React Native v.0.59 has also introduced the feature such as “Inline Requires” that will help developers to avoid errors during the process of app launch. This new feature work on the tool like Bundler tool Metro that identifies components which are facilitating lazy loading and fix those application components so that they could be loaded seamlessly. To use this feature use value “inlineRequires’ as “true” in the “metro.config.js” configuration. Commands will run instantly. You’ll definitely notice a change:
Building Cross-Platform Mobile Apps Using React Native v. 0.59
In this post, we will help you understand how to build a React Native application. This mobile application will be cross-platform meaning it will run both on Android and iOS devices.
The easiest way to get started with React Native is with Expo tools because these tools allow you to code without installing and configuring Android Studio. Expo CLI help you set up a seamless and error-free development environment on your local machine and you can be writing codes for your React Native app in an easy way. For example, to instant development of your React Native app, you can use Snack to try and test React Native in your web browser.
How to Use expo-cli?
The expo-cli tool helps download and install the React Native boilerplate and can be also integrated with expo API. It provides an easy way to build React Native app, and it’s the most recommended tool if you’ve just started with React Native. Here are the guidelines to use and install expo-cli.
First of all, make sure you use Node v6 for installation.
Follow commands:
$ npm install -g expo-cli$ expo init my-app$ cd my-app/$ npm startThe npm start command starts the Expo CLI server. You can now run the project on your phone by using the Expo app.
Android
- Simply install the Expo app on your Android mobile.
- Now, scan the QR code from the Expo app to run the process on your phone.
- You can also press the sign 's' in the terminal and get the sign in your Expo account.
- Sign in again with the same account in your Expo app.
- All your projects will appear in the «Projects» tab.
iOS
- Simply install the Expo app on any of your iOS phone or device.
- Now you have to press 'e' in the terminal to send the app link to your email or on your registered phone
number. The link you send can be used to execute your project from the Expo app. - Press 's' in the provided terminal and sign in with your Expo account.
- Sign in with the same account in your Expo app.
- You will see all your projects in the «Projects» tab.
With Expo CLI you can work with all of the Components and APIs in React Native, and also with the components of JavaScript APIs that comes with the Expo app.
The benefit of using expo-cli are many. For example, it gives you options to run and test your application on a mobile device without any need of configuration. You just need to scan a QR code to open up your app with expo mobile app.
Using react-native-cli
React-native-cli works in the same manner as expo-cli, but it follows a different approach with some extra advantages. For example, the apps installed using React-native-cli gives you the option to create our own native modules for your application. You don’t need to force your application to write your own native modules.
Developing React Native apps for Android need some specific configuration and you need to use the Android SDK.
How to Build React Native App for Android?
First, you need to download and configure Android Studio and Android SDK both in your system. Check the link here
Once you are done with Android Studio installing process, you also need to download APIs as well. To download APIs you need to follow these steps:
Step 1
Click on “Settings” in the Android Studio.
Step 2
Now, select the platform you want your React Native to support in the Android SDK platform.
Step 3
Now, switch to SDK tools
Step 4
Check for Android SDK Build-Tools, Android SDK tools, and google play service. Under Android SDK Build-Tools select all the platforms:
Starting from 19.0.0 to 20.0.0
From 22.0.0 to 24.0.0
And 25.0.2 , 26.0.1 to 26.0.3
27.0.3 and 28.0.1 to 28.02That’s all for setting up SDK and Android Studio.
Move onto the next step of setting up the Emulator or the Simulator that is a tool to run and test your Android app. You can select different types of simulators as there are many different choices.
The best is to use the Android Studio emulators. Here’s how you can create an emulator on Android Studio. Or, you can prefer to use Genymotion that is a type of virtual emulator to test your Android application. It’s also a great option to use for developers because it comes with the options of creating a customized phone with the features that you can only find in a real device.
Nothing is better than using a real device to test your Android app as it lets you know how your application looks like in reality on a real device. So, if you’ve any requirement, don’t hesitate using Genymotion.
How to Run Your React Native Application?
Now that I have connected all of the components, go to the terminal, install the Expo client app on your Android phone, and run the command expo-cli start to the same wireless network saved in your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project.
Conclusion
That’s an absolute guide for building mobile apps with React Native 0.59. Hope you have learned some useful principles to apply to your next Android mobile app development. If you have any questions or comments on this React Native tutorial & tips, feel free to comment in the comment section below.