reactnavigation hiding statusbar leaves space above header

Question

I use reactnavigation and I am hiding the statusbar at the top, but it leaves an empty space above the header.

I already tried paddingTop or marginTop, but none work.

This is how I hide the statusbar.

import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';

const App = () => (
    <View style={{flex:1}}>
        <StatusBar hidden={true} />
        <Drawer />
    </View>
);

export default App;

Any idea would be helpful.

Thanks.

Answer 1

How to Fix it

I add the following to the index.js:

import React from 'react';
import { Platform, View, StatusBar } from 'react-native';
import { Tabs, Drawer } from './config/router';
import { SafeAreaView } from 'react-navigation';

SafeAreaView.setStatusBarHeight(0);

const App = () => (
    <View style={{flex:1}}>
        <StatusBar hidden={true} />
        <Drawer />
    </View>
);

export default App;

Basically added the SafeAreaView part.

Hope this is helpful for others.