How to change button color when pressed in React Native using TouchableHighlight?

Question

I am currently developing an application, and I am having trouble figuring out how to get the button to change color after being pressed using TouchableHighlight. Not to be confused with the underlayColor prop which I know exists as part of TouchableHighlight which only changes the color for when the button is pressed and then returns to its regular color.

This is what I have so far (Some of the code has been omitted for simplicity):

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
} from 'react-native';


class MeetingScreen extends Component {
  constructor(props){
       super(props);
       this.state = {
        buttonColor: '#7395AE',
        }
this.onButtonPress=this.onButtonPress.bind(this);

  }

onButtonPress(){
  this.setState({ buttonColor: 'red' });
}

    render() {
  return (
    <View style={styles.container}>
      <TouchableHighlight
        style={styles.talk}
        color={this.state.buttonColor}
        onPress={() => this.state.buttonColor}
        selected={this.onButtonPress}
      >
        <View>
          <Text style={styles.welcome} >
            Talk
          </Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#7395AE',
  },
  welcome: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
  talk:{
    height: 200,
    width: 200,
    borderWidth: 5,
    backgroundColor: '#7395AE',
    borderRadius: 100,
    borderColor: '#557A95',
    justifyContent:'center',
    alignItems:'center',
    borderRadius: 100
  },
});

export default connect(mapStoreToProps, mapDispatchToProps)(MeetingScreen);

I have looked at other answers on StackOverflow and have attempted a good portion of them but I couldn't find anything that fit specifically to my issue. I have also looked at the React Native documentation and wasn't able to find anything helpful. The code as it is right now just displays the button and when pressed it goes black but then goes back to it's original color after being pressed. What I am looking for is for the button to turn red and stay red after being pressed. Any help would be greatly appreciated. Thank you so much for any help in advance!

daniele3004 · Accepted Answer · 2017-11-27 13:07:24Z

1

<TouchableHighlight
  style={[styles.talk, { backgroundColor: this.state.buttonColor}]} //Or if don't want "backgroundColor:" and just need change the text color use => "color:""
  onPress={() => this.state.buttonColor}
  selected={this.onButtonPress}/>

edited Nov 27, 2017 at 13:07

daniele3004

14.1k13 gold badges76 silver badges79 bronze badges

answered Nov 27, 2017 at 12:45

jose920405

8,0656 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

journey_in_comp_sci Over a year ago

You are a lifesaver. Thank you so much! It worked perfectly. I truly appreciate it!

Collectives™ on Stack Overflow

How to change button color when pressed in React Native using TouchableHighlight?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related