React Native: Closing Drawer Upon Scene Navigation Using React Native Router Flux

Question

I am using the following components in creating a React Native app:

• React Native Router Flux
• React Native Drawer

For the drawer, I would like it to close when I press on a link to navigate to a new scene.

My drawer content is defined like so, using react-native-router-flux 'Actions':

<ListItem>
    <Text onPress={Actions.treatments}>Treatments</Text>
</ListItem>

The navigation part works, but where I'm lost is how to trigger the drawer to close upon pressing one of the links. How could I accomplish this?

Answer 1

Found the answer after some trial and error:

<ListItem>
    <Text onPress={() => { Actions.treatment(); this.context.drawer.close(); }}>Treatment</Text>
</ListItem>

In my case, closing the drawer required context. In other cases, it might be as simple as drawer.close();

Answer 2

my solution pass props from drawer to {this.drawer.close() }/> and then, in Menupanel Component use this.props.closePanel() .

<Drawer
        type="overlay"
        side="right"  
        tapToClose={true}
        openDrawerOffset={0.2}
        ref={(ref) => this._drawer = ref}
        content={<ControlPanel  closePanel={ ()=>{this.drawer.close() } />}
        >
        </Home>
</Drawer>