React Native Set Change Text Component Value Dynamically on Button Click

This tutorial is one of the most basic tutorial in react native. In this tutorial we would going to create a react native app with Text and Button component. Now we would Change Text Component Value Dynamically using State with SetState method on button onPress in Android iOS Example Tutorial.

Contents in this project Change Text Component Value Dynamically on Button Click :

1. Import StyleSheet, View, Button, Platform and Text component in your project.

2. Create constructor() and inside the constructor() create a State named as TextHolder and set its default values as ‘This is Old Sample Text’ . This would be our Text component default value.

3. Create a function named as ChangeTextFunction() . Inside this function we would change the State value and we would call this function on button onPress.

4. Create a Root View in render’s return block and inside the Root View create a Text and Button component. Now we would set Text value using State TextHolder and call the ChangeTextFunction() function on button onPress event.

5. Create Style.

6. Complete source code for App.js File :

Screenshot in Android device :

Change Text Component Value DynamicallyScreenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *