React Native Drawer change color of status bar

I'm using the React Native Drawer package. When using it, the the background color of the iOS status bar is changed to white.

Here is an example of my code:

The demo is available here: https://snack.expo.io/@dennismadsen/react-native-drawer-status-bar-issue

  render() {
    return (
      <Drawer
        ref={ref => (this._drawer = ref)}
        content={<AssetExample />}
        type="overlay"
        styles={drawerStyles}>
        <View>
          <Button
            onPress={this.openControlPanel}
            title="Open drawer"
            color="blue"
          />
        </View>
      </Drawer>
    );
  }

How can I fix this and make the background automatically use the grey background from the content area? If I remove the Drawer from the render-method the background color of the status bar gets grey as expected.

You can use Fragment (from React) and SafeAreaView (from react native) as below:

    import React,{Fragment} from 'react';
    import { Button, Text, View, StyleSheet, SafeAreaView } from 'react-native';
    import Constants from 'expo-constants';
    import Drawer, { DrawerStyles } from 'react-native-drawer';

    import AssetExample from './components/AssetExample';

    export default class App extends React.Component {

      openControlPanel = () => {
        this._drawer.open();
      };

      render() {
        return (
          <Fragment>
           <SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
           <Drawer
            ref={ref => (this._drawer = ref)}
            content={<AssetExample />}
            type="overlay"
            styles={drawerStyles}>
            <View>
              <Button
                onPress={this.openControlPanel}
                title="Open drawer"
                color="blue"
              />
            </View>
           </Drawer>
          </Fragment>
        );
      }
    }

    const drawerStyles: DrawerStyles = {
      drawer: {
        marginTop: Constants.statusBarHeight,
      },
      main: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e0e0e0',
        marginTop: Constants.statusBarHeight,
      },
    };

you can use any color to safeAreaView and it will be apply to status bar. For more details visit https://medium.com/reactbrasil/react-native-set-different-colors-on-top-and-bottom-in-safeareaview-component-f008823483f3