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.

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.

• javascript
• react-native
• react-navigation

• Try by adding <StatusBar hidden/> in render method of your main screen. – Aditya Commented May 25, 2018 at 11:54

2 Answers 2

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.

Try the static function Status Bar. You might need to convert the ponent to a React Component/Pure Component. Try it with and without converting it.

ponentDidMount(){
 StatusBar.setHidden(true,true);
}