How to style the Drawer - Expo navigation - react-native

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;