React Native

 1) FlatList Example in React Native FlatList:- We use FlatList to show a list of items from JSON or whatever See example data below import   React   from   'react' ; import  {  View ,  StyleSheet ,  Text ,  FlatList  }  from   'react-native' ; const   DATA  = [   {      key :   1 ,      item :   'Item1' ,   },   {      key :   2 ,      item :   'Item2' ,   },   {      key :   3 ,      item :   'Item3' ,   },   {      key :   4 ,      item :   'Item4' ,   },   {      key :   5 ,      item :   'Item5' ,   }, ] function   getColor () {    var   Co...

 See the below example to set different colors for every item in a FlatList. Example:- import   React   from   'react' ; import  {  View ,  StyleSheet  ,  Text ,  ScrollView }  from   'react-native' ; const   DATA =[    'Item1' ,    'Item2' ,    'Item3' ,    'Item4' ,    'Item5' ,    'Item6' ,    'Item7' ,    'Item8' ,    'Item9' ,    'Item10' ,    'Item11' ,    'Item12' ,    'Item13' ,    'Item14' ,    'Item15' , ] function   getColor () { var   ColorCode  =  'rgb('  + ( Math . floor ( Math . random () *  256 )) +  ','  + ( Math . floor ( Math . random () *  256 )) +  ','  + ( Math . floor ( Math . random () *  256 )) +  ')' ; return   ColorCode ; } export ...

 Scroll View Example in React Native ScrollView:- When we wrap up the scroll view component around the elements we can scroll all the elements in a vertical or horizontal manner. See the example below. import   React   from   'react' ; import  {  View ,  StyleSheet  ,  Text ,  ScrollView }  from   'react-native' ; //Sample data to display const   DATA =[    'Text1' ,    'Text2' ,    'Text3' ,    'Text4' ,    'Text5' ,    'Text6' ,    'Text7' ,    'Text8' ,    'Text9' ,    'Text10' ,    'Text11' ,    'Text12' ,    'Text13' ,    'Text14' ,    'Text15' , ] export   default   function  ScrollView Example () {    return  (      < View   style = { styles . conatainer } >      ...

1) How to use flex in react native   Flex or flexbox has many properties like flex-direction and justify-content and align-items etc Let's try with some random examples. Example1 import   React   from   'react' ; import  {  View ,  StyleSheet  }  from   'react-native' ; export   default   function   Example1 () {    return  (      < View   style = { styles . conatainer } >        < View   style = { styles . view1 } />        < View   style = { styles . view2 } />        < View   style = { styles . view3 } />        < View   style = { styles . view4 } />      </ View >   ); } const   styles  =  StyleSheet . create ({    conatainer :  {   ...

 1) How to use props in React Native Props:- Props means we can say properties that we receive in an object (prop) from another component or class. Props are usually used to pass data from one component to another component. App.js This is the main file to show in UI import   React , { Component }  from   'react' ;   import  {  Text ,  View ,  Button  }  from   'react-native' ;   import   Propsexample   from   './PropExample' ;   //here we are importing the component export   default   function   PropExample (){          return  (                < View   style = { {                flex : 1 ,           ...

 1) How to use State in React Native in Class Component State:- State is very common in react native, the state is mutable property which we can change the value at any time. import   React , { Component }  from   'react' ;   import  {  Text ,  View ,  Button  }  from   'react-native ;      export   default   class   StateExample   extends   Component  {        state  = {            myState : 0   //this is default state value     }        //here we are updating the state through below function      updateState  = ()  =>   this . setState ({ myState :   this . state . myState  +  1 })     ...