React-native-screens: useScreens() with react navigation freezes scrollView

[jwhscholten]

In my basic Expo app I have a horizontal scrollview on my second tab screen, my tabs are all stackNavigators. Using a single component as tab view causes the same issue.
Issue occurs on iOS and Android.

-Opening my 2nd tab for the first time, scrollView works fine.
-Switch to first tab and back to 2nd tab freezes scrollView
-Switch to 3rd or 4th tab and back to 2nd, scrollView behaves normally

Solution:
Remove useScreens() in app.js

Using:
Expo SDK 32
React Native Screens 1.0.0-alpha.19
React Navigation 3.0.9

[leedan77]

Same problem +1

[martinezguillaume]

It doesn't freeze, it's just that there is a View that catch all the touchable events in front of your app.
You can see it with the inspector :

I think that this issue appeared when I updated to Expo SDK 32

[ovy9086]

I reported a similar issue here : https://github.com/kmagiera/react-native-screens/issues/79 , with a quick demo to reproduce. I think they are related.

[brentvatne]

can you post a reproducible example for the exact case you describe here @jwhscholten? want to ensure it's the same as what @ovy9086 mentioned

[jwhscholten]

@brentvatne I'll try a.s.a.p.

[ovy9086]

any updates on this ?

[Hirbod]

I can confirm this issue. Removing useScreen fixed the problem for me. As soon as I switch tabs back and forth, it will stop from scrolling. I have to switch back again, scroll a bit on another screen, and switch to the broken tab and I can scroll again. Switching back will break it again.

[jakejyang]

It seems like this is quite widespread. Running into this issue too, it showed up after upgrading to expo SDK32. Also getting a ScreenContainer on top that captures all touch events. Not sure if it's because I'm using tab navigator inside of tab navigator.

Is possible that this is related?
https://github.com/kmagiera/react-native-screens/issues/61

[OscarYuen]

I encounter this issue too. My scrollview doesnt respond with useScreens() applied

[midyan]

Hi there. Any updated on this issues?

[ovy9086]

this issue basically renders the entire library unusable... will this ever be addressed ? Is this repo still maintained ?

[Kasendwa]

this issue basically renders the entire library unusable... will this ever be addressed ? Is this repo still maintained ?

Yes. It's still maintained. I watched the author's talk recently. But I agree, until this issue is fixed, I can't really use this very good library in production. This is a big deal breaker.

[ovy9086]

Yes. It's still maintained. I watched the author's talk recently. But I agree, until this issue is fixed, I can't really use this very good library in production. This is a big deal breaker.

what talk ? 😛 maybe we can benefit from looking at it as well . or you can break down a 'roadmap' / 'plan' for this library for us 😄

[aznoisib]

This severe bug only occurs on certain Androids
https://github.com/facebook/react-native/issues/25755
but there is no response

[aznoisib]

Logic I have to make the function of detecting a bad scroll

[OscarYuen]

I found this issue fixed in Expo SDK 33

[aznoisib]

This bug on react native framework

[CruelMoney]

I'm still seing this bug on expo 34

[WoLewicki]

Can someone tell if the issue still exists in the newest version? @jwhscholten @CruelMoney ?

[Hirbod]

This bug has been resolved long time ago @WoLewicki
I can confirm it, since it was broken for me too (im one of the first comments)

[WoLewicki]

Ok, I am closing it then. Feel free to comment if someone still has that issue.

[AlenToma]

Im still having this issue now, why close it?

here is My package
```
"@expo/metro-config": "^0.1.52",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/material-top-tabs": "^5.3.13",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"eslint-plugin-react-hooks": "^4.2.0",
"expo": "^40.0.1",
"expo-asset": "^8.2.2",
"expo-file-system": "^9.3.0",
"expo-sqlite": "^9.0.0",
"i": "^0.3.6",
"install": "^0.13.0",
"node-html-parser": "^2.0.2",
"npm": "^6.14.11",
"react": "~16.13.1",
"react-native": "^0.63.4",
"react-native-eject": "^0.1.2",
"react-native-elements": "^3.1.0",
"react-native-gesture-handler": "~1.8.0",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "~1.13.0",
"react-native-render-html": "^5.0.1",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "^2.15.2",
"react-native-unimodules": "^0.12.0",
"react-native-vector-icons": "^8.0.0",
"react-native-webview": "^11.2.1",
"recyclerlistview": "^3.0.5"

````

[WoLewicki]

@AlenToma please provide a reproduction of the issue, preferably in TestExample project and I will reopen then.

[AlenToma]

There is no need. The problem was not with navigation, it was with my code. I have a while loop that sometimes dose not end :)

[ndotie]

i still have a problem with this, and i have no infinite loop on my code

my dependencies

"@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/native": "^5.9.0",
    "@react-navigation/stack": "^5.13.0",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "cryptr": "^6.0.2",
    "expo": "~40.0.0",
    "expo-device": "2.4.0",
    "expo-image-picker": "^9.2.1",
    "expo-jwt": "^1.4.0",
    "expo-notifications": "^0.8.2",
    "expo-status-bar": "~1.0.3",
    "install": "^0.13.0",
    "link": "^0.1.5",
    "npm": "^6.14.11",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-modals": "^0.22.3",
    "react-native-qrcode-svg": "^6.0.6",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^8.0.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"