Header Padding problem during startup.

[lewatt23]

Current Behavior
Hello everyone, I have been having this problem on every new problem i created using react-navigation-stack, when the stack initialized there is a Padding Top that is added then removed,so far i have created 3 projects and am having the some problem even after i build, can someone please help me?

here is my code

`//root navigator

import React from "react";
import { View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import { DetailBilan, ListBilan } from "../screens";
import { SearchStack } from "./reservationNavigation";


//contains all  Bilan stack
const BilanStackTab = createStackNavigator(
  {
    ListBilanScreen: {
      screen: ListBilan
    },
    DetailBilanScreen: {
      screen: DetailBilan
    }
  },
  {
    initialRouteName: "ListBilanScreen"
  }
);



//route container
const AppContainer = createAppContainer(BilanStackTab);

export default AppContainer;
`

Expected Behavior

• What do you expect should be happening?
• Include a screenshot or video if it makes sense.

How to reproduce

• start a new react-native project
  Your Environment

software	version
iOS or Android	8.1
react-navigation	4.1.0
react-navigation-stack	2.1.0
react-native-gesture-handler	1.5.6
react-native-safe-area-context	0.6.4
react-native-screens	2.0.0-alpha.34
react-native	61.5
node	10.7
npm or yarn	17.3

[TPXP]

Hello there, I confirm the bug.
Seems it was introduced by react-navigation-stack@2.0.3. Just downgrade to 2.0.2 in the meantime:

yarn add react-navigation-stack@2.0.2

[satya164]

If you're not using a translucent header, you can set the statusbar height to 0 on Android: https://reactnavigation.org/docs/en/stack-navigator.html#headerstatusbarheight

[TPXP]

@satya164 That fixes the issue on Android but on iOS it makes the status bar too small and overlay with the status bar of the iPhone 11.

[RageOfJustice]

Hello there, I confirm the bug.
Seems it was introduced by react-navigation-stack@2.0.3. Just downgrade to 2.0.2 in the meantime:

yarn add react-navigation-stack@2.0.2

Hello! it helped for android but not for ios

[draperunner]

I've set the headerStatusBarHeight to 0 on Android, and it works. But on iOS the glitch is the other way around: The header starts too small and then pops out to the correct size. It seems that setting the headerStatusBarHeight works, but is there a way to know the correct height value to give it?

[draperunner]

Okay, I've dug a little more into this, and this works for me on both Android and iOS:

import { Platform } from 'react-native'
import { getStatusBarHeight } from 'react-native-iphone-x-helper'

const defaultNavigationOptions = {
  headerStatusBarHeight: Platform.select({
    android: 0,
    ios: getStatusBarHeight(true),
  }),
}

I found that this module uses getStatusBarHeight(true) to get its safe are insets: https://github.com/react-navigation/navigation-ex/blob/master/packages/stack/src/views/SafeAreaProviderCompat.tsx

It's interesting to notice that this glitch does not happen on the first mount/render of the component, and not on rerenders, like going back to this component from a nested view or other prop update. In my case it only happens when I switch tabs on my bottom tab navigator (like on @RageOfJustice's gif) after the initial view of the screens.

[TPXP]

Alternatively, you can just let the default behavior on iOS since it works out of the box by setting headerStatusBarHeight to undefined on iOS

defaultNavigationOptions: {
	headerStatusBarHeight:Platform.select({android: 0}),
}

[draperunner]

@TPXP that didn't work for me. On iOS I got the "opposite" glitch where the header was too small and then popped out. I had to specify a number value.

[satya164]

Closing since this shouldn't happen with latest version of react-native-safe-area-context.

[badbod99]

This issue is not resolved in current released version of react-navigation 4.

[TPXP]

I'm also still having this issue on Android with the current version of React-Navigation 5