React Native - State and Props - Mobile Application development

Congratulations! You are standing in the right place! 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



More...


Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example