More
Image
React Native
By Patthipati Prudhvi Kumar On 30 May 2019
Categories: Mobile Application

What is React Native ?

·       React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android.

·       It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

·       Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX.

·       React Native currently supports both iOS and Android and has the potential to expand to future platforms as well.

Installation

·       To install react native cli npm install g react native cli

·       To create a react native project react native init projectName

·       To run on iOS, react native run iOS

·       To run on android, react native run android

·       Installation

React Vs React Native

·       React is UI library for the view of your web app using JavaScript and JSX while React native is an extra

·       library on the top of React, to make native app for iOS and Android devices.

·       Both are component based but when comes to React Native, it is with default components like

·       View, Text, TextInput , TouchableOpacity , ScrollView etc.

·       React.js is the heart of React Native, and it embodies all Reacts principles and syntax, so the

·       learning curve is easy.

Components

A component is something that produces some amount of text or content that we can display it

on our mobile devices. All Components are reusable. There are two types of components:

·       Functional Components

·       Class Components

Props and State

props and stat are two types of data that control a component

Most components can be customized when they are created, with different parameters. These creation parameters are called props. props are set by the parent and they are fixed throughout the lifetime of a component.

For data that is going to change, we have to use state. In general, you should initialize state in the constructor, and then call setState when you want to change it. By calling setState , the component will re render.

Component Life Cycle

In React Native the

Api contains 3major phases: mounting phase, updating phase and unmounting phase.

Mounting Phase

constructor(props): This method is used to initialize our component with initial state, no native UI element has been rendered yet.

 

componentWillMount(): This method is invoked only once before rendering the component for the first time. Used generally to fetch data from external api

 

render(): the render method must return a React Native component (JSX element ) to render (or null, to render nothing). in this step UI element is rendered

 

componentDidMount (): this method is also invoked once after the native UI for this component has finished rendering, this is a good place to do some work on data, updating the state will invoke the render() method again ( without noticing the previous state )

Updating Phase

If props is updated, the lifecycle will be like:

componentWillReceiveProps(nextProps): This method will be invoked if the parent of the component has passed new props, so we need to re render it

shouldComponentUpdate(nextProps): This method returns a boolean whether we need to re render the component or no, based on changes occurred on props.

componentWillUpdate(): This method is invoked when shouldComponentUpdate () returns true in order to do some extra processing.

render(): this method is invoked assuming shouldComponentUpdate returned true. so this method must return a React Native element.

componentDidUpdate(): this method is invoked after re rendering the component.

 

 

to be continued... 


Comments
Message :
Comments
Patthipati Prudhvi Kumar
.net
.net