React Native component opacity not updating when props updated

There does seem to be an issue with setting the opacity of TouchableOpacity buttons. I'm using [email protected]. If the opacity is set and then updated the new render does not seem to change the opacity value even though it is being passed to the component style.

There is a native way to do this with TouchableOpacity. This also benefits from disabling all press events if using the disabled prop.

<TouchableOpacity
    disabled={ this.props.is_disabled }
    activeOpacity={ this.props.is_disabled ? .6 : 1 }>
    <Text>Custom Button</Text>
</TouchableOpacity>

One caveat to the above, setting the activeOpacity does not appear to change the text opacity only the backgroundColor.

Alternatively using rgba values to specify the opacity does work.

export class CustomButton extends Component {

    get_button_style() {
        let _button_style = [this.props.button_style]

        if (this.props.is_disabled) {
            _button_style.push({
                backgroundColor: 'rgba(0, 0, 0, .6')
            });
        }

        return _button_style;
    }

    render() {
        return(
            <TouchableOpacity
                style= { this.get_button_style() }>
                <Text> Custom Button </Text>
            </TouchableOpacity>
        )
    }
}

Seems like a known issue https://github.com/facebook/react-native/issues/17105

One workaround is to wrap your TouchableOpacity's content in a view and apply the opacity styling to that view instead of directly to Touchable opacity.