6

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.

Chisko
  • 3,092
  • 6
  • 27
  • 45
Martin Bories
  • 1,067
  • 17
  • 37

5 Answers5

4

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>
Yogendra Solanki
  • 201
  • 1
  • 6
2

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
Martin Bories
  • 1,067
  • 17
  • 37
0

You can replace Touchable Highlight with Touchable opacity. It won't highlight the press.

    return <TouchableOpacity
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableOpacity >;
Kartiikeya
  • 2,358
  • 7
  • 33
  • 68
  • Indeed, when switching to TouchableOpacity with the same code, the effect (here: opacity) does get removed after onPress as expected. However, this is not exactly what I wanted (the effects from TouchableHighlight fit better into the style), but definitely a helpful workaround if I dont get that working. – Martin Bories Mar 16 '18 at 17:12
0

For me, i needed to disable the highlight effect after onLongPress has been fired. You can simply change the key of the touchable using a re-render when you want to remove it.

Here's an example:

 <TouchableHighLight
   onPress={this.pressRow}
   style={styles.outerContainer}
   onLongPress={() => this.setState({ onLongPressed: true })}
   onPressOut={() => this.setState({ onLongPressed: false })}
   key={`long-pressed-${this.state.onLongPressed ? 'yes' : 'no'}`}>
  <View style={styles.innerContainer}>
    {rowText}
    {rowIcon}
  </View>
</TouchableHighLight>
Leonardo Lusoli
  • 1
  • 1
0

Following Leonardo Lusoli's answer, there one thing you should also add is

  useEffect(() => {
    if(isLongPressed){
      setIsLongPressed(false)
    }
  }, [isLongPressed])

This step is necessary because when the first onLongPress event is fired it will set isLongPressed to true and thus changing the key the component is re-rendered and is identifies as a new component and previour event listners are discareded so the onPressOut will not be fired. So

when isLongPressed is set to true the component re-renders and then immediatietly we set it's value to false and thus we get the expected behaviour. Otherwise we will get the unexpected behaviour followed by one expected behaviour.

Veer Metri
  • 7
  • 2