TouchableOpacity does not let you control opacity when disabled prop changes

[maxkomarychev]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.7.0
Yarn: 1.2.1
npm: 5.4.2
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: ^0.50.3 => 0.50.3

Steps to Reproduce

1. have a TochableOpacity with prop disabled = true and style opacity: 0.5
2. toggle disabled flag to false and style to opacity: 1

Expected Behavior

Opacity of component should change from 0.5 to 1

Actual Behavior

Opacity remains the same unless you press the component (which still looks like disabled)

Reproducible Demo

https://snack.expo.io/rJhh9F8Zz

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Button } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    isDisabled: true,
  }
  onPressBox=()=>{
    this.setState({
      isDisabled: !this.state.isDisabled,
    })
  }
  render() {
    const { isDisabled } = this.state
    return (
      <View style={styles.container}>
        <Text>
          Example of bug in TouchableOpacity.
          The green box is disabled initially.
          If you press "toggle `disabled`" is it supposed become fully opaque.
          It will not change opacity until you tap it.
        </Text>
        <View style={styles.column}>
          <View style={styles.row}>
            <TouchableOpacity
              style={isDisabled?styles.disabled:styles.enabled} 
              disabled={isDisabled}>
              <View style={styles.box}>
                <Text>{isDisabled ? "Disabled" : "Enabled"}</Text>
              </View>
            </TouchableOpacity>
            <Button title="toggle `disabled`" onPress={this.onPressBox} />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'white',
  },
  enabled: {
    opacity: 1,
  },
  disabled: {
    opacity: 0.3,
  },
  row: {
    flexDirection: 'row',
  },
  column: {
    flexDirection: 'column',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
});

[afilp]

I confirm that, I hope it can be fixed soon. Thanks!

[maxkomarychev]

as a matter of fact I have provided fix for this, however no comments from maintainers for a month.. #17106

[DavitVosk]

@maxkomarychev It seems the problem is not solved so far. But I found the solution. You just need to
pass your {isDisabled?styles.disabled:styles.enabled} style to the Text wrapper (to the View).

Hope this will help more people to save time