react-native - TouchableHighlight: Remove highlighting after onPress?

Question

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:

• Is there a way to manually deactivate the highlighting of a TouchableHighlight-component? That way I could disable the highlighting after onPress has run.
• What could be possible reasons to why the TouchableHighlight stays highlighted? I am using it on other parts of my app without navigation, and I could imagine that it has to do with that.

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:

• node -v: 8.9.4
• npm -v: 5.6.0
• react-native-cli: 2.0.1
• react-native: 0.54.2
• react-navigation: 1.5.2
• Build environment: Windows 10 64-bit

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.

Answer 1

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:

• Close and reopen the android emulator / restart your testing device
• Restart the build PC
• Recompile all source code
• Check in your console for errors and/or exceptions (obviously)
• Replace TouchableHighlight with TouchableOpacity, recompile, check if the error still exists - and if not, reexchange TouchableOpacity to TouchableHighlight