Change font color with TouchableHighlight

Question

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

Pressed Button

<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>

Answer 1

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>
  );
} 

Answer 2

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>