React-native: TouchableOpacity component sometimes get stuck at low opacity

[sachinrekhi]

Description

After frequent use of a TouchableOpacity item in the iOS Simulator, the TouchableOpacity element now gets stuck with a low opacity instead of properly returning to full opacity.

This is a new issue as this never used to occur. I only started experiencing it when I recently upgraded my project from Reactive Native 0.34.1 to 0.39.2. My guess is this regression was introduced as part of the transition of TouchableOpacity to use the new native animation capabilities.

Reproduction

Repeatedly click on a TouchableOpacity element. After some time, you'll see that the TouchableOpacity element is stuck with a low opacity instead of returning to full opacity like it is supposed to.

In my case, here is what the normal state looks like for my sidebar toggle that is wrapped by a TouchableOpacity element:

And here is what it looks like after it gets stuck in a low opacity state:

Additional Information

• React Native version: 0.39.2
• Platform: iOS
• Operating System: MacOS

[jamielob]

Also seeing this on device but haven't been able to replicate on simulator.

• React Native version: 0.39.2
• Platform: iOS
• Operating System: MacOS

[ishbaid]

Also running into this - occurs quite frequently for me actually. Would love to hear if anyone is found a fix for this.

[MiLeung]

I just made another touchable* component called TouchableElastic since this issue doesn't seem to be resolved yet. Instead of changing opacity, it changes scale.

[grundmanise]

In some 'medium sized' components I also have this issue.. If I place two TouchableOpacity on the screen with let's say setState(...) in onPress for both and then press them promptly with a finger, one of them stucks at low opacity. It is always the last TouchableOpacity that gets stuck at low opacity.

Part of my component for the reference:

    constructor(props) {
        super(props);

        this.state = {
          listVisible: false,
          itemList: [...]
        }

    }

    render() {
       return (
                <View style={styles.container}>

                    <View style={styles.scrollViewWrapper}>
                        <ScrollView
                            carouselStyle={[styles.scrollView, this.state.listVisible && styles.hidden]}
                            //rest props
                        >
                         {this.state.itemList.map(this.createSlides)}
                         //children > 20
                        </ScrollView>
                    </View>

                    <View style={{flexDirection: 'row'}}>
                            <TouchableOpacity style={{marginRight: 40, width: 40, height: 40, backgroundColor: 'white'}} onPress={this.showList}>
                            <Text> HIDE </Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{marginRight: 80, width: 40, height: 40, backgroundColor: 'red'}} onPress={this.showCarousel}>
                            <Text> SHOW </Text>
                            </TouchableOpacity>
                    </View>

                 </View>
               )
    }

    showCarousel = () => {
        this.setState({
            listVisible: true,
        });
    }

    showList = () => {
        this.setState({
            listVisible: false,
        });
    }

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.