How to close react native popup menu?

Question

I'm using your react-native-popup-menu for logout button. when button clicked the authentication deleted and screen will go to login . but the menu still left.

How to close this menu when screen switched?

<Menu>
  <MenuTrigger>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

Originally asked by bexoss on react-native-popup-menu GitHub.

score 6 · Accepted Answer · answered Mar 14 '17 at 10:42

All other answers here will work. Here is another (simpler) solution to the problem depending on what are your requirements.

You are handling logout event in Text component and therefore handlers to close menu are not triggered. Try to pass it to the onSelect property of MenuOption:

<MenuOption onSelect={() => this.props.onLogout()}>
  <Text>logout</Text>
</MenuOption>

Note: If you returned false from your handler, menu would not close.

score 2 · Answer 2 · edited Mar 14 '17 at 08:56

As mentioned in their documentation, you should use the visible prop in your Menu component. You will need to adapt your code like this:

<Menu opened={this.state.opened}>
  <MenuTrigger onPress={() => this.setState({ opened: true })}>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
        this.setState({ opened: false })
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

And I think you will need to define the default state of your component like this:

 constructor(props) {
   super(props)
   this.state = { opened: false }
 }

You can also find a full example here

This approach will not animate the closing of the menu. If you want to use the animate features use the close method. — Shivam Sinha, Mar 14 '17 at 08:42

score 2 · Answer 3 · answered Mar 14 '17 at 08:40

2

https://github.com/instea/react-native-popup-menu/blob/master/doc/api.md

The API document above states that there is a close() method.

So what you need to do is just declare the ref attribute to access your Menu component directly. E.g "menuRef":

<Menu uref='menuRef'>
  <MenuTrigger>
    <Icon
      name='more-vert'
      color='#fff'
    />
  </MenuTrigger>
  <MenuOptions>
    <MenuOption value={1}>
      <Text onPress={() => {
        this.props.onLogout()
      }}>logout</Text>
    </MenuOption>
  </MenuOptions>
</Menu>

and then you can simply call from any where in your current component: this.refs.menuRef.close();

This approach will also animate the closing.

answered Mar 14 '17 at 08:40

Shivam Sinha

4,924
7
43
65

As described in react-native docs, you should avoid to use refs if possible. More [here](https://facebook.github.io/react/docs/refs-and-the-dom.html) – Tobias Lins Mar 14 '17 at 08:43
There are advantages and disadvantages of both approaches. If you are concerned about UX you would go with the ref approach in this case, since it has animation feature associated with it. If you are concerned about following best practices go with state. – Shivam Sinha Mar 14 '17 at 08:47

How to close react native popup menu?

3 Answers3

Linked