Change font color with TouchableHighlight

user_14167134 0
Viewed 609

How to change the font color of the button, the problem is that the font color doesn't look good so each time the user tap on the button I need to change the font color too.

My approach:

Normal Button enter image description here

Pressed Button enter image description here

<TouchableHighlight
        underlayColor="#E5E6EA"
        onPress={onOpen2}
        style={{
          fontFamily: "AktivGroteskCorp",
          paddingLeft: 15,
          paddingRight: 15,
          borderRadius: 25.5,
          flexDirection: "row",
          justifyContent: "center",
          marginBottom: 15,
          width: vw * 67.2,
          height: vw * 13.6,
          alignItems: "center",
          alignSelf: "center",
          borderColor: "#E5E6EA",
          borderWidth: 1,
        }}
      >
        <Text
          style={{
            color: "#ffffff",
            fontWeight: "bold",
            fontSize: 16,
            textAlign: "center",
            alignSelf: "center",
          }}
        >
          LOG IN
        </Text>
      </TouchableHighlight>
react-native
2 Answers

Here is a functional way

First, create useState then manipulate it on onPressIn/onPressOut

const TouchableHighlightExample = () => {
  const [BtnColor, setBtnColor] = useState("red");
  return (
    <View>
      <TouchableHighlight onPressIn={()=>setBtnColor("blue")} onPressOut={()=>setBtnColor("red")}>
        <View>
          <Text style={{color: BtnColor}}>Touch Here</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}
user_67203240

using onPressIn and onPressOut

https://reactnative.dev/docs/pressable#onpressin

state = {
  fontColor: 'red',
}
<TouchableHighlight
    onPressIn={()=>{ this.setState({fontColor:'blue'});}}
    onPressOut={()=>{ this.setState({fontColor:'red'});}}
  >
    <Text
      style={{
        color: this.state.fontColor,
      }}
    >
      LOG IN
    </Text>
  </TouchableHighlight>
user_107539160
Related