We use the “React Native State” in this tutorial.
React native have two types of data that control components. Below are the types
- props
- state
props are static data that just pass to component it is immutable data that just use by component.
State is mutable data type. It’s value can change at any time thought component. you should initialize state in the constructor, and for change it’s value user setState .
For example, initially we display text “Hello” , this will change as “Hello John” on button click
React Native State Example
App.js
import React from ‘react’;
import {
StyleSheet,
SafeAreaView
} from ‘react-native’;
import SignInScreen from ‘./src/screens/SignInScreen/SignInScreen’;
import AppNavigator from ‘./src/navigation/AppNavigator’;
import configureStore from ‘./src/store/store’;
import { Provider } from ‘react-redux’;
class App extends Component {
constructor(){
super();
this.state= {
data:”Hello”
}
}
pressFunction(){
this.setState({data:”Hello John”})
}
render(){
return(
<SafeAreaView>
<View>
<Text style={{fontSize:60}}>{this.state.data}</Text>
<Button title=’Update State’ onPress={()=>{this.pressFunction()}}></Button>
</View>
</SafeAreaView>
)
}
}
export default App
Output:
