React Native: onPress: How can I toggle the button text and function call?

button react-native toggle onpress
Steve picture Steve · Mar 6, 2018 · Viewed 8.7k times · Source

I have a button that looks like this...

<View style={styles.addToFavoritesStyle}>
  <Button onPress={this.addToFavorites}>ADD TO FAVORITES</Button>
</View>

addToFavorites() {
  ...run some code
}

After the user presses the button, how can I change the button text to "REMOVE FROM FAVORITES", change the button styles, and call a different function?

Answer

ajthyng picture ajthyng · Mar 6, 2018

You'll want to take advantage of state. In your component add a constructor:

constructor(props) {
  super(props);
  this.state = {
    inFavorites: false
  }
}

Make your Button look like this:

<Button onPress={this.addToFavorites}>
  {this.state.inFavorites ? "REMOVE FROM " : "ADD TO " + "FAVORITES"}
</Button>

In your addToFavorites() function add a call to set the state of your component:

this.setState({ inFavorites: true});

This is not an all inclusive example, but it will set the state of your component. You'll have to set the state again when they remove the item from favorites.

Related questions

Set opacity's volume onPress of TouchableOpacity manually in React-Native

I am trying to figure out how to change the volume of the opacity of TouchableOpacity component of React-Native, meaning that I do not like the default value of the opacity when the press is performed, and I would like …

Read More
How can i scroll top on onPress of button in react-native?

I have added the button in bottom of simple screen and I want to scroll top whenever I press the button. what code to add to button onPress?, Please suggest any solution, Thanks in advance.

Read More
Create "Raised" or Shadow effect on TouchableOpacity: React Native

I use react-native-elements, and they make it easy to make an actual button appear "raised", or shadowed. I want to duplicate this look for TouchableOpacity. Here's an example of the "raised buttons" with react-native-elements. It is subtle, but noticeably makes …

Read More