react-nativereact-navigationtouchablehighlight

react-native - TouchableHighlight: Remove highlighting after onPress?

I am developing a simple react-native app and am encountering an issue on TouchableHighlight:

When pressing the TouchableHighlight, a new screen is displayed (using StackNavigator from react-navigation). After pressing the back-button and returning to the original screen, the TouchableHighlight still has a black background-color - meaning, that it is still highlighted.

My questions are:

The TouchableHighlight exists within a FlatList. The renderItems-method looks like the following:

let handlePress = () => {
    this.props.navigation.navigate('DetailsScreen');
};
return <TouchableHighlight
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableHighlight>;

If you need/want any further information, please let me know. I've tested the code on android, using the Genymotion-emulator with Marshmallow.

Versions are:

At this point, I'm quite certain that the error is somewhere in my code, as TouchableHighlight works correctly on other parts of my app, and it propably has to do with the navigation-call, but I was unable to pinpoint, why exactly. I've made sure that there are no exceptions or anything like that in my app, and that the onPress-method therefore finishes successfully.

Solution

  • After using the tip from @Kartiikeya and exchanging TouchableHighlight with TouchableOpacity and back to TouchableHighlight, it now works as expected:

    Now, after onPress has been executed, the button (be it a TouchableOpacity or a TouchableHighlight) looses its effect.

    I am not sure, why it works now. The obvious reason would be, that a recompilation of the source code fixed errors - but I recompiled it for writing the original question multiple times before, so that that cannot be an option. Other users I would suggest to clear any cache possible, and especially do the following steps: