Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TouchableHighlight onPress firing multiple times on Android TV

See original GitHub issue

Description

Using an Android TV emulator when pressing a TouchableHighlight component the onPress handler is called three times. This does not happen with TouchableOpacity, and it does not happen on tvOS.

React Native version:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
    Memory: 4.50 GB / 15.92 GB
  Binaries:
    Node: 12.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0
  SDKs:
    Android SDK:
      API Levels: 25, 26, 28, 29, 30
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 30.0.1, 30.0.3
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Android TV Intel x86 Atom
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
  Languages:
    Java: 1.8.0_201 - /cygdrive/c/Program Files/Java/jdk1.8.0_201/bin/javac
    Python: 2.7.16 - /cygdrive/c/Python27/python
  npmPackages:
    @react-native-community/cli: 4.13.1
    react: 16.13.1
    react-native: npm:react-native-tvos@0.63.4-0  (also in rn-tvos@0.63.3-0)
    react-native-windows: N/A

Steps To Reproduce

Use the reproducible demo below and press each button once.

Expected Results

Each button press should only log to the console once with the debugger enabled. TouchableOpacity logs once, TouchableHighlight logs three times.

Snack, code example, screenshot, or link to a repository:

import { AppRegistry, View, Text, TouchableOpacity, TouchableHighlight, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  button: { backgroundColor: 'teal', margin: 15, padding: 15, width: 200 },
})

const Test = () => (
  <View>
    <TouchableOpacity onPress={() => console.log('TouchableOpacity')} style={styles.button}>
      <Text>TouchableOpacity</Text>
    </TouchableOpacity>
    <TouchableHighlight
      onPress={() => console.log('TouchableHighlight')} 
      style={styles.button}
      underlayColor="indigo"
    >
      <Text>
        TouchableHighlight
      </Text>
    </TouchableHighlight>
  </View>
)

AppRegistry.registerComponent('Test', () => Test)