Dynamic Opacity not changing when component rerenders in react native

Question

I\'m starting to learn React Native, and for my project I created a simple Button component to reuse in my project. I set the opacity value dynamically according to the vari

Answer 1

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 (
        
          
            {text}
          
        
    )

}