How to integrate with React navigation?
Opened this issue · 3 comments
hungdev commented
With many children of a stack, i want each child of the stack can open the drawer and disable drawer on some screen outside stack as login or sign in,..
how to do it?
thank you.
dev4xy commented
+1
AndreySukhov commented
+1
AndreySukhov commented
Solution worked for me
my app.js
...
openControlPanel = () => {
this._drawer.open()
};
closeControlPanel = () => {
this._drawer.close()
}
render() {
return (
<Drawer
ref={(ref) => this._drawer = ref}
...options
content={<SideMenu closePanel={this.closeControlPanel}/>}
>
<RootStack
/// for navigation in SideMenu component
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
///pass open drawer to navigation header
screenProps={{openDrawer: this.openControlPanel}}/>
</Drawer>
)
}
then, if you need burger, in screen component use
static navigationOptions = ({ navigation, navigationOptions, screenProps }) => {
return {
...
headerRight: (
<Burger handleClick={screenProps.openDrawer}/>
),
};
};
that's burger component
const Burger = (props) => {
return (
<View style={{padding: 10}}>
<TouchableHighlight
onPress={() => props.handleClick()}
underlayColor="rgba(255,255,255,0.4)">
...
</TouchableHighlight>
</View>
)
}
to navigate from side drawer contend used this approach from react navigation docs
https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
just for drawer content component (thats what navigatorRef
in RootStack
used for)
and pass close drawer method to side menu to manually close it