Combining Router and navigation Drawer

[avishayil]

Hi!
I'm trying to create a navigation drawer that will point his text elements to jump between screens.
For the matter, I'm using react-native-drawer by root-two.
Do you have any example or can give me some direction of how to combine those two? I can't seem to figure that out.
Thanks!

[aksonov]

It is interesting question, have you tried set Drawer as 'footer' prop for Router?

[JonnyBGod]

+1

[BigPun86]

Any progress on this? I am trying to use react-native-side-menu module with this router-flux. Actually it only works until i try to call any Actions.

My SideMenu combined with router-flux:

 <SideMenu
     menu={<Menu/>}
     isOpen={false} >
        <Router hideNavBar={true}>
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromBottomAndroid}
                        titleStyle={{color: 'white'}}
                        backButtonStyle={{tintColor: 'white'}}
                        navigationBarStyle={{backgroundColor: Colors.MAIN}}
                        barButtonText={{color: 'white'}}  />
              <Schema name="searchbar" sceneConfig={Navigator.SceneConfigs.FloatFromRight}
                        titleStyle={{color: 'white'}} backButtonStyle={{tintColor: 'white'}}
                        navigationBarStyle={{backgroundColor: Colors.MAIN}}/>
              <Route name="launch" component={Launch}/>
              <Route name="dashboard">
              <Router hideNavBar={false}>
                 <Route name='home' component={Dashboard} title={Strings('home')}         type='replace'
                               renderTitle={renderTitle}/>

       ..........
       ..........

It works up to the point when i try calling any actions from the Side Menu, where unfortunately nothing happens.

A Button in my Side Menu, which should call Home Screen:

 <Button onPress={Actions.home}>
        <View style={styles.row}>
             <Image style={styles.itemImage} source={require('../Assets/SideMenu/home_off.png')}/>
             <Text style={styles.itemText}>Home</Text>
        </View>
  </Button>

Any ideas why Actions won´t work?

[aksonov]

Try {()=>Actions.home()} because Actions.home may not defined during compile time...

[BigPun86]

Okay nice, it fixed it thanks. Now when i try to put my Side Menu over a nested Router, something like:

<Router hideNavBar={true}>
     <Schema ......
     <Route name="launch" component={Launch}/>
     <Route name="dashboard" component={Dashboard}/>
         <SideMenu
             menu.....>
                   <Router hideNavBar={false}>
                        <Route name='home' component={Dashboard} title={Strings('home')} type='replace'
                               renderTitle={renderTitle}/>
                        <Route ...../>
                        <Route ...../>
                        <Route ...../>
                    </Router>
           </SideMenu>
      <Route ...../>
      <Route ...../>
</Router>

It throws me this error when i try to call an Action:

And the NavigationBar loses it´s Styling...

[aksonov]

SideMenu should pass its 'router' prop to his children, otherwise router hierarchy would be broken.

[BigPun86]

Worked, thanks!

[rturk]

Hi @BigPun86 can you share your code? I'm trying to build similar logic with a nested tabbar. @sibeliusseraphini

[JonnyBGod]

An example would be helpful.

[artem-russkikh]

+1

[GarrettSmith]

It took me awhile but I got to the bottom of this.

My top level render looks like this.

<Router>
  <Route name="without-drawer"/>
  <Route name="main">
   <Drawer>
      <Router>
        <Route name="with-drawer-a"/>
        <Route name="with-drawer-b"/>
      </Router>
    </Drawer>
  </Route>
</Router>

My drawer's render function looks like this.

<DrawerLayout>
   {React.Children.map(children, c => React.cloneElement(c, {route: this.props.route}))}
</DrawerLayout>

[BigPun86]

Hey there. This is how i use the Drawer/SideMenu. In my Main Router i setup as usual my routes. Then i have a nested router Dashboard where i need the Drawer/SideMenu

        <Router hideNavBar={true}>
            <Schema name="modal" sceneConfig=......................./>
            <Schema name="default" sceneConfig=.............../>
            <Schema name="searchbar" sceneConfig=.............../>

            <Route name="dashboard" schema="dashboard">
                <Router hideNavBar={false}>
                    <Route name='home' component={ Routes.Dashboard }  title={translate('dashboard')} type='reset'
                           renderTitle={renderTitle}/>
                    <Route name="chatAndGroups" component={ Routes.ChatAndGroups } title={translate('myGroups')}
                           renderTitle={renderTitle} renderLeftButton={renderBackButton}/>
                    <Route name="reviews" component={ Routes.Reviews} title={translate('reviews')}
                           renderTitle={renderTitle}
                           renderLeftButton={renderBackButton}/>
                    <Route name="weather" component={ Routes.Weather} title={translate('weather')}
                           renderTitle={renderTitle}
                           renderLeftButton={renderBackButton}/>
                </Router>
            </Route>
            <Route name="launch" component={Routes.Launch} initial={true}/>
            <Route name="tutorial" component={Routes.Tutorial}/>

            <Route name="disclaimer" component={ Routes.Disclaimer} title={translate('disclaimer')}
                   renderTitle={renderTitle}
                   renderLeftButton={renderBackButton}/>
            <Route name="login" component={ Routes.Login} title={translate('login')} showNavigationBar={false}
                   renderLeftButton={renderBackButton}/>
            <Route name="register" component={ Routes.Register} title={translate('createAccount')}
                   renderLeftButton={renderBackButton}/>
        </Router>
    )
}

In my Dashboard component i implemented the SideMenu:

export default class Dashboard extends Component {
constructor(props) {
    super(props);
}

render() {

    return (
        <SideMenu
            menu={<Menu />}
            isOpen={false}
        >
            <ContentView/>
        </SideMenu>
    )
}
}

[oviava]

@BigPun86 do you have a repo for this ? How does the navigator know to render your scene in ?!

[mmazzarolo]

Thank you @BigPun86, your solution is working for me.
If anyone needs an example I used the sidebar in this common pattern:

• A session screen that just checks if the user is already logged in on startup
• An auth screen where I manage signin/signup
• Many other screens where that show the true content of the app, all using the sidebar

Router.js

export default class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Route component={SessionScreen} name='session' type='replace' hideNavBar={true} initial={true} />
        <Route component={AuthScreen} name='auth' type='replace' />
        <Route name='main' hideNavBar={true} type='reset'>
          <SideDrawer>
            <Router>
              <Route component={PlaceScreen} name='place' title='Place' />
              <Route component={ItemScreen} name='item' title='Item' />
              ...
            </Router>
          </SideDrawer>
        </Route>
      </Router>
    )
  }
}

SideDrawer.js (I'm using 'react-native-drawer')

import Drawer from 'react-native-drawer'

class SideDrawer extends React.Component {
  render() {
    return (
      <Drawer
        type="overlay"
        content={<SideDrawerContent />}
        tapToClose={true}
        openDrawerOffset={0.2} 
        panCloseMask={0.2}
        closedDrawerOffset={-3}
        styles={{ drawer: drawerStyle, main: mainStyle }}
        tweenHandler={(ratio) => ({ main: { opacity: (2 - ratio) / 2 } })}
      >
        {React.Children.map(this.props.children, c => React.cloneElement(c, {
          route: this.props.route
        }))}
      </Drawer>
    )
  }
}

Be careful of #172 that you can fix by adding in AuthScreen.js:

componentWillUnmount() {
  // Fix https://github.com/aksonov/react-native-router-flux/issues/172
  Actions.currentRouter = null
}

[BigPun86]

@mmazzarolo nice example. I tried yours which works for me too even better than mine. But how do you pass the schema to the children? I tried this:

{React.Children.map(this.props.children, c => React.cloneElement(c, {
      route: this.props.route,
      schema: this.props.schema
    }))}

This is what worked to pass the navigationBarStyle, but i am not sure if passing the schema would be nicer...:

{React.Children.map(this.props.children, c => React.cloneElement(c, {
      route: this.props.route,
      navigationBarStyle: this.props.navigationBarStyle
    }))}