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

[alphasp]

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

[alphasp]

Closing as I misunderstand translucent status bar behaviour

[Guuz]

What did you misunderstand? I also noticed it renderd underneath it, but since the header is native you cant apply insets to it, right?

[alphasp]

What did you misunderstand? I also noticed it renderd underneath it, but since the header is native you cant apply insets to it, right?

I was confuse with how it should behave when experimenting on my code base, but you are right, the native-stack should handle it correctly. There is an another new issue #485 mention about this problem.

[Jalson1982]

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

[WoLewicki]

I am investigating it.

[saikats5]

I am also facing the same issue

[WoLewicki]

@saikats5 this issue has been addressed in #545. Did you follow the instructions from there?