Blank screen when navigate between nested stacks

Using enableScreens() cause a blank screen when navigating between nested stacks. Here’s a sample App.js to reproduce the issue:

import React,{Component} from "react";
import {createAppContainer} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {View,Text} from "react-native";
import {enableScreens} from "react-native-screens";

class Screen1 extends Component {
        render() {
                return (
                <View>
                        <Text>Screen 1</Text>
                        <Text onPress={() => this.props.navigation.navigate("Screen2")}>Go to Screen2</Text>
                </View>
                )
        }
}

class Screen2 extends Component {
        render() {
                return (
                <View>
                        <Text>Screen 2</Text>
                        <Text onPress={() => this.props.navigation.navigate("Screen1")}>Back to Screen1</Text>
                </View>
                )
        }
}

enableScreens();

export default createAppContainer(createStackNavigator({
        NestedStack1: createStackNavigator({
                Screen1: createStackNavigator({Screen1: Screen1}),
        }),

        NestedStack2: createStackNavigator({
                Screen2: createStackNavigator({Screen2: Screen2}),
        }),
}));

Going back to Screen1 show a blank screen instead of the expected text. The issue goes away when commenting the enableScreens() function call.

Only tested on Android, currently don’t know about iOS.

My environment:

• react-native 0.61.5
• react-navigation 4.0.10
• react-native-screens 2.0.0-alpha.22

Related issues are #208 and maybe #238.

Regards, Claudio

[clamiax]

@509dave16 Thanks for your feedback! I’m not using expo but following your hints I noticed that the following packages was not updated:

• react-navigation-tabs (was 1.2.0)
• react-navigation-stack (was 1.5.3)

It was a bit of a pain to upgrade them, something broke here or there and I had to change some of my code. A partial list of stuff I had to upgrade, some of which required to be uninstalled first:

• react-native-screens (of course)
• react-native-reanimated
• react-native-safe-area-context
• react-native-safe-area-view
• react-navigation
• react-navigation-drawer
• react-navigation-stack
• react-navigation-tabs

After I was able to make the App starts and make it working again the issue seems indeed to be solved.

[509dave16]

@OscarYuen @clamiax @Barney4242 @eslynunezk4 @trexpert I am not sure if any of you are using Expo. So the following solution may or may not apply due to Expo being a heavily modified version of React Native. But in any case the above problem that you are facing, is the same as mine outlined here in an issue I created in another repo: https://github.com/react-navigation/tabs/issues/241

I found that upgrading Expo to SDK36 also upgraded the versions of supported packages, including react-native-screens. With the newly updated dependencies, the rendering of a nested StackNavigator screens on Android works again for me.

Here are my current dependencies related to react-navigation:

software	version
react-navigation	4.0.10
react-navigation-tabs	2.7.0
react-navigation-stack	2.0.15
react-native-reanimated	1.4.0
react-native-gesture-handler	1.5.0
react-native-screens	2.0.0-alpha.12
react-native	0.61.4
expo	36