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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 12
Comments: 45 (12 by maintainers)

Commits related to this issue

feat: detach only screens from current container (#471) When two ScreenContainers have the same FragmentManager, which happens e.g. here #238, where Stack Navigator, which doesn't have screens enable... — committed to software-mansion/react-native-screens by WoLewicki 4 years ago

Most upvoted comments

@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.

bug

cbrevik on Apr 15, 2020

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"
}

fontesrp on Dec 13, 2019

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

akkassmurat on Apr 6, 2020

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.

kmagiera on Jan 21, 2020

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

giannismacheras on Dec 5, 2019

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

alexborton on Sep 15, 2020

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

WoLewicki on Apr 22, 2020

No probs!

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

cbrevik on Apr 21, 2020

@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

cbrevik on Apr 21, 2020

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

outaTiME on Apr 6, 2020

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…

ouabing on Mar 19, 2020

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

kmagiera on Jan 21, 2020

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

fontesrp on Jan 17, 2020

Same here guys using Expo SDK36 with react-native-screens@2.0.0-alpha.12 but only with iOS, on android works well

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

outaTiME on Dec 17, 2019