react-native-navigationwix-react-native-navigationreact-native-navigation-v2

How to add sidebar drawer with react native navigation v2?


With react-native-navigation v1 you can set up a drawer like this:

drawer: {
    left: {
        screen: 'ScreenName'
    }
}

In docs of react-native-navigation they mention that drawer is still supported, drawer support

but there in no example of its usage. I tried with same way as in v1, but it didn't work. Is there anyone who has achieved it somehow?


Solution

  • In RNN V2 and up you can add Drawer with simply using sideMenu instead of old drawer option Ex :

    Navigation.events().registerAppLaunchedListener(() => {
      Navigation.setRoot({
        root: {
          sideMenu: {
            id: "sideMenu",
            left: {
              component: {
                id: "Drawer",
                name: "navigation.Drawer"
              }
            },
            center: {
              stack: {
                id: "AppRoot",
                children: [{
                  component: {
                    id: "App",
                    name: "navigation.AppScreen"
                  }
                }]
              }
            }
          }
        }
      });
    }
    

    Take a look at this and navigate to sideMenu

    and in order to close the drawer use Navigation.mergeOptions and pass visible false like this

    <Button onPress={this.hideSideMenu}/>
    
    hideSideMenu() {
      Navigation.mergeOptions(this.props.componentId, {
        sideMenu: {
          left: {
            visible: false
          }
        }
      });
    }