React Native - State and Props - Mobile Application development
In this article, we will talk about State and Props
State
React components has a built-in state object. The state is mutable. This designates that the state can be updated in the future.
The state is generally initialized in the constructor and then call setState when we want to change it.
In this example, we engender a Text component with state data. The content of the Text component will be updated by clicking a button. The event onPress calls the setState, and it updates the state "knfState" text.
First, You must set up your local development environment. Follow the below link to set up your local environment.
After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.
In this example, we engender a Text component with state data. The content of the Text component will be updated by clicking a button. The event onPress calls the setState, and it updates the state "knfState" text.
Edit the App.js file and write the below code.
App.js
import React from 'react';import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
export default class App extends React.Component { state = { knfState: 'Greetings from knowledge factory!' } updateState = () => this.setState({ knfState: 'The state is updated' }) render() { return ( <View style={styles.container}> <Text> {this.state.knfState} </Text> <TouchableOpacity style={styles.buttonStyle} onPress={this.updateState}> <Text style={styles.buttonTextStyle}> Update State </Text> </TouchableOpacity> </View> ); }}
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: 10, }, buttonStyle: { backgroundColor: 'purple', borderWidth: 0, color: 'white', borderColor: '#51D8C7', alignItems: 'center', borderRadius: 5, marginTop: 15, padding: 10, }, buttonTextStyle: { color: '#FFFFFF', paddingVertical: 10, fontSize: 16, },});
Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$
react-native run-android
Output:
Props
The properties of React Native components are called props. In React Native, most of the components can be customized at the time of their engendering with different parameters. These parameters are kenned as props. They are immutable, and they cannot be transmuted.
In this example, we will make a component CustomTextWith which shows first name and last name in a single sentence. If we want the same thing to utilize everywhere will treat this as a component and though we want to utilize this component, again and again, need to make the first name and last name dynamic so that we can utilize it for the different first name and last name. This can be facilely done with Props.
Edit the App.js file and write the below code.
App.js
import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
const CustomTextWith = (props) => { return ( <Text> Your First Name is {props.firstname} and Last name is {props.lastname} </Text> );};
const App = () => { return ( <SafeAreaView style={{flex: 1}}> <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}> <CustomTextWith firstname="firstName1" lastname="lastName1" /> {/*We are setting the props dynamically from the main UI where we want to use it. We can dynamically set the value using props from master every time*/} <CustomTextWith firstname="firstName2" lastname="lastName2" /> </View> </SafeAreaView> );};
export default App;
Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$
react-native run-android
Output
