Change a button color by using onPress on React Native

Question

I would like to have button change its color when pressed. I tryed checking out other similar topics but I couldn't find a solution. The code renders and the initial button color is red, but when I press it, nothing happens.

export default class someProgram extends Component {
  render() {

  var buttonColor = "red";

  function changeButtonColor(){
    if(this.buttonColor === "red"){
      this.buttonColor = "green";
    }
    else{
      this.buttonColor = "red";
    }
  }

  return (
    <View style={styles.container}>      
      <Button 
      title="Press me!"
      color={buttonColor}
      onPress={() => {changeButtonColor(buttonColor)}}  
      />
    </View>
  );
 }
}

nbkhope · Accepted Answer · 2017-02-10 17:53:12Z

3

You should keep track of the color in the component state. As a side, make sure to understand what the keyword this really means. Do a console.log(this) and see it for yourself.

Anyway, you can

(1) set the initial state in the constructor;

(2) access value from the state using this.state.someProp

then (3) adjust the state later using this.setState({ someProp: someValue }).

1) Initial State

constructor(props) {
  super(props);

  this.state = {
    buttonColor: 'red'; // default button color goes here
  };
}

2) Accessing the State & 3) Setting New State

onButtonPress = () => {
  this.setState({ buttonColor: 'someNewColor' }); 
}

render() {
  // ...
  return (
    {/* ... */}
    <Button
      color={this.state.buttonColor}
      onPress={onButtonPress}
    />
  )

Note some parts of the code were omitted to focus on the question at hand.

edited Feb 10, 2017 at 17:53

answered Feb 10, 2017 at 17:44

nbkhope

7,5144 gold badges44 silver badges59 bronze badges

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

1 Comment

user3348949 Over a year ago

Awesome. Worked perfectly. Thank you very much.

Collectives™ on Stack Overflow

Change a button color by using onPress on React Native

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