How to open/close Drawer from another component in React-Native - reactjs

Question

I have a mobile app which has components base structure. For showing Drawer globally i've implemented it in my Home.js like code below, but my drawer toggler must be in my Header component that inside my Container component.
How it possible to send instance of main drawer to Header component and control opening/closing status?
Home.js code:
class Home extends Component {
render() {
const drawerContent = <DrawerComp />;
return (
<Drawer
ref={comp => {
this.drawer = comp;
}}
drawerWidth={250}
drawerContent={drawerContent}
type={Drawer.types.Overlay}
drawerPosition={Drawer.positions.Right}
maskAlpha={0.05}
onDrawerOpen={() => {
console.log("Drawer is opened !");
}}
onDrawerClose={() => {
console.log("Drawer is closed !");
this.props.dispatch(displayDrawer());
}}
>
<Container>
<StatusBar barStyle="light-content" />
<Header drawer={this.drawer} />
<TouchableHighlight
underlayColor="#118d95"
onPress={this.handleDisplayDrawer}
>
<Text>Open Right Drawer</Text>
</TouchableHighlight>
</Container>
</Drawer>
);
}
}
Header component:
class Header extends Component {
handleDisplayDrawer = () => {
//
};
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this.handleDisplayDrawer}
style={styles.colSmall}
underlayColor="#ffffff"
>
<Image
style={styles.icon}
resizeMode="contain"
source={require("./images/icon-menu.png")}
/>
</TouchableHighlight>
</View>
);
}
}

Answer 1

Pass function to Header component which calls that function when you want.
class Home extends Component {
toggleDrawer = () => {
this.drawer.toggle(); // edit this according to drawer library
}
render() {
<Header onMenuPress={this.toggleDrawer} />
}
}
class Header extends Component {
render() {
<TouchableHighlight onPress={this.props.onMenuPress}>
<Image />
</TouchableHighlight>
}
}

Answer 2

You can write a setDrawerState function in Drawer.js. that actually closes the drawer. Something like
setDrawerState(isOpen) => {
this.setState({
isOpen,
})
}
In Your home.js , you already have ref to drawer component .
you can write following function.
close = () => {
this.drawer.setDrawerState(false)
}
open = () => {
this.drawer.setDrawerState(true)
}
<Header
close={this.close}
open={this.open}
/>

Answer 3

I struggled alot to find a solution so, If you are using custom header component then my suggestion is to render customer header in each screen and toggle it using:-
navigation.openDrawer();