Touchables dismiss sequential fast touches

[YassinEldeeb]

Description

I'm building a PIN Lock Screen for my cloud storage app, the screen is very simple.
the problem is that when typing the PIN Code at normal speed it's fine and it triggers all of my touches, but when typing the PIN Code fast as people usually do to prevent anyone from catching the PIN, it always triggers 2 or 3 out of 4 touches even in release mode.

• any touchable component has that problem, it's not very slow but in a PIN Lock Screen scenario, it's notable that not all of my fast touches are triggered due to my fast touches.

React Native version:

System:
OS: Windows 10 10.0.19042
CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
Memory: 7.16 GB / 15.95 GB
Binaries:
Node: 16.8.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 25, 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2
System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6626763
Visual Studio: 16.6.30225.117 (Visual Studio Community 2019)
Languages:
Java: 11.0.12 - /c/Program Files/Eclipse Foundation/jdk-11.0.12.7-hotspot/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

I've isolated that screen in a repo, and made that same PIN Lock Screen with minimal amount of code and no extra dependencies, so just those 3 commands will get you up and running with the problem.

It's just 12 touchable components and 4 dots above, when you tap on any touchable component it adds the value to the PINCode state, very simple.

1. git clone https://github.com/YassinEldeeb/react-native-touchables-bug
2. yarn
3. yarn start
4. as an example press 4 zeros fast, you'll notice only 2 or 3 are triggered, it only triggers all the touches if you wait after each press a bit.

Expected Results

I expected fast response as other native apps and the device lock screen, they've very fast response to my touches.

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

Snack: https://snack.expo.dev/@yassineldeeb/dcff5b
Minimal Code Example: https://github.com/YassinEldeeb/react-native-touchables-bug/blob/main/App.tsx
Repo: https://github.com/YassinEldeeb/react-native-touchables-bug

And this is a screen recording for the problem, if you put the playback speed on 0.25, you'll notice that I pressed certain numbers and it was dismissed by the touchable highlight tint color and the actual onPress event.

VID_20210930121250.mp4

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[YassinEldeeb]

The Issue isn't fixed yet.

[bna-ch]

Did you find a solution to this? I am working on something similar and having the same issue.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[YassinEldeeb]

still not fixed

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.