Pressable | Touchable* onPress is not working inside a nested Modal Stack

[mydesweb]

Current behavior

onPress inside screen content which is nested inside a Modal Stack is not working

• onPressIn and onPressOut are working
• onPress inside screen header is working
• in my example I use createNativeStackNavigator but with createStackNavigator is same thing

Expected behavior

onPress inside screen content should work

Reproduction

https://snack.expo.dev/@mydesweb/modal

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-bottom-tabs
• [ ] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [X] @react-navigation/native-stack

Environment

package	version
@react-navigation/stack	6.0.7

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native
• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[dhavalsoni2001]

I am also facing same issue, any update on this issue?

[dqii]

+1

[srinivastalnikar]

Same issue faced here. Android 12

{ "name": "AwesomeProjectLatest", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.5", "@react-navigation/stack": "^6.0.11", "react": "18.2.0", "react-native": "0.71.1", "react-native-gesture-handler": "^2.9.0", "react-native-safe-area-context": "^4.5.0", "react-native-screens": "^3.19.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native-community/eslint-config": "^3.0.0", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^29.2.1", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.73.7", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "jest": { "preset": "react-native" } }

package.json for the minimum viable project

// In App.js in a new project

import * as React from 'react'; import {View, Text, SafeAreaView, TouchableOpacity} from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import {useState} from "react"; import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen() { const [a, sa] = useState(0); const [b, sb] = useState(0);

return ( <TouchableOpacity onPressIn={() => { sb(b => b+1) }} onPress={() => { sa(a => a + 1); }}> <View style={{ height: 200, width: 200, justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', }}> <Text>OnPress::{a} OnPressIN::{b}</Text> </View> </TouchableOpacity> ); }

const Stack = createStackNavigator();

function App() { return ( <SafeAreaView style={{flex: 1}}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> </SafeAreaView> ); }

export default App;

the difference between a and b keeps on increasing

[fourbytes]

Same issue here, trying to use onPress from within a stack in a modal and it doesn't trigger, but onPressIn and onPressOut work. Anyone found a workaround?

[antun]

I see this issue but only on Android, not on iOS.

  "dependencies": {
    "@bam.tech/react-native-make": "^3.0.3",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "paho-mqtt": "^1.1.0",
    "react": "18.2.0",
    "react-native": "0.73.1",
    "react-native-safe-area-context": "^4.8.2",
    "react-native-screens": "^3.29.0",
    "react-native-vector-icons": "^10.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.18",
    "@react-native/eslint-config": "^0.73.1",
    "@react-native/metro-config": "^0.73.2",
    "@react-native/typescript-config": "^0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },

[4nkh]

Same problem on android

[jiantao88]

Same problem on android

[jiantao88]

Same problem on android

"dependencies": { "@react-native-community/blur": "^4.3.2", "@react-native-community/slider": "^4.4.3", "@react-navigation/bottom-tabs": "6.4.3", "@react-navigation/core": "6.4.3", "@react-navigation/native": "6.1.0", "@react-navigation/stack": "6.3.8", "react": "18.2.0", "react-native": "0.72.4", "react-native-date-picker": "^4.2.14", "react-native-gesture-handler": "^2.12.1", "react-native-linear-gradient": "^2.8.2", "react-native-pager-view": "6.2.0", "react-native-reanimated": "^3.3.0", "react-native-safe-area-context": "^4.6.3", "react-native-screens": "^3.18.2", "react-native-svg": "13.10.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^9.2.0", "react-native-webp-format": "^1.2.0", "react-native-webview": "13.3.1", },

[deebee1234]

I see the same issue.

[jiantao88]

Setting useNativeDriver to false can solve the problem

[ahinkle]

@jiantao88 Thanks but not an option on some setups. We are forced to use native with some Expo setups.

[jiantao88]

@ahinkle My solution is to modify the useNativeDriver parameter and generate a patch

[eshiesty]

Experiencing this issue on iOS. Anyone been able to find the issue?

"devDependencies": { "@babel/core": "^7.24.5", "@babel/preset-env": "^7.24.5", "@babel/runtime": "^7.20.0", "@react-native-community/eslint-config": "^3.0.0", "@testing-library/react-native": "^12.5.0", "@tsconfig/react-native": "^2.0.3", "@types/jest": "^29.5.12", "@types/node": "^20.12.12", "@types/react": "^18.2.15", "@types/react-native-vector-icons": "^6.4.13", "@types/react-native-video": "^5.0.19", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.7.0", "eslint": "^8.19.0", "jest": "^29.7.0", "metro-react-native-babel-preset": "0.73.7", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "^4.8.4" }