After 3 months off keyboard and a new laptop I stumbled across the following bugs in both chrome and safari (the second one is major) while running react-native for web:

• I have to set cardStyle: { flex: 1 } in the options of createStackNavigator, otherwise the cards (individual screens of the stack navigator) will have height 0.
• When pushing a new screen into the navigation stack, the previous screen will become blank and occupy half of the top of the screen instead of disappearing completely. The bottom half of the screen will contain the pushed screen.

Testing on android I don't have those issues.

I don't know whether these issues are related to react-native-gesture-handler, react-navigation or react-native-web. I would appreciate any hints.

I used the most recent versions for all packages (react-native v0.59.9, react-navigation v3.0.9 and react-native-web v0.11.4, react-native-gesture-handler v1.3.0)

Current Behaviour

web version:

Expected Behaviour

mobile version:

How to reproduce

The problem arises only on the web version, not on the mobile versions. Vanilla StackNavigator:

const StackNavigatorContainer = createAppContainer(createStackNavigator( { FirstScreen: FirstScreen, SecondScreen: SecondScreen, }, { initialRouteName: "FirstScreen", cardStyle: { flex: 1, } } )); 

Your Environment