React Native helps developers reuse code across the web and on mobile. Engineers won’t have to build the same app for iOS and for Android from scratch.
React Native combines smoothly with components written in Objective-C, Java, or Swift. It’s simple to drop down to native code if you need to optimize a few aspects of your application. It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.
If you are new to React Native then I suggest you to get basic understanding of React.js. Most fundamentals of React native are similar to React.js like how to create Component, import and export Components in React js and much other process.
Let’s assume you have Node js installed on your system. Go to your project folder to initiate react app.
The React Native CLI
if you use react native CLI for your application, you’ll need to install react native command line interface.
To do that run following command.
npm install -g react-native-cli
React Native requires Jdk(Java SE Development Kit). You can download it from here.
Download android studio. Choose custom installation and make sure to select ‘Android SDK’, ‘Android SDK Platform’ and ‘Android Virtual Device’. Then click next to install all this components.
Install Android Sdk
Android studio installs the latest Android Sdk by default. We need Android 6.0(Marshmallow) or higher. We can install Sdk From from Sdk manager in Android Studio.
The SDK Manager can be accessed from the “Welcome to Android Studio” screen. Click on “Configure”, then select “SDK Manager”.
Select sdk and click on apply. Select the “SDK Platforms” tab from within the SDK Manager, then check “show package detail” in the bottom right corner. Then check on following items and install.
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, if you have installed sdk 6.0 then make sure that 23.0.1 is selected. If other versions of sdks are installed then you need to choose different version of build tools.
You need to configure environment variables to be set up in order to build apps with native code. For Linux
Add the following lines to your $HOME/.bash_profile config file:
For Windows go to : control panel > change settings > Advanced and click Environment variables.
Click on New and add Following :
Variable name : ANDROID_HOME
Variable value : C:\Users\your-user\AppData\Local\Android\sdk
Note: if you can’t find AppData folder then it might be hidden.
Create New Application
Now that you are all set up you can generate new reactive project using this command.
react-native init MyProject
After initialization go to your project folder.
Now we need virtual device to run our app. We can either use external device or we can create our own device in Android studio.
Let’s create virtual device in android studio.
Go to Avd Manager in Android studio. Select “Create virtual device” choose phone from list and then click “Next”. Select the “x86 Images” tab and then choose your sdk version like marshmallow 6.0(Google Api) or other versions. Click “Next” and then “Finish”. After creating your virtual device click on green triangle button to launch it.
Run Your React Native App
Now in command line we are in our project folder. Run following command.
$ react-native start
Open other command line and type following command.
$ react-native run-android
This will build your application and ‘install’ it in your virtual device. You can see welcome to react native in centre of the screen. For some reason if build was successful and app won’t run on your device, check your apps in menu. You can find your app named ‘MyProject’ and you can open it from there.
You can see the text ‘to get started, edit index.andriod.js’. So open index.andriod.js’ and change heading.
Change “Welcome to React Native!” to “Welcome to My Project” and save it. Then go to your virtual device and press R key two times to refresh screen. You can see our content changed on screen.
That’s it. Now you can develop your own app with your own design in react native. If you want to learn more you can go to Official React Native app website. You can also ask questions related to react native on stackoverflow. Stay connected to learn more about React Native.
For any further queries you can write to us at firstname.lastname@example.org.