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

You can replace Touchable Highlight with Touchable opacity and simply set activeOpactity prop with value 1. It will not highlight the press.

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>