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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Button,Platform, Text} from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Button,Platform, Text} from ‘react-native’;

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.

<br />
constructor(){</p>
<p>      super();</p>
<p>      this.state = {</p>
<p>          TextHolder:’This is Old Sample Text’<br />
      }</p>
<p>  }

constructor(){

super();

this.state = {

TextHolder:‘This is Old Sample Text’

}

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.

<br />
ChangeTextFunction =()=> {</p>
<p>      this.setState({</p>
<p>        TextHolder: “This is New Text.”</p>
<p>      })<br />
  }

ChangeTextFunction =()=> {

this.setState({

TextHolder: “This is New Text.”

})

}

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.

<br />
render(){<br />
      return(<br />
      <View style={styles.MainContainer}></p>
<p>          <Text style={{marginBottom: 20, fontSize: 20}}> {this.state.TextHolder} </Text></p>
<p>          <Button title=”Change Text Component Text” onPress={this.ChangeTextFunction}/></p>
<p>      </View><br />
      );<br />
  }

render(){

return(

<Text style={{marginBottom: 20, fontSize: 20}}> {this.state.TextHolder} </Text>

</View>

);

}

5. Create Style.

<br />
const styles = StyleSheet.create(<br />
{</p>
<p>MainContainer:<br />
{<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   flex:1,<br />
   marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
}</p>
<p>});

const styles = StyleSheet.create(

{

MainContainer:

{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

marginTop: (Platform.OS) === ‘ios’ ? 20 : 0

}

});

6. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Button,Platform, Text} from ‘react-native’;</p>
<p>export default class App extends Component{</p>
<p>  constructor(){</p>
<p>      super();</p>
<p>      this.state = {</p>
<p>          TextHolder:’This is Old Sample Text’<br />
      }</p>
<p>  }</p>
<p>  ChangeTextFunction =()=> {</p>
<p>      this.setState({</p>
<p>        TextHolder: “This is New Text.”</p>
<p>      })<br />
  }</p>
<p>   render(){<br />
      return(<br />
      <View style={styles.MainContainer}></p>
<p>          <Text style={{marginBottom: 20, fontSize: 20}}> {this.state.TextHolder} </Text></p>
<p>          <Button title=”Change Text Component Text” onPress={this.ChangeTextFunction}/></p>
<p>      </View><br />
      );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create(<br />
{</p>
<p>MainContainer:<br />
{<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   flex:1,<br />
   marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
}</p>
<p>});