Introduction to React Native

So you want to be able to build mobile apps for both Android and iOS. What should you learn?  The individual native languages for each app i.e Java for Android and Swift/Objective-C for iOS?, Actually NO
Native Android and iOS development are quite different and can be expensive – first, the language itself is quite different and second, all the underlying API’s are different – the way of using the GPS is different, the way to create animations is different, the way you make network calls is different.

We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And There are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap etc. I’ll be focusing more on React Native. So,

What is React Native?
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Why React Native ? 

Whenever there is an update for apps written in Swift/Objective-C or Java, the whole app needs to be recompiled and a new version has to be distributed to the App Store again. All this can take a few weeks depending on the App Store review process.



To avoid this hassle, React Native apps work in a different way, a native app is able to locate specific JavaScript code, which is later downloaded and compiled when the app is launched on an actual device. By this, updating the app can be done instantly without needing to submit a new version to the App Store again and again.

How to Build a React Native App?

Building with React Native is extremely efficient and highly addictive but getting started can be a little tricky. React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

The first thing we’ll need to do is install React Native
The guide linked above provides instructions for Mac, Windows and Linux users, as well as instructions for preparing your Android and iOS environments.
For Mac users, you should be good to go after running the following three commands: For users on Windows or Linux, please follow the guide linked above.

First install Homebrew using the instructions on the Homebrew website, then run the following commands in a Terminal after installing Homebrew :

brew install node

Next, install watchman, a file watcher from Facebook :

brew install watchman

This is used by React Native to figure out when your code changes and rebuild accordingly. It’s like having Xcode do a build each time you save your file.

Next use npm to install the React Native Command Line Interface (CLI) tool :

npm install -g react-native-cli

This uses the Node Package Manager to fetch the CLI tool and install it globally.

Once you’ve completing the React Native installation, we can go ahead and create our project:



react-native init GeeksForGeeks

This creates a project containing everything you need to build and run a React Native application.

A few things to note here:
1) React Native uses npm for package management, hence the node_modules directory.

2) The android and ios directories contain your typical Android/iOS projects, which can be opened and run in Android Studio/Xcode, respectively.

3) The index.android.js and index.ios.js files contain the main entry-point of our React Native source code for Android and iOS.

Go ahead and run the application on your preferred device/simulator using the following command(s):
For iOS :

react-native run-ios 

For Android :

react-native run-android

You’ll notice a new terminal window opens up that’s running the React Native packager. You can just leave this terminal to run in the background, and it will handle the packaging and live-reloading of the application as you write your React Native code.

Now Assuming everything was setup correctly (If not just stackoverflow the error), you should see something like so:



For Android Users :

For iOS Users :

At first glance the source of a React app looks like a strange XML or HTML document that is composed of various components. Behind the hood, these are JavaScript classes that extend the React.Component and render themselves inside each other thanks to JSX syntax.

But we’ll be starting from scratch in order to better understand how the application works.So, Go head and clear the contents of the index.android.js and index.ios.js files.

It’s a really big pain that we have to duplicate the code in the index.android.js and index.ios.js files. But Luckily, we have the ability to import source code from other packages. So, Let’s create a new src/ directory, and a GeeksForGeeks.js file inside:

Alright, Now We’ll start off by importing some packages that we’ll need to get started.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
import {
    Text,
    AppRegistry
} from 'react-native';

chevron_right


Here we’re just doing is importing React and Component from the react package, and Text and AppRegistry from the react-native package.

Now, we can go ahead and define our GeeksForGeeks component. A component is essentially a view, that can contain subviews and sub-components.

filter_none

edit
close

play_arrow

link
brightness_4
code

class GeeksForGeeks extends Component {
  
    render() {
        return (
            <Text>GeeksForGeeks is Awesome!</Text>
        )
    }
  
}

chevron_right


GeeksForGeeks subclasses the Component class, and overrides the render function to render it’s UI. For now, we are rendering a simple GeeksForGeeks is Awesome! text label, but this render function will grow and become more complex soon enough.

Finally, before we can run the application again, we need to register GeeksForGeeks with the AppRegistry that we imported above because you generally only need to register your root Component.



AppRegistry.registerComponent('GeeksForGeeks', () => GeeksForGeeks);

Now in the index.android.js and index.ios.js files, we can simply need to import the GeeksForGeeks source code:

import GeeksForGeeks from './src/GeeksForGeeks';

Now use the inbuilt special developer tool. Shake the device and you see the option of Reload option. Click reload and see the magic.

You should be able to see the same GeeksForGeeks is Awesome! message printed on your device. Without compiling the whole project.
At this point we’ve got a clean React Native project setup, and we’re ready to start adding some real functionality into the app. Follow GeeksForGeeks for the next tutorial where we will be able to play with react native and build some cool apps like Calculator app etc.

How React Native works?

This article is contributed by Saket Kumar. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.