React-native: Button onPress not triggering in debug mode with Android device

[zenibeat]

Description

Button onPress will not trigger in debug mode on. I created a brand new project with the cli tool and got it to run no my Android tablet. Added a button to the App.js template code:

"pressed" showed up in the log with Debug off, but did not with Debug on.

I tried the above with rn version 0.61.5 and it worked great in Debug mode.

Same as this: https://stackoverflow.com/questions/61189313/react-native-buttons-onpress-does-not-fire-when-app-running-in-debug-mode

React Native version:

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
Memory: 1.55 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 24, 26, 27, 28
Build Tools: 23.0.1, 26.0.1, 28.0.2, 28.0.3
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_131 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. create new project with the cli
2. Add a button to the App.js template code:
   

Expected Results

Expected "pressed" to appear in Chrome debugger.

[majugurci]

I have the same problem. onPress is not triggered in debug mode (windows, chrome, android emulator). If debug mode is disabled onPress is working fine.

[Maddoc42]

Same behaviour here after upgrading from 0.61.5 on Android. Disabling chrome debugging enables touches, while having debugging enabled disables touches. Buttons will show the ripple animation to indicate they have been touched, but no effect after that.

Edit: as a workaround, this seems to be working fine https://github.com/facebook/react-native/issues/27008#issuecomment-592048282

[Dinkelborg]

@zenibeat Thank goodness - I was going insane over this ... I couldn't find out why this was happening. Sometimes it would just work and other times you just get the button feedback (downstate) but onPress doesn't trigger ...
I also found out that if you are in debug mode but press the button from the very edge of the phone it will still work for some reason (testing on a Huawei P30 Pro)

[adrianm86]

The same happens to me if I use the debug mode (Huawei P20 Pro).
With react native 62.2

[eggybot]

Same behaviour here after upgrading from 0.61.5 on Android. Disabling chrome debugging enables touches, while having debugging enabled disables touches. Buttons will show the ripple animation to indicate they have been touched, but no effect after that.

Edit: as a workaround, this seems to be working fine #27008 (comment)

The link solve my issue by disabling then enabling the automatic time in the android device settings

[Battleplayer]

Have the same problem.
react: 16.11.0
react-native: 0.62.2
My phone: mi a2 lite

Temporary solution was using onPressIn instead.

[naxel]

Edit: as a workaround, this seems to be working fine #27008 (comment)

thanks!

[weinixuehao]

@zenibeat Maddoc42
I have meet that issue and tried the solution @Maddoc42 but not working

[Maddoc42]

@weinixuehao had this issue on multiple real android phones by now. What always seems to work is open phone settings --> date & time --> turn off "Use network provided time" and back on.

On some devices it takes a few tries to get this worked, sooner or later they all come around though 👍

[weinixuehao]

@Maddoc42
Thanks! I also found a solution to reinstall after uninstalling the app then it is ok!

[avinashlng1080]

@weinixuehao can you please explain which solution you've used ?

[weinixuehao]

@avinashlng1080
Reinstalling app when run into the issue. after all, this is only a small probability, so it is acceptable to me

[Dinkelborg]

This is certainly anything but acceptable ... this happens every single time I test it - how come there is still no fix for this? A lot of people must be facing this daily now

I can't fix it with the workaround solutions provided here the times never align the device is always one second behind the dev machine ...

Besides ... is this really the issue? Again I can click things always - but they will only trigger the onPress function if they are at the very border of the screen
To me this feels more like an invisible overlay that catches the click events

[StarryFire]

Hi, i am facing the same issue on iOS :/

[OkancanCosar]

first of all check adb date and your pc date with
adb shell "date" && date
if this dates are different, pc and device (real phone or emulator) set automatic network-provided time. Carefull both device(pc and phone or emulator.)
this works for me

[SchmidiMC]

Same Problem

[SamiChab]

Phone and device times are perfectly matching but the issue persists...
"react": "16.11.0", "react-native": "0.62.2"
Tested on Google Pixel 4a, Android 11

Come on React-Native Team, please help

[carrillojeisson93]

good day
I am emulating on a physical android phone
I had the same problem
I solved it by exiting the application, deactivating it and reopening it
I hope it works for you

[fcostaprojects]

Try update CLI
Solved for my project.

[salman1696]

For me, Changing the browser for debugging from Mozilla Firefox to Google Chrome fixed the problem for me