Dynamic Opacity not changing when component rerenders in react native
For me it worked when I also changed the disabled
prop together with the opacity.
I guess the issue is that the opacity in TouchableOpacity
is an Animated.Value
that overrides the value in the style
prop and doesn't change, when the style
prop changes...
not sure if it's a bug on the TouchableOpacity component, but the opacity won't update on a re-render until the component is clicked
to fix your problem just wrap the content of the touchable in a View and apply the opacity to the view instead of the touchable
export default function Button({text, onPress, style, disabled, textStyle}) {
const opacity = disabled === true ? 0.5 : 1
// console.log('opacity', opacity)
return (
<TouchableOpacity onPress={onPress} disabled={disabled}
style={[defaultStyles.button, style]}>
<View style={{opacity}}>
<Text style={[defaultStyles.text, textStyle]}>{text}</Text>
</View>
</TouchableOpacity>
)
}