Header under status bar on android after upgrading to 4.10.0

[tux2nicolae]

Description

Don't really know if something is misconfigured from our side, but on the 4.10.0 header under the status bar, on 4.9.1 just tested, the issue does not happen, tested on a real device and in emulator as well with the same outcome

Steps to reproduce

Use 4.10.0, navigate to a screen inside a native-stack, check the navigation bar

Snack or a link to a repository

https://github.com/tux2nicolae/react-native-screens-header-repro

Screens version

4.10.0

React Native version

0.78.1

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[tux2nicolae]

Just tested on IOS, seems all is working fine

[kkafar]

@tux2nicolae try setting statusBarTranslucent: true

[kkafar]

There is a problem in detecting whether the app is in edge to edge or not on Android & we can't just change the default, because it would be a breaking change.

What mostly interests me is whether this is a regression or not. Has this happened on earlier version or is it specific to 4.10.0? See that you described it in the issue description.

[kkafar]

That's strange, because I do not have this bug on my end. If statusBarTranslucent: true does not help, please let me know - I'll look into it tomorrow.

[tux2nicolae]

Hi @kkafar, 4.10.0 is the first version for this to happen, I'll try it in a few minutes, and get back to this thread

[tux2nicolae]

Based on your previous message, I've found the culprit

<>
  <StatusBar translucent backgroundColor="transparent" />
  <Drawer.Navigator
    initialRouteName="drawerApp"
    drawerContent={props => memoizedDrawerContent(props)}
    screenOptions={{
      drawerItemStyle: {borderRadius: theme.roundness},
      headerShown: false,
      drawerType: 'slide',
      drawerActiveTintColor: theme.colors.primary,
      swipeEnabled: false,
    }}>
    <Drawer.Screen
      name="drawerApp"
      component={RestaurantStackScreen}
      options={{
        title: t('navigation.screens.menu'),
        drawerLabel: t('navigation.screens.menu'),
        drawerIcon: ({color}) => memoizedIcon({color, icon: 'home'}),
      }}
    />
  </Drawer.Navigator>
</>

We use the <StatusBar /> component in multiple screens to change the status bar background color, and just found this one here, don't remember exactly why do we chose this method here, but it seems this is the problem

[kkafar]

Okay, lemme know in case you manage to solve the issue, so that I can close the ticket or provide me with a repro / detailed description of how do I reproduce the issue on my end.

[tux2nicolae]

Ok sure, I'll get back with more details, at the first look it seems when the user is using <StatusBar /> component instead of navigationOptions it does not calculate the right insets, but I need to investigate a little more

[tux2nicolae]

Hi @kkafar, I've attached a repro

https://github.com/tux2nicolae/react-native-screens-header-repro

[tux2nicolae]

Hi @kkafar , where you able to reproduce it?

[kkafar]

I haven't tried yet. I'm looking into some other issue atm. Will let you know once I do