React Native Drawer change color of status bar

Question

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.

score 1 · Accepted Answer · answered Jul 23 '19 at 19:37

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

score 0 · Answer 2 · answered Jul 24 '19 at 02:47

Because your code gives you a marginTop as high as the status height line, it must be white, which is the basic color.

You can remove style.drawer and marginTop

const drawerStyles: DrawerStyles = {
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0e0e0'
  },
};

React Native Drawer change color of status bar

2 Answers2