Version: Next

Side Menu

SideMenu provides access to destinations in the app from an easy to access menu which is accessible to the user via horizontal swipe gesture or a menu button.

Opening programmatically#

To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.

The following snippet shows how to open the left side menu. The menu is opened by setting its visible option to visible.

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

Opening via the hamburger menu#

The most common use case is to open the side menu by pressing the hamburger button at the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.

const React = require('react');
const Navigation = require('react-native-navigation');
const { View, Text } = require('react-native');

class SideMenuCenterScreen extends React.Component {
  static options() {
    return {
      topBar: {
        leftButtons: {
          id: 'sideMenu',
          icon: require('./menuIcon.png')
        }
      }
    };
  }

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

  render() {
    return (
      <View>
        <Text>Click the hamburger icon to open the side menu</Text>
      </View>
    );
  }

  navigationButtonPressed({ buttonId }) {
    if (buttonId === 'sideMenu') {
      Navigation.mergeOptions(this.props.componentId, {
        sideMenu: {
          left: {
            visible: true
          }
        }
      });
    }
  }
}

Pushing to the center layout from a menu#

A common use case when using SideMenus is to interact with the center layout, e.g. pushing a screen to a stack in the center layout when a user clicks on a button from one of the menus.

In order to interact with the stack, we'll first assign it a predefined id. For example:

sideMenu: {
  center: {
    stack: {
      id: 'CenterStack',
      children: []
    }
  },
  left: {
    ...
  }
}

Now that we've defined an id for out stack, we can go ahead and push our screen to it. If we're pushing while the SideMenu is open, we'll need to make sure we close it by updating the visibility option of the relevant menu (left or right).

Navigation.push('CenterStack', {
  component: {
    name: Screens.Pushed,
    options: {
      sideMenu: {
        left: {
          visible: false
        }
      }
    }
  }
});