React-native-router-flux: Closing react-native-drawer upon navigation to new scene

[wcwhitehead]

I have integrated react-native-drawer with react-native-router-flux but I cannot get the drawer to close upon navigation to a new scene. Navigation seems to work fine, but the drawer remains open. How would I get this to close?

[ailinykh]

It should be something like this

<TouchableHighlight onPress={() => {this.drawer.close(); Actions.about();}}>

Could you provide some source code for more details

[chrissm79]

I gave this a try... it starts to navigate to the scene while closing the drawer, then navigates back to the previous scene (like the back button was clicked halfway through the transition). If you click again, you get the error:

navigationState.children[2].key "scene_name" conflicts with another child!

[ailinykh]

@chrissm79 yes, it is. I got exactly same behaviour and i guess it should be proper way to resolve this using navigationState and dispatching appropriate actions. But unfortunately i have not enough time/knowleges to find a better solution than setTimeout

<TouchableHighlight onPress={() => {this.drawer.close(); setTimeout(() => Actions.about(), 500);}}>

This is not good solution, but it works

[chrissm79]

@ailinykh Thanks for the suggestion, I went that route as well for now. Maybe a better solution will be baked in eventually but at least this works.

[DClark5218]

Hey guys, I'm using this fix for now too. Except, I am finding it to look a little clunky and no longer smooth animation for a seamless transition. Does anyone else have this issue?

[garrettbland]

I found a solution to this issue. I used componentWillMount in the next scene and close the drawer from there. Example...
componentWillMount(){ Actions.refresh({key: 'drawer', open: value => !value}); }
@wcwhitehead @ailinykh @DClark5218 @chrissm79
The transition is super smooth and not clunky in the slightest

[DClark5218]

@garrettbland this seems like a really simple solution that could solve the problem. I'm going to refactor my code and let you know how it goes!

[DClark5218]

@garrettbland I tried this, but I get a weird view of the previous scene in the sidebar area? It doesn't seem to work for me.

[garrettbland]

What does your router look like?

[nguyenvanphuc2203]

my solution
pass props from drawer to
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>

[Mifayo]

componentWillMount(){ Actions.refresh({key: 'drawer', open: value => !value}); }

which version of router flux
any solution for version 4.0.5

[jaykainlabs]

Hi guys,
I added this line of code Actions.refresh({key: 'drawer', open: value => !value}); to my componentdidmount function, but the drawer remains open when I press the back button, it does not seem like the drawer is being closed.
Any ideas what went wrong?

Thanks.

[acaraty]

I don't know why this issue is closed, I'm using the version 4.0.6 and I'm still unable to close the drawer when pushing a new scene.

None of the solutions above are working.

Any tips ?