Pressable elements not working in native-stack on Android devices with new architecture

[DrZoidberg09]

Description

When using Android devices (iOS and Android emulator is fine) you cannot use onPress in the header bar. onPressIn and onPress out does work. This was tested mostly with Samsung devices.
This only happens with native-stack / Expo Router.

Please have a look here:
expo/expo#30032
react-navigation/react-navigation#12039
facebook/react-native#44643

Steps to reproduce

1. Use react navigation native-stack with new arch enabled on RN 0.74
2. Go to a stack screen and try to press elements with onPress
3. onPress elements wont work. onPressIn and onPressOut does

Snack or a link to a repository

https://github.com/DrZoidberg09/RN-Android-Touch-Issue/

For comparison a repo with bare RN, one with Expo and react navigation stack and one with Expo router / native-stack

Screens version

3.32.0

React Native version

0.74

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

Samsung S23, Samsung S8+

Acknowledgements

Yes

[kkafar]

🫨

[kkafar]

Is that the thing only on real devices?

[DrZoidberg09]

Yes. So far, only tested with Samsung devices, incl. S24, S8+ and a Samsung tablet (dont remember the name)

[DrZoidberg09]

Plus everything pressable goes completely crazy in the screen (not only the header bar), if it is an actually build apk instead of an expo development build. However, not sure if this related.

[AnzeBlaBla]

Also happening in our app, we've only seen it happen on-device, specifically the S23.

It seems to do with the RN JS responder system, because using react-native-gesture-handler replacements for buttons and other things makes them work.

ScrollViews and FlatLists also work when the bug happens.

It also feels like it sometimes happens when the app is backgrounded for a while and then returns to focus, but this is not confirmed.

[martinezguillaume]

I have the same issue here but with iOS (not tested on Android)
It is only present in production build
It seems that when Pressable is pressed, it is disappearing for 1 frame and reappear right after causing important flicker.
It is not happening all the time, for me, it is happening when I push a new screen and the previous screens has elements.

Screen <- Pressable working

EmptyScreen
PushScreen <- Pressable is working

ScreenWithStuff
PushScreen <- Pressable is crazy

I hope it's understandable

Here is the behavior that I have
https://github.com/software-mansion/react-native-screens/assets/17292331/ff38698f-5a59-480e-bfeb-951e1f03b46f

Note : It is only happening in production build with new arch enabled

[tboba]

Hi @DrZoidberg09! Thanks for creating this issue. I can observe there are some several issues, related to this one:

#2150
facebook/react-native#44610

However, I didn't check if #2150 is related to the behavior of onPressIn/Out. Have you tried creating a navigation from stack navigator with detachInactiveScreens set to false inside the Navigator and checking if pressables also don't work there?

[DrZoidberg09]

@tboba I tried it with detachInactiveScreens true or false. It does not make any difference. Both do not work.

[tboba]

@DrZoidberg09 thanks for checking. This means that probably this issue is out of scope of react-native-screens (since the weird behavior still happens after disabling screens). I'll try to reproduce it on my side and re-check the scenario given above, but as I said, I would report this issue on react-navigation repository or official react-native one.

[DrZoidberg09]

I actually did open the issue at react-native first. They redirected me to react navigation, and they directed me here.

Feels a little bit like going from one doctor to another :)

For my understanding: Why this is not coming from screens? It can defitely be tracked down to the native-stack from react native navigation. Hence, they mentioned it is related to screens.

[tboba]

@DrZoidberg09 I understand your point of view 😄 That's why I asked if this issue also happens on the classic Stack Navigator with detachInactiveScreens turned off (which means that you're resigning from using react-native-screens). If this issue happens on views without screens, then this problem must be related to react-navigation/react-native, but that's of course worth checking.