Drawer hideStatusBar breaks SafeAreaView on repeated navigation with screens enabled

Description

When you have a Drawer navigation with hideStatusBar prop and screens enabled, repeated navigation to the same screen is setting SaveAreaView top inset to 0.

Screenshots

Steps To Reproduce

1. open app, see that the green background does not cover status bar
2. go to Notifications, status bar is not covered
3. open drawer again and dismiss it or go to notifications again
4. status bar is covered with green

Expected behavior

1. status bar should not be covered

Snack or minimal code example

import 'react-native-gesture-handler';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {View, Text, Button} from 'react-native';
import React, {StrictMode} from 'react';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import {enableScreens} from 'react-native-screens';

enableScreens();

const Drawer = createDrawerNavigator();

function Home({navigation}) {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View
        style={{
          backgroundColor: 'green',
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text>Home</Text>
        <Button
          onPress={() => {
            navigation.openDrawer();
          }}
          title="open drawer"
        />
      </View>
    </SafeAreaView>
  );
}

function Notifications({navigation}) {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View
        style={{
          backgroundColor: 'green',
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text>Notifications</Text>
        <Button
          onPress={() => {
            navigation.openDrawer();
          }}
          title="open drawer"
        />
      </View>
    </SafeAreaView>
  );
}

function App() {
  return (
    <StrictMode>
      <SafeAreaProvider>
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="Home" hideStatusBar>
            <Drawer.Screen name="Home" component={Home} />
            <Drawer.Screen name="Notifications" component={Notifications} />
          </Drawer.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </StrictMode>
  );
}

export default App;

Package versions

  "@react-navigation/drawer": "^5.12.3",
  "@react-navigation/native": "^5.9.2",
  "react": "16.13.1",
  "react-native": "0.63.4",
  "react-native-gesture-handler": "^1.10.1",
  "react-native-reanimated": "^1.13.2",
  "react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1"

[somebody32]

Thanks a lot! Closing it then as soon as this is expected behavior

[WoLewicki]

I am not too keen with the implementation of the library, but it may be related to usage of ViewControllers for each of the screens in the navigator, when using react-native-screens. Each screen perhaps requires the SafeAreaProvider to be under it. Maybe @janicduplessis could elaborate more on this. Can I help you any more regarding this issue or can we close it?