Navigation with modal and drawer

Question

I'm using react-native-router-flux for navigation in my react-native app. I've got this in my router.js file --

render() {
    return (
        <Router navigationBarStyle={styles.navBar}
            titleStyle={styles.navBarTitle}
        >

            <Scene key="modal" component={Modal}>
                <Scene key="drawer" component={Drawer} open={false} type="replace">

                    <Scene key="home" component={Home} title="HOME" hideNavBar type="replace" />
                    <Scene key="myorder" component={MyOrder} title="MY ORDERS" type="replace" />
                    <Scene key="bookachef" component={BookAChef} title="BOOK A CHEF" type="replace" />
                    <Scene key="offers" component={Offers} title="OFFERS" type="replace" />
                    <Scene key="terms" component={Terms} title="TERMS & CONDITIONS" />
                    <Scene key="mywishlist" component={MyWishlist} title="WISHLIST" type="replace" />
                    <Scene key="myaddresses" component={MyAddresses} title="Addresses" type="replace" />
                    <Scene key="faq" component={FAQ} title="FAQ" type="replace" />
                    <Scene key="aboutus" component={AboutUs} title="About Us" type="replace" />

                </Scene>
                <Scene key="auth" initial>
                    <Scene key="login" panHandlers={null} component={Login} title="Login" hideNavBar={true} />
                    <Scene key="signup" panHandlers={null} component={SignUp} title="SignUp" hideNavBar={true} />
                    <Scene key="terms" panHandlers={null} component={Terms} title="TERMS & CONDITIONS" />
                </Scene>
                <Scene key="popUpImagePicker" panHandlers={null} component={PopUpImagePicker} title="PopUpImagePicker" hideNavBar={true} />
            </Scene>

        </Router>
    );
}

Now, after login, I want to have the usual flow i.e. to open the app with the drawer. The problem is, I can open the "Home" screen by

Actions.drawer() .

But I cannot open the drawer even by Actions.refresh({key: "drawer", open: true}) or by sliding from the screen. What am I doing wrong, I cannot figure that out. I'm using "react-native-router-flux": "^3.41.0"

dotcomXY · Answer 1 · 2017-07-21T07:28:19.293

To navigate to the home scene after the login, you can call Actions.drawer(), but before you have landed in any of the scenes within the drawer scene, the sliding from the screen would not work, because your Drawer component hasn't get mounted to the screen yet.

As for not be able to slide the drawer out, try removing the type="replace" props on your drawer scene.

As for calling Actions.refresh({ key: 'drawer', open: true }) is not bringing out the drawer component issue, make sure in your Drawer component, you are setting the open props, you can take a look at the RNRF's v3 drawer example, if you forgot to setting the open props, your Actions.refresh will update the navigationState but won't be able to control the open/close state of the drawer component.

Navigation with modal and drawer

1 Answers1