Change color of TouchableOpacity in React Native

Question

Can anyone help me. This is my source code: https://snack.expo.io/rJFgyPDpH

Idea is that, if I click to "1 Button" it should be 'red' and if I click to "2 Button" is also should change its color to 'red' but the "1 Button" should be changed to its default colour which is black. However, "2 Button".

If my approach is too simple, other methods (such as TouchableHighlight, ES6 and etc) are also welcomed. I appreciate if you show me mistakes so that I learn from that.

Answer 1

Try below

state={
    selectedButton: '',
};

      <View style={styles.container}>
          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button1' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button1' })}
          >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button2' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button2' })}
          >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>

Answer 2

You can write your code like:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button,TouchableOpacity} from 'react-native';

export default class App extends Component {
  state={
    backgroundColor: 'black',
    backgroundColor2: 'black',
    pressed: false,
  };

  changeColor(){
    if(!this.state.pressed){
       this.setState({ pressed: true,backgroundColor: 'red', backgroundColor2: 'black'});
    } else {
      this.setState({ pressed: false, backgroundColor: 'black' ,backgroundColor2: 'red'});
    }
  }
  render() {
    return (
      <View style={styles.container}>
          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor2, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  text:{
    color:'white'
    },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Now If you click to the first button it should be 'red', but second, remains as 'black' background. Consequently, if you click to second button it should be 'red', whereas the first button should be 'black'.