Header component height issue in android

Hi I was trying to use the Header component in my app, the header component was working as expected in iOS but in Android I am getting status bar height along with the header component. Is there anyway to remove the status bar height from Android.

Here is the code snippet I have used:

<Header
            centerComponent={<Text>Title</Text>}
          rightComponent={
            <Image source={require('../../assets/images/navbar-logout.png')} />
          }
        />

Here is the result I am getting in Android and iOS:

Versions: react-native-elements: ^0.18.5 react: 16.0.0 react-native: 0.51.0

[lFaustus]

this is what is did with the latest version import { StatusBar } from 'react-native'; <Header containerStyle={{ marginTop: ((StatusBar.currentHeight || 0) * -1) }} />

[iRoachie]

The height of the status bar is set as a fixed 70 units https://github.com/react-native-training/react-native-elements/blob/4f8225d91bd5917c88b3e70e27a991b12ad4dd1d/src/header/Header.js#L101

On iOS the statusBar overlaps the content, while on android it does not. An easy fix would be to set height for android to 70 - 24 in which 24 is the height of the status bar on android.

A quick workaround in your case would be to change the height of the StatusBar by using the outContainerStyles prop.

 outerContainerStyles={{height: Platform.OS === 'ios' ? 70 :  70 - 24}}

That way it’ll be 70 on iOS as expected and 56 on android