Change font color with TouchableHighlight - react-native

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>