How to style the Drawer - Expo navigation

Question

I am new to react native. I was trying to add a drawer navigator, and by default it's blue, is there a way to change this color? I am using the native base Library, Here is a screenshot and snippets of my codes to clarify what I'm asking. Thanks Drawer component in my app.js is structured like this:

 const CustomDrawerComponent = (props) => ( <SafeAreaView style={{ flex:1, marginTop:12 }}> <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent:'center' }}> <Image source={require('./assets/icon.png')} style={{height:120,width:120,borderRadius:60}}/> </View> <ScrollView> <DrawerItems {...props}/> </ScrollView> </SafeAreaView> ) 

Here is one of the screens too:

 class LibraryScreen extends React.Component { static navigationOptions = { drawerIcon : ({tintColor}) => ( <Icon name="home" style={{fontSize:24, color:tintColor}}/> ) } render() { return ( <View style={styles.container}> <Header> <Left style={{justifyContent:"flex-start",flex:1,marginTop:20}}> <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/> </Left> </Header> <View style={{flex:1, alignItems:'center', justifyContent:'center'}}> <Text>Library Screen</Text> </View> </View> ); } } export default LibraryScreen; 

Answer 1

Add style to the <Header> component

<Header
      style={{
        backgroundColor: 'red',
      }}>

Full code

class LibraryScreen extends React.Component {
  static navigationOptions = {
  drawerIcon : ({tintColor}) => (
    <Icon name="home" style={{fontSize:24, color:tintColor}}/>
  )
 } 
 render() {
  return (
      <View style={styles.container}>
       <Header
        style={{ backgroundColor: 'red' }}>
        <Left style={{justifyContent:"flex-start",flex:1,marginTop:20}}>
          <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
        </Left>
      </Header>
      <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
        <Text>Library Screen</Text>
      </View>
    </View>
    );
  }
}

export default LibraryScreen;