Introduction :
In this tutorial, I will show you how to change the value of a text dynamically in react native. We will use one button, on click we will change the value of a Text. For this example, I am using hook to manage state.
Example program :
Create one basic react native example program and use the below code in your App.js file :
import React, {useState} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default function ExampleProgram() {
const [value, setValue] = useState(1);
const incrementValue = () => setValue(value + 1);
return (
<View style={styles.container}>
<Text style={styles.text}>{value}</Text>
<TouchableOpacity style={styles.touchable} onPress={incrementValue}>
<Text style={styles.touchableText}>Click here</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 12,
},
touchable: {
alignItems: 'center',
backgroundColor: '#7986cb',
padding: 10,
marginTop: 30,
borderRadius: 10,
},
touchableText: {
color: 'white',
fontSize: 20,
},
text: {
color: 'black',
fontSize: 40,
},
});Explanation :
-
The current value of the variable value is we are showing to the user.
-
The start value of the variable value is 1. We are using setValue to assign it.
-
incrementValue increments the value of the variable value by 1. We are showing it in a Text component.
-
We are using TouchableOpacity as like a button. On click, it calls incrementValue to increment value.
Output :
If you run this program, it will give the below output :
