State in React Native

 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})  
    render() {  
        return (  
            <View style={{
              flex:1,
              justifyContent:'center',
              alignItems:'center',
            }}>  
                <Text style={{
                  fontSize:50,
                  marginVertical:20
                }}> {this.state.myState} </Text>  
                <Button 
                title="Click Here to Update State"
                onPress={this.updateState} // here we calling function to update state
                />
            </View>  
        );  
    }  
}  

OUTPUT

Before Updating the State


After Updating the State



Comments

Post a Comment

Popular posts from this blog

How to set different color for every item in FlatList in React Native

Image
 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 ...
Read more

ScrollView in React Native

 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 } >      ...
Read more

Button in React-Native

Image
1) Button Example in React Native import   React   from   'react' ; import  {  StyleSheet ,  Button ,  View ,  SafeAreaView ,  Text ,  Alert  }  from   'react-native' ; function   ButtonExample () {      return (    < SafeAreaView   style = { styles . container } >      < View >        < Text   style = { styles . title } >         The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.        </ Text >        < Button          title = "Press me"       ...
Read more