How to force react navigation drawer to come over header and Statusbar in 5.X

Question

Here is my code:

function DrawerContent() {
    return (
        <View style={{ flex: 1,}}>
            <Text>Drawer content</Text>
        </View>
    );
}
const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            drawerContent={() => <DrawerContent />}
            drawerType={'front'}
            drawerStyle={{width: '80%'}}
        >
            <Drawer.Screen name={'home'} component={Home} />
        </Drawer.Navigator>
    );
};

It looks like this below: the statusbar color is white and it cover the drawer background.

and what i want: the drawer background cover the statusbar