2

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?

Dmitry Oleinik
  • 700
  • 1
  • 7
  • 20

2 Answers2

9

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
        }
      }
});
Dmitry Oleinik
  • 700
  • 1
  • 7
  • 20
  • 1
    how to close it? how to check if it is already visible and make it un-visible? – Zorox Oct 17 '18 at 09:15
  • @Zorox have you tried changing visible back to false? In my app I close the side drawer by swiping it to the left. – Dmitry Oleinik Oct 18 '18 at 10:09
  • @Zorox I'm struggling with the same thing. Burger-button should first open it and on second click close it again. Was hoping for some kind of state that we could read from ... did you find a good solution for this one? – Philipp Kyeck Nov 07 '18 at 15:51
2

You can set a boolean in your component to identify the current state of the side drawer screen and then you can use that boolean to set the visibility of the drawer with mergeOptions. Basically toggle! Below is the snippet to achieve this.

constructor(props) {
   super(props);
   this.isSideDrawerVisible = false; 
   Navigation.events().bindComponent(this);
}

navigationButtonPressed({ buttonId }) {
   if (buttonId === "openSideDrawer") {
   (!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
   Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
      left: {
        visible: this.isSideDrawerVisible,
      }
    }
  });
 }
}
codvlpr
  • 122
  • 4
  • 1
    ITs work on only click on toggle button but outside the its not worked. – Harleen Kaur Arora Feb 25 '19 at 12:58
  • To elaborate a little on @HarleenKaurArora response. DRYness aside, the small issue with keeping the sideMenu state in the component is that if the sideMenu it is opened or closed by events outside of any explicitly being listened to in the component, then the local state gets out of sync with that being displayed by RNN. For instance; when the sideMenu is dragged open, then closing it via the button (incorrectly) requires two taps. While if it's been closed by touching the sideMenu area, then subsequently re-opening (incorrectly) requires two touches. – shufflingb Mar 06 '19 at 17:32