Screen unresponsive to touch when using tab navigator

[truted]

Sorry, but my project is quite complicated so I can't isolate a test case.

I noticed that when upgrading from alpha.16 to alpha.19, the screen becomes unresponsive to touch when tabbing between views using the tab navigator on iOS. After toggling through several tabs the screen once again becomes responsive. Each of my tab navigators has nested stack navigators (not sure if that's relevant)

Hope this helps uncover an issue.

[hanse]

I've been experiencing this as well when using react-native-screens and react-navigation TabNavigator. I'm also using react-native-gesture-handler for buttons but as the screencast below shows it also happens with TouchableOpacity as well.

Here is a minimal reproduction of the bug w/ screencast: https://github.com/hanse/screens-bug-repro.
When first entering the "Profile" tab the buttons are responsive as expected and you'll see the Alerts popping up. But when you go to the first tab and then back to the second they are no longer responding to the touches. By commenting out useScreens it works as intended.

Merry Christmas! 🎄🎅🏻

[noahtallen]

I also noticed this issue in a largeish app when updating to 3.x react navigation. I installed the gesture handler library as well as react native screens to check it out, but immediately noticed the app freezing pretty frequently while switching between views. I have a stack nav containing a tab navigator where each screen is a react component, and the rest of the sub-screens are in the top-level stack navigator. Opting out of react screens seems to fix the issue. This happens in both development and release versions.

I’m really excited for this library to work more stably, because it’s going to boost android experience a ton!

[nitaking]

Totally the same phenomenon.
Resolved by

// useScreens();

or

useScreens(false);

https://github.com/react-navigation/react-navigation-tabs/issues/83

software	version
ios or android	ios (Android does not occur)
react-native	0.55.4
react-navigation-tabs	1.0.2
react-native-screens	1.0.0-alpha.16

I would like to know what will happen if I do not useScreen.

[sivakumar-cf]

I am also facing the same issue.

[reneeichhorn]

I'm facing this since I enabled react-native-screens as well. Whats weird is that it happens on a single tab only for me. I have some similar tabs that never broke so far even though they have almost the same content. (They all have TouchableOpacity components everywhere..)

[shawnthye]

I am using back 1.0.0-alpha.17 for now, had the same issue with alpha.19
here is my dependencies

  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-gesture-handler": "^1.0.12",
    "react-native-screens": "1.0.0-alpha.17",
    "react-navigation": "3.0.9"
  },
  "resolutions": {
    "**/react-native-screens": "1.0.0-alpha.17"
  },

[kmagiera]

Thank you all for reporting and especially @hanse for coming up with a repro app – it was very helpful!

I managed to locate a bug, fixed it and published alpha.21 with the fix included. Please try it out and let me know if you still experience the issue

[tgensol]

Looks like it is working well now with your fix, thank you !

[townmulti]

@kmagiera This is still going on in alpha.21. Here's is a snack: expo-snack

To test, I just continually switch tabs, check for scrolling and soon a tab screen will become unresponsive. However, I could only duplicate this on the physical device.

[tgensol]

@townmulti I tried to reproduce it, but I did not have it. Are you sure it is the same and coming from react-native-screens ?

Last time, the issue was created in only a few clicks (only going to another tab and the tab was frozen forever)

[kmagiera]

@townmulti The fix required native code changes so if you are using expo it isn't sufficient to install javascript bit via npm. I'll talk with expo and ask if they could pull in native code changes. In the meantime if you have a standalone RN app you can try it there and see if the problem still persist

[kmagiera]

actually got an info from @tsapeta that native changes from alpha.21 will be included in the next expo patch release that is already in review and should be available soon

[townmulti]

@kmagiera @tgensol thanks! ...will test it again after update!

[mvayngrib]

issue is still present, re-opened here with easy repro snack

[bcgilliom]

Happening for me on alpha-23 with react-navigation 3.11 with a custom tab navigator that keeps multiple Screens active (so the animation can show)

[bhattanmol101]

I am still facing this issue but I am not using useScreens from react-native-screens anywhere in my project
Facing this issue on react-navigation v5

[thife455]

@bhattanmol101 have you managed to find a solution? This bug is driving me crazy!

[bhattanmol101]

@thife455

I don't know if it's a solution or not but this is what I did.

I read the above comments that useScreens should not be used or should be false but I was not using useScreens function at all anywhere in my code but I had that react-native-screens dependency in my package.json.

Also, the useScreens function has been deprecated in the recent version so after searching a little bit the useScreens function has been renamed to enableScreens function.

As the above comment said that useScreens should be false I used enableScreens(false) in my App.js before defining the class but that didn't work, much to my surprise writing enableScreens(true) made it work. I don't know what is the real issue but with enableScreens(true) it worked.

The below screenshot shows how I have used it in my App component. App component renders just the stack navigator in which one of the routes has bottom tabs in it, so as soon as the user logs in it goes to tab navigation.

[spaksa]

@bhattanmol101's solution worked for me.

[AlenToma]

Nothing works for me

[sujon54]

Thanks, @bhattanmol101 your solution worked for me.

[vortexflame1404]

@bhattanmol101 Thanks this works for me

[Payhemfoh]

@bhattanmol101 Thanks, your solution is worked for me also.

[omerts]

I also had this issue, updating react-navigation and all of its dependencies to latest version solved it for me

[IssueResolver-collab]

This fix will bring back all touch and scroll events back but will create problem if you have tabBarIcon with position:absolute then it will not overflow the tab bar, instead it will get cut off

[yepMad]

This keeps happening in newer versions. None of the above solutions worked.

[smpjon3]

in latest version, there is no useScreens and enableScreens does not work for me. This problem keeps happening. any solutions or workaround?

[yepMad]

I updated all my react-navigation and react-native-screens packages, so the problem is solved. My package.json:

"react": "18.1.0",
"react-native": "0.70.5",
"@react-navigation/bottom-tabs": "^6.4.1",
"@react-navigation/material-top-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.14",
"@react-navigation/native-stack": "^6.9.2",
"@react-navigation/stack": "^6.3.5",
"react-native-screens": "~3.18.0",

cc. @smpjon3

[AlenToma]

I had this problem before, in my case it was that I had a WebView component in Navigation screen that caused the problem.

[dlipahir]

in latest version, there is no useScreens and enableScreens does not work for me. This problem keeps happening. any solutions or workaround?

I uninstall the app after adding "enablescreens(true)" and then start again
worked for me in android

[manosKas]

I had a WebView component in Navigation screen

@AlenToma what do you mean exactly? everything must go inside the nagivation context, withing screens

i have a horizontal paging list where each item is a webview (like gmail app)