React-native-screens: Blank page when using `setParams` in ReactNavigationv5 on Android 8

[alimek]

Hello,

Found issue where calling setParams in componentDidMount for example is casuing blank page on Android 8.

Everything works fine on Android 9+ in my app.

If I remove enableScreens(), everything works fine.
Found workaround that adding timeout for 100ms and then call setParams is also working fine.

react-native-screens: 2.8.0
@react-navigation/bottom-tabs": "^5.5.2"
@react-navigation/drawer": "^5.8.2"
@react-navigation/native": "^5.5.1"
@react-navigation/stack": "^5.5.1"

anyone faced similar issue?

[WoLewicki]

Can you provide a repo/snack with minimal configuration needed to reproduce the issue?

[alimek]

Sure, trying to create repo now. One question regarding the enableScreens().

If I am not using createNativeStackNavigator in my app, is enablingScreens doing something?

[alimek]

@WoLewicki repo here: https://github.com/alimek/react-native-screens-bug

by default app will open with "blank" screen, please comment line https://github.com/alimek/react-native-screens-bug/blob/master/App.tsx#L20 and you will get default RN screen page.

While testing noticed, that the same is happening on all androids: 8, 9, 10. For some reason on my app it was happening only on 8, but maybe i was lost with android version while testing it :P

[WoLewicki]

So does it happen on all Android versions or not? I added this screen to my app with Android 10 and everything works just fine.

[alimek]

That's what i am using for testing as well as real device - Xiaomi phone with android 10

[WoLewicki]

Could you check if applying https://github.com/react-navigation/react-navigation/pull/8473 fixes your issue?

[alimek]

yes, it does! 🎉

[WoLewicki]

Ok so I am closing this issue. Feel free to comment if there is something wrong.

[alimek]

its fixing few other problems for me too (like on Android YouTube Player was not playing video sometimes), but now, once user is logged to app i am getting this error.

I have if for rendering either login screen or whole bottom tabs component

[WoLewicki]

Can you repro it on a small example?

[alimek]

sure, will prepare tomorrow or on Monday

[alimek]

@WoLewicki any hint how can i debug this on my app? My Android dev expierence is not big and cant reproduce it in simple app, which means must be something related to my app code, but cant find what really is causing problem.

Like you see on screenshot, i have the ViewID but cant find anything in FragmentManager which help me find where is problem.

I have component which has aniamted splashscreen when app is cold opened and then redirecting to login or user module,
but the same screen is opened when user is redirected from Login screen to main app, to run some nice animation for logging in.

I noticed when module is null for first time everything is fine, then i am on Login Screen and once user logs in, user is redirected to this component again and i have crash, if i redirect user straight to app, crash is not happening.

<NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
          {module === null && (
            <Stack.Screen
              name={Screens.AUTH_CHECK}
              component={AuthCheck}
              options={{ animationEnabled: false }}
            />
          )}
          {!!module && <Stack.Screen name="Main" component={AfterAnimationAppStack} />}
        </Stack.Navigator>
      </NavigationContainer>

I would assume something must be with RN clearing Screens once they are created/removed dynamically.
I am still digging, so if will find what is causing this crash will update repo with example or just let you know that its my app code ;-)

[WoLewicki]

Isn't it the same issue as #463?

[alimek]

yes, looks like its the same problem.

@edit
or it may be save thing, but from different use cases, beacause stack is different.

[alimek]

I managed to get rid of crash on Android.

Not sure if that's a bug or not, but i couldnt reproduce it on simple app without any extra heavy logic which my app is doing.

Problem on my app was, that once user is logged in, in very short time my app was trying to render Main app component with whole drawer and bottom navigation and then back to Splash screen when animation was happening and navigating to this main screen again. I was not aware that main app compoennt was loaded (it was that quick). After adding some more condition to prevent doing that, crash is not happening and everything is working fine.

@WoLewicki i am patching the @react-nativation/stack for now and have hope that your fix will land soon in NPM.

Thanks for help!

[WoLewicki]

Nice! Could you try and repro it anyhow and add this repro to the #463 even if it seems a bit big? It would greatly help us remove the problem.
@react-navigation is publishing very often so you won't have to wait long.
I am closing this issue then, feel free to comment if something is wrong.