What is React Native ?
· React Native currently supports both iOS and Android and has the potential to expand to future platforms as well.
· 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
React Vs React Native
· 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.
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.
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 )
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...