Fixing react native header bar (and status bar) on android and iOS.

The header bar in a new react native or expo project will either show as plain white in the background or eat up a good chunk of your app header area. This easy solution will pad out the header component by the height of the status bar, so it integrates nicely up top.

First up, import this helpful library

import {getStatusBarHeight} from 'react-native-status-bar-height';

Set up a stylesheet for the container and the header

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        paddingTop: getStatusBarHeight(),
        height: 54 + getStatusBarHeight(),
    },
});

Now bind it to your Container and Header elements.

render() {

        return (<Container style={styles.container}>
            <Header hasTabs style={styles.header}>    
/* snip */

Related Posts

Published By