How to integrate with React navigation?

[hungdev]

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]

+1

[AndreySukhov]

+1

[AndreySukhov]

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