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)

[kriit24]

problem is not only that onPress does not work, but onPressIn also does not work all time. when u in development mode and usb cable is connected then 10+ times clicked onPressIn also stops working. i dont know, does this happens in live also, but at this moment I don't dare build anything to live.

[antoinerey]

Could it be possible that despite the fix for screen content, and the latest one for header content, this issue still impacts form sheets?

I tried different presentation modes (e.g. regular screens, modals, and form sheets), and it seems that pressable elements in form sheets are still kinda hard to press. Both regular screen and modal presentation modes are working perfectly, but not sheets.

[kkafar]

@antoinerey what platform do you speak of? Android or iOS?

[antoinerey]

@antoinerey what platform do you speak of? Android or iOS?

Android 🤗

[antoinerey]

Sorry for the late reproduction, but I've not been able to actually reproduce on a minimal application. There might be something conflicting in our production application, but I've not had time to deeply investigate, so I'm not sure what might be the root cause.

Feel free to discard my report as it seems invalid. 🙇

[pknrs]

This is still an issue as of now

[kkafar]

@pknrs Can you provide a reproducer using 4.6.0 version of screens?

[Kartik4152]

Facing the same issue.

Observations till now:

• Clicking on it using a cursor works (using scrpy to stream app to mac)
• onPressOut gets called 200-250ms after onPressIn automatically even if I don't lift off my finger.
• onPress gets called if I spam the Pressable 20-30 times sometimes, sometimes never gets called at all

[kkafar]

In cases you're still experiencing issues, please provide a reproduction code, together with package versions you're using and preferably video of the bug occurring, if feasible. As of now I consider the bug fixed with release of 4.6.0.

[gersomvg]

I've been spending hours on this already :( No idea what is causing this. I've tried to bisect it in every direction, but nothing helps.

edit: as in my case there is no scrollview in the modal, I could add cancelable={false} to the Pressable, which fixed the issue.

[freeboub]

I can confirm the issue is still present. It is hard to provide on a sample as (on our project newArch enable, react native 0.77 screens 4.6.0) it is reproduced only in release mode with a real device ...

[perttuvirkki]

Any update on this? Pretty much stuck with my app updates as this is breaking the buttons. I'm also having issues with Pressables inside ScrollView components.

Edit: Apparently my issues are related to gorhom bottomsheet, without it everything works.

Edit2: Placed all other stuff inside a <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}> { ... } and the bottomsheet outside of this this and pressables work again.

[cyburns]

Still an issue for me as well

[kkafar]

I can only repeat my previous comment #2219 (comment)

[mwerder]

can confirm it is fixed. Updating react-native-screens to 4.7.0 fixed it for me. Thanks

[cyburns]

can confirm it is fixed. Updating react-native-screens to 4.7.0 fixed it for me. Thanks

I just upgraded from 4.4.0 to 4.7.0 and am having the same issue. In fact it seems to be an issue on IOS now as well.

[kkafar]

I can only repeat my previous comment #2219 (comment)

[cyburns]

Pressabbles not working within header

Sure, @kkafar , here is a minimum reproduction of where the issue is coming from. I'd also like to note that after upgrading from react-native-screen 4.4.0 to 4.7.0 the buttons changing widths is an issue. If the button gets wider it gets cut off.

Swapping onPress with onPressIn seemed to sometimes fix the issue in 4.4.0. After upgrading to 4.7.0 the issue seems to be on IOS (simulator) now as well where it was only on physical Android devices before.

Dependencies

    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-pager-view": "6.5.1",
    "react-native-reanimated": "~3.16.1",
    "react-native-screens": "^4.7.0",
    "react-native-tab-view": "^3.5.2",

Minimum example

import { useNavigation } from 'expo-router';

const ParentComponent = () => {
  const [isEdit, setIsEdit] = useState(false);

  const nav = useNavigation();

  useLayoutEffect(() => {
    nav.setOptions({
      title: 'Device Details',
      headerLeft: () => (
        <CancelOrBackHeaderLeft isEdit={isEdit} handleEdit={handleEdit} />
      ),
      headerRight: () => (
        <EditHeaderRight
          isEdit={isEdit}
          hasEditPrivileges={hasEditPrivileges}
          isEditLoading={isEditLoading}
          handleEdit={handleEdit}
          handleSaveEdits={handleSaveEdits}
          disabled={
            !newDeviceName || !validateTags() || isEditLoading || loading
          }
        />
      ),
    });
  }, [
    nav,
    isEdit,
    isEditLoading,
    hasEditPrivileges,
    handleEdit,
    handleSaveEdits,
    newDeviceName,
    validateTags,
    loading,
  ]);

  return <></>;
};

const CancelOrBackHeaderLeft = ({
  isEdit,
  handleEdit,
}: DeviceDetailsHeaderProps) => {
  return (
    <View style={[a.flex_shrink]}>
      {!isEdit ? (
        <ScreenBack />
      ) : (
        <TouchableOpacity onPress={handleEdit} style={{ minWidth: 100 }}>
          <Text style={styles.headerCancel}>{t('general.cancel')}</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const EditHeaderRight = ({
  isEdit,
  hasEditPrivileges,
  isEditLoading,
  handleEdit,
  handleSaveEdits,
  disabled,
}: DeviceDetailsHeaderProps) => {
  return (
    <View style={[a.flex_shrink]}>
      {hasEditPrivileges && (
        <Fragment>
          {!isEdit ? (
            <TouchableOpacity onPress={handleEdit}>
              <Ionicons
                name="create-outline"
                size={24}
                color={isEdit ? Colors.lightGray : Colors.black}
              />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={{
                backgroundColor: disabled ? Colors.darkGray : Colors.black,
                borderRadius: 99,
                paddingVertical: 4,
                paddingHorizontal: 14,
                minWidth: 100,
              }}
              onPress={handleSaveEdits}
              disabled={disabled}
            >
              {isEditLoading ? (
                <LoadingDots color={Colors.white} />
              ) : (
                <Text style={[a.btnText, { color: Colors.white }]}>
                  {t('general.save')}
                </Text>
              )}
            </TouchableOpacity>
          )}
        </Fragment>
      )}
    </View>
  );
};

[kkafar]

Thanks for the repro! I'll get back to you once I investigate it

[yeliu84]

Thanks for the repro! I'll get back to you once I investigate it

I'm facing the same issue as @cyburns, any updates?

[damiensedgwick]

All of the internal testers on android have reported header buttons not working at all despite being fine on emulators.

Upgrading to 4.7.0 for screens did not help me.