Opening SideMenu on button press

Question

I'm currently trying to upgrade to react-native-navigation V2 from V1 and got stuck trying to find a way to toggle side menus on top bar button press.

My app starts with

Navigation.setRoot({
        root: {
          sideMenu: {
            left: {
              component: {
                name: 'testApp.SideDrawer',
                passProps: {
                  text: 'This is a left side menu screen'
                }
              }
            },
            center: {
              bottomTabs: {
                ...
              }
            },
          },
        },

      });

Is there a way to do it in current version?

Answer 1

Turned out you can't use this.props.navigator.toggleDrawer in V2 and should use Navigator.mergeOptions instead to change drawer visibility. In my case:

1) First assign an Id to the drawer (id: leftSideDrawer)

Navigation.setRoot({
            root: {
              sideMenu: {
                left: {
                  component: {
                    name: 'testApp.SideDrawer',
                    id: 'leftSideDrawer'
                  }
                },
                center: {
                  bottomTabs: {
                    ...
                  }
                },
              },
            },
          });

2) Use it in to change drawer visibility

Navigation.mergeOptions('leftSideDrawer', {
      sideMenu: {
        left: {
          visible: true
        }
      }
});