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.

[DrZoidberg09]

Oh, I noticed I misread your posting from above. I tried detachInactiveScreens true or false on native-stack navigator. Normal stack does work completely fine.
And the issue is only in the stack. The base view of the Tab for example is totally fine. Only if you navigate to a native-stack screen, the issues happen.

[DavidAmyot]

+1

Have the same issue since upgraded to latest Expo SDK 51 using expo-router. onPress buttons in the header do not work, but onPressIn does work.

Works fine on the simulator, but on our Samsung Galaxy Tab Active4 Pro 5g tablets, the issue is present (even with a development build instead of sdk).

One thing I saw too is that if I try to long press the button, the button's focused color does not stay active like it should, it flashes a fraction of a second.

[hyochan]

This is a real drawback of enabling newArch in Expo.

[alduzy]

Just like in #1975 (comment) Using RectButton from react-native-gesture-handler is a workaround in this case.

[hyochan]

Just like in #1975 (comment) Using RectButton from react-native-gesture-handler is a workaround in this case.

Oh this works! Thank you

[jpdery]

In my case I'm not even able to focus on TextInputs

[WKampel]

onPress also not working for me. But onPressIn does work. I'm on the latest beta version and Android. But it seems to only be a problem for me in certain situations (like in a scrollview that's inside a drawer content).

[WKampel]

RectButton does work. But I'm not sure it can sub touchable opacity.

[mym0404]

I wonder #2292 fixes this. But it is shipped on 4.x only and not in stable release (3.x).

The component in react-native-gesture-handler can't replace native Pressable component completely. But in my case, if I change [native stack to JS stack](JavaScript stack with @react-navigation/stack), touch issue was gone. (0.75, new arch)

[kkafar]

Let me update you on the status of the issue:

This should be fixed by #2292 for pressables inside screens contents. If that's not the case we kindly ask you for a issue reproduction, so that we can improve the situation.

If the pressable is rendered inside a native header, it might still not work. We have a person working on this.