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.

[devYonz]

I just tested with the release from 3 days ago with #2292 and it did not fix the hardware device issue. The funny thing I observed is that if you connect your phone to android studio and use a pointer to click on buttons they work fine.

[thibaultcapelli]

I have the same issue with new architecture enabled, only tested on Android Pixel 7a

Package versions

"@react-navigation/native": "^7.0.0",
"@react-navigation/native-stack": "^7.0.0",
"react": "18.3.1",
"react-native": "0.76.1",
"react-native-screens": "^4.0.0"

I also noticed the issue occur only with the onPress props but onPressIn also works fine. Also if I import Header from @react-navigation/elements it is also working fine.

So the issue looks related to the components in the header props only but not with the header prop itself

Sample

import React from 'react';
import {Pressable, Text, View} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Header} from '@react-navigation/elements';

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

const MyStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
  },
});

function App() {
  return (
    <NavigationContainer>
      <MyStack.Navigator
        screenOptions={{
          gestureEnabled: true,
          fullScreenGestureEnabled: true,
          headerLeft: () => (
            <Pressable
            // onPress={() => console.info('Hello2')} // => KO
            // onPressIn={() => console.info('Hello2')} // => OK
            >
              <Text>Hello2</Text>
            </Pressable>
          ),
        }}>
        <MyStack.Screen name={'HomeScreen'} component={HomeScreen} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
}

function App() {
  return (
    <NavigationContainer>
      <MyStack.Navigator
        screenOptions={{
          // => OK
          header: () => (
            <Header
              title={'Title'}
              headerLeft={() => {
                return (
                  <Pressable onPress={() => console.info('Hello')}>
                    <Text>Hello</Text>
                  </Pressable>
                );
              }}
            />
          ),
        }}>
        <MyStack.Screen name={'HomeScreen'} component={HomeScreen} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
}

Hope it helps

[thibaultcapelli]

Should be fixed by #2466 for header pressables

[zingzongzung]

Hi guys,

I am new to react native world and while learning about the navigation details I faced into the same issue.

I have isolated both "@react-navigation/drawer": "^7.0.3" and "@react-navigation/native-stack": "^7.0.2". With the native-stack one the header press are not working like this issue refers.
With only the react-navigation/drawer the presses anywhere on the screen work as expected
However when I nested drawer navigation within stack navigation, the same pressable text defined on HomeScreen wouldnt work.
Please refer to a sample simple project to see it in action.
https://github.com/zingzongzung/ReactNativeScreen

[kkafar]

The progress on the issue is being made in #2466 guys, we're aware of the issue.

[Yurii-Lutsyk]

Any updates? I can't replace the Pressable component with the RectButton?

[zingzongzung]

@kkafar that will fix pressables on the header but will that fix the pressable in the body in case there is a drawer navigation nested with the stack navigation like I refered on my previous comment?

[MikeKovarik]

+1. I started migrating to RN 0.76 & new arch but this is blocking me. Pixel 4, real device.

[AlexCernik]

Hi any solution? the button or pressable press not work correctly in header.

[MikeKovarik]

Hi any solution? the button or pressable press not work correctly in header.

Here's my workaround

import {Gesture, GestureDetector} from 'react-native-gesture-handler'

// workaround
const tap = Gesture.Tap().runOnJS(true).onEnd(onPress as any)

return (
    <GestureDetector gesture={tap}>
        <RNPressable {...props} />
    </GestureDetector>
)

// orignal impl. restore once RN new-arch bug is fixed
//return <RNPressable onPress={onPress} {...props} />

[Yurii-Lutsyk]

return (
    <GestureDetector gesture={tap}>
        <RNPressable {...props} />
    </GestureDetector>
)

This works for me, but just as a temporary solution until this issue is fixed

[acrabb]

+1 +1 +1 🙏

I just ran into this issue upgrading to Expo 52 with New Architecture.
How is this not fixed yet?? 😅
onPress in headers seems like a pretty common thing!

[beinoriusju]

Expanding on temp solution that works

import { Pressable } from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler'

const RNPressable = ({ onPress, ...props }) => {
    const tap = Gesture.Tap().runOnJS(true).onEnd(onPress)

    return  <GestureDetector gesture={tap}>
    <Pressable {...props} />
</GestureDetector>
}

export default RNPressable;