React-native-screens: Parent screen goes blank after dismissing a modal screen

[ouabing]

I use both card and modal modes of react-navigation's StackNavigator, as the following structure:

const CardNavigatorData = {
  'Home': {
    screen: HomeScreen,
  },
  'Content': {
    screen: ContentScreen,
  },
}

const CardNavigator = createStackNavigator(CardNavigatorData, {
  initialRouteName: 'Home',
  mode: 'card',
})

const RootNavigatorData = {
  auth: {
    screen: createStackNavigator(
    {
      modalRoot: {
        screen: AuthScreen,
      },
    },,
  },
  cards: {
    screen: CardNavigator,
  },
}

const RootNavigator = createStackNavigator(RootNavigatorData, {
  headerMode: 'none',
  initialRouteName: 'cards',
  mode: 'modal',
})

const RootNavigatorContainer = createAppContainer(RootNavigator)

Nesting these two modes so I can show an Auth modal anywhere inside CardNavigator stacks.

After upgrading to react-native-screens 2.0 version, when I dismiss a modal, like Home -> Push Content -> Show Auth -> Dismiss Auth, then go back from Content to Home, the Home screen goes blank.

Without calling enableScreens everything works well.

Platform: Android
react-native: 0.61.5
react-navigation: 4.0.10
react-native-screens: 2.0.0-alpha.13
react-navigation-stack: 1.10.3

[LuckyLuke19]

Something similar happens to me, but with normal stack screens and not with modals. I have a drawer navigator inside a stack. The stack also contains a settings screen, completely independent from the drawer. When navigating to settings from a drawer screen (let's call it A), then back to A, and then to a different drawer screen (B), a blank screen is shown instead of B.
Edit: This happens to me in react-native-screens@>=2.0.0-alpha.12

[waheedakhtar694]

Same here when i call navigation.goBack() previous screen gets blank.

[fontesrp]

I'm having the same issue, but only on Android.
If I comment the following line, the error stops

enableScreens()

Edit
The error occurs on version 2.0.0-alpha.19 also

Edit 2
Downgrading to 2.0.0-alpha.12 solved it for me. It seems the bug started on 2.0.0-alpha.13.
Here are the versions that are working for me:

{
  "react-native-screens": "2.0.0-alpha.12",
  "react-navigation": "4.0.10",
  "react-navigation-stack": "1.10.3",
  "react-navigation-tabs": "2.6.0"
}

[radko93]

Having the same issue with react-navigation v5 as well. @kmagiera this commit broke it https://github.com/kmagiera/react-native-screens/pull/234

[outaTiME]

Same here guys using Expo SDK36 with [email protected] but only with iOS, on android works well

Note: Expo SDK35 with react-native-screens@~1.0.0-alpha.23 all goes fine.

[owinter86]

I believe this is also related to an issue that I have filed on navigation-ex, which seems to be directly related to the change made #234 to fix native stack nesting.

https://github.com/react-navigation/navigation-ex/issues/222.

[fontesrp]

Somewhere between 2.0.0-alpha.19 and 2.0.0-alpha.25 the error appears to have been fixed 😃

I've upgraded to 2.0.0-alpha.25 and it's working fine

[radko93]

It seems to work for me as well now.

[jtnix]

Was having this problem as artifact of a big React 59 > 61 upgrade, and alpha 25 solved this for me too.

[rzdev]

app crashes when i close a modal screen on alpha27, going back to alpha25 fix it

[kmagiera]

Hello. Appreciate all your comments. However, what would've been more helpful in figuring out the solution is a complete repro case I can run. I see @ouabing posted some example navigator structure, but it is far from a complete example and would take me additional time figuring out how to render screens that are missing there, and what type of commands to use to navigate between the screens to replicate this scenario. I'd be open to spending time debugging this issue but will need a hand in providing an example I can just run.

[fontesrp]

@kmagiera @ouabing I believe the issue was fixed on 2.0.0-alpha.25 and could be closed

[kmagiera]

Given the comments I believe it got fixed in 25 but then there was another regression introduced in between 25 and 27. So if I understand correctly it is still not resolved as of the latest version

[rzdev]

@kmagiera i've just updated to [email protected] and now alpha27 works fine, i guess the issue is with [email protected]

[waheedakhtar694]

I can confirm this issue is fixed in the alpha29

[osdnk]

So closing the issue. Thanks!

[waheedakhtar694]

@osdnk Can you please reopen this issues, This issue is appearing again on IOS with 31

[kmagiera]

Sorry to hear that @appify-waheed. If this is on iOS you open a new issue but please provide the repro app as per my comment here https://github.com/kmagiera/react-native-screens/issues/238#issuecomment-576685683

[waheedakhtar694]

Sure @kmagiera i will create another issue with runnable repo, but the problem is little wired it works fine on ios in debug mode but problem occurs in the release mode.

[ouabing]

Appear again on Android in 2.3.0.

[ouabing]

Also appear on 2.2.0.

[ouabing]

@osdnk @kmagiera Shall we reopen this? After upgrading from alpha version to 2.3.0, this problem occurs again on Android (tested on several devices), just like my original comment described at the top.

This week I upgrade react-navigation from 4.x to 5.x, still no luck.

[fontesrp]

I was having this problem again too. I've adapted my project to use

import { createNativeStackNavigator } from 'react-native-screens/native-stack'
const Stack = createNativeStackNavigator()

Instead of

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

And it stopped. That's a big change though (had to rewrite our entire Header), and not every project can make such a refactor.

[ouabing]

Thanks @fontesrp , I'll give createNativeStackNavigator a try. I do have customizations on bunch of headers, hope it's not another huge work like migrating react-navigation from v4 to v5...

[outaTiME]

Why closed ? same here using Expo 37 on Android only with the following dependencies:

react-native-screens: 2.2.0
react-navigation: 4.3.7
react-navigation-stack: 2.3.11

I’m unable to upgrade to react-navigation v5 at this moment

[akkassmurat]

Appear again on Android in 2.4.0.
Is there any solution?

[cbrevik]

@kmagiera I've created a repro-project here: https://github.com/cbrevik/blankmodal

This is using:

"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10",
"react-native": "0.62.2",
"react-native-screens": "^2.4.0"

For the problem we experienced in our app, the bug seems to be related to the modal screen also wrapping a Stack-Navigator, and the screen navigating to the modal is also wrapped in its own nested Navigator. It doesn't seem to matter if the nested Navigator is of type Stack or Bottom Tabs.

[qalqi]

+1

6 hours of debugging to locate this error.

[DMezhenskyi]

I have the same issue with "react-native-screens": "^2.5.0" only on Android. The last package version which was working fine is 2.1.0

upd.
Also I have noticed that if component is actually just react component (not a stack) it is working fine.

      <TabStack.Screen
        name="Settings"
       ...
        component={FunctionalComponent} <--- works

      <TabStack.Screen
        name="Settings"
       ...
        component={AnotherStack} <--- doesn't work

[svengiebel]

Got the same problem on Android with 2.5.0 (also tried the in-between versions, but no luck). For me it works with the android hardware back button but not with calling navigation.goBack().

[WoLewicki]

Can someone check if the issue is still there when applying changes from #471?

[svengiebel]

@WoLewicki Thanks for your efforts!
I still have the same but with the changes from #471 :(

Its working when is set screenOptions={{ animationEnabled: false }} on the Stack.Navigator. But has been before too.

[WoLewicki]

@svengiebel can you provide a repo with minimal needed configuration to reproduce the issue?

[svengiebel]

@WoLewicki I created a Sample Repo

[WoLewicki]

@svengiebel what is the GlobalStack? Why is the screen from another navigator a child of a navigator? I don't quite understand this setup. Can you give more information about what are you achieving there and what are the steps to reproduce the blank screen? Also, can others check is the issue persists with #471, and, if so, create a repro?

[svengiebel]

@WoLewicki I threw the example together pretty quick yesterday. I just pushed an update to the Sample Repo.

I am using a "Root Stack" to include my TabNavigation and my "Modals". I do this, because i want the Modal Screens to render on top of the tabbar, so the tabbar is not visible when a modal is rendered.

On iOS everything is working correctly, on Android its working if i use the Hardware BackButton. The Bug occurs when i use the navigation.goBack() Method (or navigation.pop()).

So to reproduce the blank screen:

1. Start App on Android
2. Tap "Open Modal" Button
3. Tap "CLOSE MODAL" Button

I also created a Branch with your patch applied.

[WoLewicki]

@svengiebel ok I can recreated the issue, but it seems unrelated to react-native-screens since you didn't enable them in the repo? Am I right? enabling them doesn't resolve the issue so it seems like a problem with goBack() method of react-navigation.

[svengiebel]

@WoLewicki True im using @react-navigation/stack, i thought that it uses react-native-screens under the hood, since its a dependency of it.

[cbrevik]

@WoLewicki I've tested your changes with the sample repo I've made above, and it seems to have fixed the problem. I'll do a larger test with our production app.

@svengiebel The react-navigation framework only uses react-native-screens if you've run enableScreens(). You can see it in the code here: https://github.com/react-navigation/react-navigation/blob/82edb2581bab960f206fd67368a45ad384955c97/packages/stack/src/views/Stack/CardStack.tsx#L131

[svengiebel]

thanks for the information @cbrevik .
As @WoLewicki enabling it does not resolve the issue. Pretty weird that it works with the Android Hardware Button, but not the goBack() Method.

[cbrevik]

No probs!

I've tested the patch in our production app, and it has fixed the issue for us.

[WoLewicki]

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

[alexborton]

Sorry, i can't see where the fix has taken place here? I am still seeing the described issue in Android only when using goBack from a modal (Navigation is nested in tabs).

Removing enableScreens "fixes" the issue but i believe i am losing some performance enhancements?

My deps;

"expo": "^37.0.12"
"react-native-screens": "~2.2.0"
"@react-navigation/bottom-tabs": "^5.8.0"
"@react-navigation/native": "^5.7.3"
"@react-navigation/stack": "^5.9.0"

I tried updating react-native-screens to the latest version and still had no luck (plus warning from Expo)

[WoLewicki]

You cannot use newer version of native code in older expo versions due to it having that code compiled in the managed workflow. You can only use the one provided by the current version.

[alexborton]

Sorry, @WoLewicki - my mistake. I have just spun up my Beta Expo 38 version and the issue does seem to have been addressed 👍