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

In my opinion correct solution is to use setOpacityTo method.

In your render:

render() {
  const opacityValue = this.props.disabled ? 0.5 : 1;
  return (
     { this.btn = btn; }} onPress={this.onPress}>
      {this.props.text}
    
  );
}

And next you can use setOpacityTo method in componentDidUpdate on disabled props change:

  componentDidUpdate(prevProps) {
    const { disabled } = this.props;
    if (disabled !== prevProps.disabled) {
      const opacityValue = disabled ? 0.5 : 1;
      this.btn.setOpacityTo(opacityValue);
    }
  }