Is it possible to open another menu with a menu option?

Question

Currently I can open a menu by clicking a menu trigger and that works well. I'm now trying to implement a process so that I can open menu-a, select an option from menu-a which will then open menu-b using the slide in method. Is this possible with this module?

Answer 1

You can use menu as controlled component to declare which menus should be opened and which closed. For example:

export default class ControlledExample extends Component {
  state = {
    opened1: false,
    opened2: false,
  }

  render() {
    return (
      <MenuContext style={{ flexDirection: 'column', padding: 30 }}>
        <Menu
          opened={this.state.opened1}
          onBackdropPress={() => this.setState({ opened1: false })}
          onSelect={() =>
            this.setState({
              opened1: false,
              opened2: true,
            })}
        >
          <MenuTrigger
            onPress={() => this.setState({ opened1: true })}
            text="Select option"
          />
          <MenuOptions>
            <MenuOption value={1} text="One" />
            <MenuOption value={2} text="Two" />
            <MenuOption value={3} text="Three" />
          </MenuOptions>
        </Menu>
        <Menu
         renderer={SlideInMenu}
          opened={this.state.opened2}
          onBackdropPress={() => this.setState({ opened2: false })}
          onSelect={() => this.setState({ opened2: false })}
        >
          <MenuTrigger />
          <MenuOptions>
            <MenuOption value={1} text="One *" />
            <MenuOption value={2} text="Two *" />
            <MenuOption value={3} text="Three *" />
          </MenuOptions>
        </Menu>
      </MenuContext>
    )
  }
}