React Native Change Button Upper Title Text Using State Dynamically

React Native gives us 2 types of button designing technique, First one is its own Button component, Second is Custom Button using TouchableOpacity. So in this tutorial we would going to Change custom TouchableOpacity Button Upper Title Text programmatically using State.

What we are doing in this tutorial :

We are creating 2 buttons in our tutorial, First is Rounded corners button using TouchableOpacity and second is simple button. Now we would set the TouchableOpacity Button Above Title Text using State created in constructor(). We would also create a function to update – change button title state value.

Contents in this project Change Button Upper Title Text Using State:

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

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

import React, { Component } from ‘react’;

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

2. Create constructor() in your class with a State named as ButtonText. This state is used as Button Title Text.

<br />
constructor(){</p>
<p>    super();</p>
<p>    this.state={</p>
<p>      // This is our Default Button Above Text.<br />
      ButtonText : ‘Default Button Title’</p>
<p>    }<br />
  }

constructor(){

super();

this.state={

// This is our Default Button Above Text.

ButtonText : ‘Default Button Title’

}

3. Create a function named as ChangeButtonTitle(). In this function we would dynamically change the ButtonText State value.

<br />
ChangeButtonTitle=()=><br />
{</p>
<p>this.setState({</p>
<p>  ButtonText : ‘New Button Title’</p>
<p>})<br />
}

ChangeButtonTitle=()=>

{

this.setState({

ButtonText : ‘New Button Title’

})

}

4. Create a Root View in render’s return block, Now create a Custom button using TouchableOpacity. Inside the TouchableOpacity component we would set a Text component, Now set ButtonText State in Text component. This would be our Main Button which Text we would change.

<br />
render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer} ></p>
<p>      <TouchableOpacity style={styles.ButtonStyle} activeOpacity = { .5 }></p>
<p>       <Text style={styles.TextStyle}> {this.state.ButtonText} </Text></p>
<p>      </TouchableOpacity></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<Text style={styles.TextStyle}> {this.state.ButtonText} </Text>

</TouchableOpacity>

</View>

);

}

4. Add a button and call the ChangeButtonTitle() function on button onPress event.

<br />
render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer} ></p>
<p>      <TouchableOpacity style={styles.ButtonStyle} activeOpacity = { .5 }></p>
<p>       <Text style={styles.TextStyle}> {this.state.ButtonText} </Text></p>
<p>      </TouchableOpacity></p>
<p>      <Button title=”Change Above Button Text” onPress={this.ChangeButtonTitle} /></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<Text style={styles.TextStyle}> {this.state.ButtonText} </Text>

</TouchableOpacity>

</View>

);

}

5. Create Style Classes:

<br />
const styles = StyleSheet.create(<br />
{<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    margin: 20<br />
  },</p>
<p>  ButtonStyle: {</p>
<p>       paddingTop:10,<br />
       paddingBottom:10,<br />
       backgroundColor:’#009688′,<br />
       borderRadius:5,<br />
       marginBottom: 20<br />
     },</p>
<p>     TextStyle:{<br />
         color:’#fff’,<br />
         textAlign:’center’,<br />
     }</p>
<p>});

const styles = StyleSheet.create(

{

MainContainer: {

flex: 1,

justifyContent: ‘center’,

margin: 20

ButtonStyle: {

paddingTop:10,

paddingBottom:10,

backgroundColor:‘#009688’,

borderRadius:5,

marginBottom: 20

TextStyle:{

color:‘#fff’,

textAlign:‘center’,

}

});

6. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Button, Text, TouchableOpacity } from ‘react-native’;</p>
<p>export default class MyProject extends Component {</p>
<p>ChangeButtonTitle=()=><br />
{</p>
<p>this.setState({</p>
<p>  ButtonText : ‘New Button Title’</p>
<p>})<br />
}</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer} ></p>
<p>      <TouchableOpacity style={styles.ButtonStyle} activeOpacity = { .5 }></p>
<p>       <Text style={styles.TextStyle}> {this.state.ButtonText} </Text></p>
<p>      </TouchableOpacity></p>
<p>      <Button title=”Change Above Button Text” onPress={this.ChangeButtonTitle} /></p>
<p>      </View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create(<br />
{<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    margin: 20<br />
  },</p>
<p>  ButtonStyle: {</p>
<p>       paddingTop:10,<br />
       paddingBottom:10,<br />
       backgroundColor:’#009688′,<br />
       borderRadius:5,<br />
       marginBottom: 20<br />
     },</p>
<p>     TextStyle:{<br />
         color:’#fff’,<br />
         textAlign:’center’,<br />
     }</p>
<p>});

import React, { Component } from ‘react’;

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

export default class MyProject extends Component {

ChangeButtonTitle=()=>

{

this.setState({

ButtonText : ‘New Button Title’

})

}

render() {

return (

<Text style={styles.TextStyle}> {this.state.ButtonText} </Text>

</TouchableOpacity>

</View>

);

}

const styles = StyleSheet.create(

{

MainContainer: {

flex: 1,

justifyContent: ‘center’,

margin: 20

ButtonStyle: {

paddingTop:10,

paddingBottom:10,

backgroundColor:‘#009688’,

borderRadius:5,

marginBottom: 20

TextStyle:{

color:‘#fff’,

textAlign:‘center’,

}

});

Screenshot in Android device :

Screenshot in iOS device :

React Native Change Button Upper Title Text Using State Dynamically

Contents in this project Change Button Upper Title Text Using State:

Also Read :

Recent Posts

Search Here