How to make your first APP using React Native

5 min readMar 4, 2019

In this article I would like to introduce you to a different way of create Apps for Android

Why use React Native?

React Native isn’t more a brand new mobile development technology, but it still is a good choice to build cross-platform apps. Specially if your application should use some hardware’s source features (GPS, Bluetooth, …) or other native resources, but you don’t want bother yourself spending time and money building a single app for IOS and another one to Android. You would prefer to choose React Native instead of another hybrid apps builders like: Cordova and Phonegap

Why should I use React Native instead of others cross-platform and hybrid solutions?

Normally, talking about cross-platform and hybrid development you have a bunch of technologies to choose. The most famous of them are: Xamarin, React Native and Ionic. If you really want to have a visual and a performance similar from the native apps, you will discard the idea of use Ionic at first.

Ionic enables you to use a webview system to draw your app using a Angular project building a site that emulates an App. There is some troubles in there, because you are using a browser to make the OS work. So you will get a loss of performance and even if Ionic allows you to use components that simulates the native elements of the UI, difficultly it will pass through user’s eyes without feeling a certain strangeness.

In the other hand you have the Xamarin option that actually is pretty good, you keep the idea of create a cross-platform application without abdicate of the native resource and keep a UI close from the native Widgets. But, in my case, I would have a lot of steps to start a Xamarin project, because it isn’t a developer platform supported for Linux systems and you have to use an IDE to do your work. And it for me and others Linux users would be kind of extra work.

How does React Native work?

The big part of the magic is the Virtual DOM, in a React Web context the Virtual DOM is a representation of the react DOM, but in memory. So you instead of you make a lot of I/O to get an element in your DOM tree, you’ll access an in memory copy. And when it checks that has a difference between the Real DOM and the Virtual DOM, it simply makes a merge of them. In the web, the virtual DOM invokes the browser’s DOM, in React Native case, it will invoke the platform’s API to render the native elements on the screen (It can be an Objective-C API’s or Java API’s).

In your React Native project you can have 3 projects: IOS project, Android Project and your React source code, normally you do not have to deal with Android and IOS projects to do simple stuff. But if you want to use an Android specific lib for push notification or an IOS lib for deeplink, you have to do some of the work in those specific projects.

React Native projects work with a Javascript’s thread that runs your source code and makes the whole job. In a production release, this Javascript’s code runs internally on the user’s device. In developer mode you may want to use a Nodejs server that provides the same functionality, but you have features like live reload and hot reload for code changing.

How can I create my project?

The react community provides to you a lib that makes easy to create a React Native’s project. Install react-native-cli using the command below:

sudo npm install -g react-native-cli

After that you will be able to use react native CLI to create your first app

react-native init AwesomeApp

Before run your new project you have to remember that we are working with Android, so some setups must to be followed. First thing, you have to setup your ANDROID_HOME environment and after that, accept the Android SDK licenses, otherwise you’ll have some issues like this:

To fix those troubles, run the following commands and accept all licenses:

export ANDROID_HOME=$HOME/Android/Sdk/
$HOME/Android/Sdk/tools/bin/sdkmanager --licenses

Now we’re all set! Remember what we discuss before, React Native runs a Javascript thread inside of your device and there you have all Javascript code made for us. But for developer status it would be not productive to build a bundler and set it into our phone’s test each time that we want to see some modification.

So instead of that, we going to run a server in our computer and build the APK in debug mode. That way the app will get the Javascript code via a remote call to that server, each time that we change something in the Javascript code, we just have to restart the server, instead rebuild the APK.

To start the Metro Bundler Server on 8081 port:

npm start

To run the application on emulator / device:

react-native run-android

Adding some dynamic content

React implements reactive programming. It means that all your actions will generate reactions. We gonna create a code that makes a request for start wars API and insert its data into our react state, after that our application going to react to the state change and re-render the JSX based on the new state. Copy the following code to your App.js

Right now you’re able to see the starships’s collection