search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
MIT License
2.92k stars 501 forks source link

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

Open DrZoidberg09 opened 2 weeks ago

DrZoidberg09 commented 2 weeks ago

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: https://github.com/expo/expo/issues/30032 https://github.com/react-navigation/react-navigation/issues/12039 https://github.com/facebook/react-native/issues/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 commented 2 weeks ago

🫨

kkafar commented 2 weeks ago

Is that the thing only on real devices?

DrZoidberg09 commented 2 weeks ago

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

DrZoidberg09 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

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

https://github.com/software-mansion/react-native-screens/issues/2150 https://github.com/facebook/react-native/issues/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 commented 1 week ago

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

tboba commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

@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 commented 1 week ago

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 commented 6 days ago

+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.