React Native Introduction

React Native is the most popular framework for developing cross-platform mobile applications. Its a JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android. The framework lets you create an application for various platforms by using the same codebase.

What makes React Native different from other frameworks such as PhoneGap that use JavaScript to create iOS apps?

1. (Unlike PhoneGap) with React Native your code may be written in JavaScript but the app’s UI is fully native. It doesn’t have the drawbacks typically associated with a hybrid HTML5 app.
2. Additionally (unlike Titanium), React introduces a novel, radical and highly functional approach to constructing user interfaces. Your UI is simply a function of the current app state.

Core components of the React Native:

1. View :

In React, View is a built-in component. If you familiar with div in HTML, view is like div, it is used in mobile apps. The view is a content area where you display your content.Using this you can arrange the content in a very good manner.

 Usage of view 

• When you need to wrap your content inside the container
• When you need to use different style for different element 
• When you need a nested element
• It supports for Synthetic touch events, which is used for different purpose.

2. State :

There are two types of data which controls a component. They are state and props. The state is mutable. It means a state can change the value at any time. The variable data are stored in state. Initialize the state in a constructor and change the value by calling the function ‘setState’ when you want.

3. props :

The second data type is props. It is immutable. It can be used to pass the data to the different component. It makes a connection between Container Component and Presentation Component.

Container Component is where we handle all the states and functionalities, and Presentation Component is where View present it is a passive area.

Initialization of the state and update of the state are handled in container component. The result will be passed to the presentation component to display the view by using the props

4. Style :

The most important thing in web or mobile app is styling. It makes our application attractive. We don’t need any special language or syntax for styling. You can style your application by using the javascript object. All components accept the props style.We can pass the style by changing the CSS properties with camel case like ‘backgroundcolor- backgroundColor’. You can also use inline style but it’s not a good practice

5. Flex layout :

Flex Layout is provided to give a clean layout to the component. Children of a component layout are specified using the Flexbox. Using the flexDirection, alignItems, and justifyContent properties we can archive the right layout

6. Handling text input :

We use the basic component TextInput to get text input from the user. It has props onChangeText, onSubmitEditing. onChangeText function is called whenever the text is changed.

7. Networking :

Most of the apps need to fetch data from remote URL. You maybe want to make POST a request or simply fetch the data from another server. React provides fetch function to make an HTTP request to another server.