TouchableOpacity onPress won't fire every time

[shifenis]

Description

I was testing on simulator, and the TouchableOpacity works just fine, but when try to test on real device (iPhone 12), the onPress doesn't fire every time, but the opacity animation works fine.
If you try to change onPress to onPressIn it works fine (animation doesn't trigger as expected).

Version

0.66.1

Output of react-native info

System:
OS: macOS 11.6.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 23.61 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.2 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
Android SDK:
API Levels: 29, 30
Build Tools: 29.0.2, 30.0.3
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7678000
Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_291 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.1 => 0.66.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Adds TouchableOpacity
2. Adds onPress
3. Tap on element

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

<View>
   {
     users.map((userData) => {
     const user = userData.data();
     return <User key={`User_${user.id}`} user={user} />;
     })
   }
</View>

And the User functional component is:

  const User = ({ user: selectedUser }) => {
    const openProfileSection = () => {
      navigation.navigate(NavigationScreen.UserProfile as never, selectedUser as never);
    }

    return (
      <TouchableOpacity
        onPress={openProfileSection}
        key={`View${selectedUser.id}`}>
        <Text key={`Text${selectedUser.id}`}>User</Text>
      </TouchableOpacity>
    )
  }

A screen recorder:
https://user-images.githubusercontent.com/52457780/142597857-810396af-6b58-4902-aaa0-f5a61b6b1501.MP4

[tariqule]

@shifenis this seems to be working for me if you remove the key={View${selectedUser.id}} from the TouchableOpacity and Text key={Text${selectedUser.id}}

[shifenis]

@tariqule effectively removing the key, the onPress is correctly triggered, but I think the issue still has to be open as well: why we shouldn't use a key?

[tariqule]

@shifenis you would use key on the component you are mapping, in your case it should be User Component, not it’s children because it will cause re-render and the onPress won’t work all the time.