React-native-screens: Encountering a white screen when navigating with latest alpha

[jamonholmgren]

Related issue: https://github.com/infinitered/ignite-bowser/issues/285

Steps to reproduce:

1. Run these commands:

npm i -g ignite-cli
ignite new MyApp -b bowser --no-detox
cd MyApp
react-native run-ios

1. Run it
2. Click the "Continue" button and observe:

If I remove the enableScreens() in the app.tsx, it no longer exhibits this behavior. Reloading the second screen also fixes the issue temporarily until I click back, after which it turns white on the home screen.

Any idea what's going on here?

[bwoodlt]

Having the same issue, any thoughts? react-native:0.61.2 and react-native-screens: 2.0.0-alpha.6

[AfrazHussain]

Could be related to https://github.com/kmagiera/react-native-screens/issues/187? Are your screens nested in a stack inside a tab navigator?

[makarkotlov]

Same here. My screens are in stackNavigator inside of switchNavigator. I encounter white screens and strange glitching when navigating between stacks. Tested only on iOS simulator. react-native:0.61.3 and react-native-screens: 2.0.0-alpha.7

[jamonholmgren]

I think being nested in another navigator was the problem -- it appears to work well after this PR:

https://github.com/infinitered/ignite-bowser/pull/289

Still seems like a bug with react-native-screens though?

[limaAniceto]

Just to share my experience, in case it helps to pinpoint the issue.

This issue also happens if you have the following structure:

createAppContainer(AppNavigator)

const AppNavigator = createSwitchNavigator({
        Auth: AuthStack,
        App: TabNavigator
})

const TabNavigator = createStackNavigator({
   myTab: createBottomTabNavigator(
                {
                    Home: HomeStack,
                    Profile: ProfileStack,
                })
})



md5-40a4da99f69bc1cdb98216ebe1763482



const HomeStack = createStackNavigator(
    {
        home: HomeScreen,
        Other: OtherScreen
   });

If you are on the HomeScreen and click on a button to navigate to OtherScreen you get the blank screen. If you just remove enableScreens, it works

[makarkotlov]

It seems to be fixed in the latest alpha 8 version. I don't have any lags after update. But the performance is way worse than without the lib

Update: I'm on the last alpha.11. The lib crashes my app when I try to navigate to other stackNavigator inside of switchNavigator

[AfrazHussain]

This is still definitely not fixed. I've tried fixing this on my fork, but to no avail.

P.S. I am using alpha version 4 in my production build. Version 8 even with the fix in this commit https://github.com/infinitered/ignite-bowser/pull/289/files doesn't work properly (tested only on iOS physical device). There is still spacing at the bottom of the screen.

[bwoodlt]

Having issue with this still. Any thoughts?

[sofiageo]

Having issue with this still. Any thoughts?

Have you tried the latest alpha version? I had a similar issue that was fixed by upgrading from alpha 8 to alpha 11. I'm not sure why but my issue is gone both on Android and iOS.

[bjjeong]

Still getting this issue on alpha 11. Have been having to use alpha-4 as it's the last version that doesn't have this problem. I'm on [email protected]

[nphivu414]

I'm on alpha 15 now and this blank issue is still there on Android. iOS works much better and rarely have this problem.

[tboerc]

I can say that @limaAniceto issue still happening only on Android, and I'm on alpha 16. If I use "useScreens()" method, it works but with somes bugs, the problem is with "enableScreens()"

[dcosmin2003]

Hello, I'm using alpha 17 and RN 0.61.5 and still have this issue on iOS

[mistikk]

alpha 18 has same issue, also result is not changed with useScreens

[dcosmin2003]

I've downgraded to react-native-screens@^1.0.0-alpha.23 as the documentation is saying and removed the enableScreens, and now it looks fine on my side.

https://reactnavigation.org/docs/en/getting-started.html

[clamiax]

Issue is still there on Android with alpha.22.

[osdnk]

Can you open a new issue with some repro?

[clamiax]

@osdnk Sure, see #270

[alex-trofimov]

Experiencing this issue, at least on android.

"react-native-screens": "^2.0.0-alpha.15",
"react-native": "^0.61.5",
"react-navigation": "4.2.2",
"react-navigation-drawer": "1.4.0",
"react-navigation-stack": "1.7.3",
"react-navigation-tabs": "1.2.0",

Any known solutions?

[kmagiera]

@Legi0n1138 Please try [email protected] and report back if that did not solve the problem

[alex-trofimov]

@kmagiera [email protected] solved the issue. Thanks!

[clems36]

I'm still experiencing this issue with "react-native-screens": "~2.9.0", both on iOS and android.
useScreens gives the same result.