0

I have a topBar with a button that toggles the Side Menu.

I have registered a navigationButtonPressed action as below 

navigationButtonPressed({ buttonId }) {
    switch (buttonId) {
      case 'sideMenuButtonId':
        Navigation.mergeOptions(this.props.componentId, {
          sideMenu: {
            left: {
              visible: true
            }
          }
        });
        break
      default:
        break
    }
  }

But in this case, the button only makes the sideMenu visible, and Im trying to use it so it toggles the menu open and closed. So i replaced the above with a variable approach seen below..

var sideMenuVisible = false

navigationButtonPressed({ buttonId }) {
    switch (buttonId) {
      case 'sideMenuButtonId':
        sideMenuVisible = !sideMenuVisible
        Navigation.mergeOptions(this.props.componentId, {
          sideMenu: {
            left: {
              visible: sideMenuVisible
            }
          }
        });
        break
      default:
        break
    }
  }

Which works fine if the user only uses the button to open and closed the sideMenu, but the user can also open/close the menu by swiping to open the menu as well as tapping out the menu to close it.

Is there a way to check the visibility of the sideMenu so I can properly use an action to open/close the menu on command?

Simon
  • 2,065
  • 3
  • 21
  • 28

1 Answers1

0

It can done much more simple. Think you should create it as a state, because the component have to know, it should be rerendered, when the state change. So something like

state = { isOpen: false };

toggleSidebar = () => {
  this.setState({ isOpen: !isOpen })
}

And now, you should call the toggleSidebar function when you click the button

jonask
  • 679
  • 2
  • 6
  • 21
  • thanks jonask. Yeah that probably is a better approach to handle the button click, but the slightly bigger problem effectively knowing the visibility of the sideMenu since it can be closed/open in multiple ways. So using a variable to manage the `isOpen` state is reliable half the time, when the user uses the button/action, and not using slide or swipe gestures (for instance) – Simon Dec 28 '18 at 10:11
  • But it still sounds like you should change it to be a state. You won't see any effect changing a variable, because your component won't rerender – jonask Dec 28 '18 at 15:15
  • @Simon Can you share me code to navigate between screen from drawer? I'm having problem handling swipe gestures. Thanks. – Habi Jan 26 '19 at 17:53