I am trying to figure out how to change the volume of the opacity of TouchableOpacity component of React-Native, meaning that I do not like the default value of the opacity when the press is performed, and I would like the opacity to be less transparent.
According to the documentation for this purpose the Animated API should be used:
Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.
So, I did it, that's how it looks:
<Animated.View style={{ opacity: this.state.opacity._value }}>
<TouchableOpacity
onPress={this.hideKeyboard.bind(this)}
style={{ opacity: this.state.opacity._value }}
>
<Text style={buttonTextStyle}>Cancel</Text>
</TouchableOpacity>
</Animated.View>
The hideKeyboard method, that is being invoked onPress, calls the changeOpacity method from within it, that's how it looks:
changeOpacity() {
Animated.timing(
this.state.opacity,
{
toValue: this.state.opacity === 1 ? 0 : 1,
duration: 500
}
).start();
}
this.state.opacity is declared in the constructor:
constructor(props) {
super(props);
this.state = { opacity: new Animated.Value(1) };
}
Having all of this, the behavior (the volume of the opacity onPress of TouchableOpacity) does not change, it is still stays default. The documentation also vaguely introduces setOpacityTo method, but I can't figure out how to use it due to the thoroughness of the description provided in the documentation. How can I perform a manual configuration of the opacity?
Have you tried this
<TouchableOpacity
activeOpacity={.7} // default is .2
... other props here
/>