[native-stack] Header is out of the safe area on Android with translucent status bar

When setting StatusBar translucent to true, header will get render out of safe area on android.

StatusBar translucent=true

StatusBar translucent=false

Snack code: https://snack.expo.io/Ld5Ma4ZNM

import * as React from 'react';
import { Text, View, StatusBar } from 'react-native';
import { enableScreens } from 'react-native-screens';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from 'react-native-screens/native-stack';

enableScreens();

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <StatusBar
        barStyle="light-content"
        backgroundColor="rgba(0, 0, 0, 0.3)"
        translucent
        animated
      />
      <Text>Home Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Application" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Environment

software	version
iOS or Android	Android
@react-navigation/native	5.1.6
react-native-screens	2.7
react-native	0.62.2

[Jalson1982]

@WoLewicki is it possible to look into this too? This is issue with android devices and header again 😦

[WoLewicki]

I am investigating it.