React Navigation Header Big - Status Bar

[newfylox]

Hi guys,

I just updated my Expo SDK to v25 and my react-navigation package. The problem is that the header of the StackNavigator is too big on Android. It added the status bar height.

I know there is that documentation https://github.com/react-navigation/react-navigation/releases/tag/v1.0.0-beta.26 but I don’t even added any margin-top nor padding-top styling. If I remove my androidStatusBar setting in app.json, it will fix the issue because the status bar will overlay my big header and it will look like it’s fixed but I know it’s not.

Are you adding height somewhere when we are using androidStatusBar setting?

I have used their solution on the previous link (SafeAreaView.setStatusBarHeight(0);) and it worked too, but again, I have no padding-top nor margin-top anywhere!

Thanks

[notbrent]

can you share some screenshots and code? it’s difficult to know what to suggest without having more information.

one reason why it appears to be too large is that you perhaps are already adding extra space for the status bar (try searching for Constants.statusBarHeight in your app and see where you use it)

[ltankey]

I’m experiencing the same, on Expo 25 using react-navigation with StackNavigators.

I know that this is caused by setting the androidStatusBar key in app.json (which I need in order to enable Android’s default keyboard avoiding view).

The header gets a paddingTop of 28, and can’t seem to be overridden in the navigationOptions (to 0). Only way I can seem to get around it is if I set a marginTop of -28 to offset it.

[yatan8]

Me too，Android Header to hight And StatusBar cannot set backgroundcolor。
Test: Android4.4 、6.0

"expo": "^25.0.0",
    "mobx": "^4.0.2",
    "mobx-react": "^5.0.0",
    "react": "16.2.0",
    "react-dom": "^16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-navigation": "^1.5.4"

const RootStackNavigator = SwitchNavigator(
  {
    Loading: Loading,
    NoService: NoService,
    Auth: AuthStack,
    App: AppStack,
  },
  {
    initialRouteName: 'Loading',
  }
);

const AuthStack = StackNavigator(
  {
    LoginUsername: { screen: LoginUsername },
    LoginMobile: { screen: LoginMobile },
    BindMobile: { screen: BindMobile },
    ResetetPasswor: { screen: ResetetPasswor },
    Register: { screen: Register }
  },
  {
    navigationOptions: () => ({
    }),
  }
);

export default class LoginMobile extends Component {
  static navigationOptions = {
    title: '手机号登录',
  };

  componentWillUnmount() {
    clearInterval(this.interval);
  }
......