React Native is the next generation react for data driven web services. React provides a component driven architecture which uses a declarative syntax and is easily extensible. Native app simply means writing apps for particular operating system.

React Native helps developers reuse code throughout the web and on mobile for react native app development.

Engineers will not have to construct the identical app for iOS and for Android from scratch – reusing the code across each and every platform makes life easier.

What’s satisfactory about React Native is that there are very little differences between a finished app – developed in objective-C or Java and one developed utilising React Native.

Origin

React native is a framework created by Facebook and Instagram. It is a javascript code library which was released on Github in 2013.

Currently, React native V0.53.0 is the latest version which was released in January 2018.

ECMAScript 6

 

To install React Native follow the instructions on their website. If you are writing an iOS app then you will need a Mac so you can run Xcode, after all we are creating a native app.
Once React Native is installed and you have created a sample project you will notice two separate index JS files for each platform: index.ios.js and index.android.js.

Let’s take a look at the index.ios.js file:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

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

 

The first thing you will notice is some unknown JavaScript syntax if you have not already seen this. This is ECMAScript 6 or ES6 which is the new version of JavaScript. It has a lot of new JavaScript language features like class syntax, destructuring, properties, etc. (Check out this link for a full list of features: http://es6-features.org/)

Let’s take a look at the second import statement.

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

 

We can declare short form of variables as ES6 provides the property called destructuring.
The above statement could have been written individually as:

var ReactNative = require('react-native');
var AppRegistry = ReactNative.AppRegistry;
var StyleSheet = ReactNative.StyleSheet;
var Text = ReactNative.Text;
var View = ReactNative.View;

As you can see the ES6 feature of destructuring saves a lot of typing and lines of code.
export default class MyProject extends Component {

Yet another ES6 feature which allows you to create objects from class definitions. Here our class MyProject is inheriting from the React frameworks class Component. A component lets you split your user interface into independent units which can be easily reused.

Next the render function returns React elements describing what should be displayed on screen. Finally, you must have noticed some syntax that looks like HTML markup.

For example:

<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>

 

This syntax is called JSX, which is an extension to JavaScript. React uses it to describe what the user interface should look like.

Components

 

react-native-letsnurture

In react native app development, the architecture of React is based on component. Every UI element is a component and it can be styled and backed by a data source.
Going back to our previous example:

<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>

Here virtual DOM representation is taken by React Native and renders native components. The View renders a UIView for iOS and native View in Android. And it looks at Text and renders a UILabel for iOS and TextView for Android.
Hence the reason that it is called a virtual DOM because it is a generic representation of what your UI will look like independent of the two platforms. React Native then renders the native control based on your UI markup.

Each component has a style attribute as well, which can be defined completely in a separate file or either within the same file. The stylesheet provides CSS style syntax and uses Flexbox for layout. Flexbox provides an efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. Using Flexbox for layouts provides a major benefit because layout engines on mobile platforms are a pain to work with, especially for complex layouts.

State

There is no reason to write any article on React or React Native without considering state. A component has types of data binding: state and props. Think of props as properties of a component which are defined when creating a component. For example, the text for a label or image URL for an image component. These remain fixed throughout the life of a component.

On the other hand, state is dynamic and can decide what content needs to be displayed within a component.

Conclusion

The app made by React Native is not the “mobile web app”, “HTML5 app” or a “Hybrid app” but it is a native mobile app that is indistinguishable from app made by objective-C or JAVA. React native is not much different from React. If you have learned enough then it is obvious that you can build an app in React native.

We at Let’s Nurture have hands on building Android and iOS apps using React Native. If you wish to have the one for your website then get a free quote for the same.

Happy Coding! 😉

Want to work with us? We're hiring!