TouchableOpacity does not respond immediately to changes in opacity property

[mescalchuan]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment:

OS: windows 7
Node: 6.11.0
npm: 3.10.10

Packages:

react-native: 0.51.0
react: 16.0.0

Steps to Reproduce

Just modify the opacity of the TouchableOpacity style property:

//constructor
this.state = {disabled: false}
//render
const opacity = this.state.disabled ? 0.6 : 1;
//return
<View>
    <TouchableOpacity style = {{width: 100, height: 50, backgroundColor: 'red', opacity}} />
    <Button title = {'disable'} onPress = {() => this.setState({disabled: true})} />
</View>

Click the button, and there is no change in vision, but the opacity really turns into 0.6 console.log(opacity); //0.6. After I clicked the TouchableOpacity, it worked fine.

If I replace TouchableOpacity with TouchableHighlight, everything works well.

[RidaRidss]

// For immediate response

constructor(props) {
super(props);
this.state = {disabled: false}
}

render() {
const opacity = this.state.disabled ? 0.6 : 1;
return (

  <TouchableOpacity onPress={()=>{
    if(this.state.disabled) {
      this.setState({disabled:false})
    }else {
      this.setState({disabled:true})
      
    }
  }} style = {{width: 100, height: 50, backgroundColor: 'red', 
 opacity: opacity 

}} />

);
}

[mmazzarolo]

I don't understand @RidaRidss solution.

I'm having the same issue on [email protected].

Edit: It seems the issue can be fixed by #17106

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}