How to change background color of drawer in react-navigation fully

Question

How can I change Background Color of the drawer fully? I don't need to change drawer items need to change the background color of the drawer fully. By default, it's white while I need to make it Green. Is there any demo example?

Answer 1

Old question, but this may help people that are looking for this solution. On createDrawerNavigator you have a drawerConfig property called drawerBackgroundColor.

Example:

import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import Home from '../screens/Home';
import Screen2 from '../screens/Screen2';

export default createDrawerNavigator({
    Home,
    Screen2
}, {
    drawerPosition: 'left',
    drawerBackgroundColor: '#0000FF',
});

You can read more about it, on React Navigation documentation: https://reactnavigation.org/docs/en/drawer-navigator.html

Answer 2

This Current example can help you , This the DrawerNavigtor using DrawerContent , Need to change the style of DrawerContent

const Main = DrawerNavigator({
  home: { screen: HomePage },
}, {
  drawerWidth: 250,
  drawerPosition: 'right',
  contentComponent: props => <DrawerContent {...props} />,
});

export default Main; You can Change the style by using the this code below

class DrawerContent extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={{ flex: 1 }}>
          <Button transparent info onPress={() => { this.handlechange(); }}>
            <Text style={{ fontSize: 16 }}>Change Email</Text>
          </Button>
        </View>
      </ScrollView>
    );
  }
}


const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'Green',
  },
};

export default DrawerContent; This can change the background color