[Android] Provide a PopupMenu component

Currently there is no way to specify an overflow menu icon for Navigator.NavigationBar (or is there?). I can add a custom button, sure, but I cannot find a way to show a menu. Does such a functionality exist?

The Menu component is widely used on Android, and it’ll be awesome to have it.

[chirag04]

context popupMenu is already exposed on UIManager. I have a small wrapper that adds a vertical hamburger menu and shows the popup on it like the youtube app.

import React from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from './styles';

const {
  View,
  UIManager,
  findNodeHandle,
  TouchableOpacity,
} = React;

const ICON_SIZE = 24;

class PopupMenu extends React.Component {
  handleShowPopupError = () => {
    // show error here
  };

  handleMenuPress = () => {
    const { actions, onPress } = this.props;

    UIManager.showPopupMenu(
      findNodeHandle(this.refs.menu),
      actions,
      this.handleShowPopupError,
      onPress,
    );
  };

  render() {
    return (
      <View>
        { this.props.children }
        <TouchableOpacity onPress={this.handleMenuPress} style={styles.touchableContainer}>
          <Icon
            name="android-more-vertical"
            size={ICON_SIZE}
            color={'grey'}
            ref="menu"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

PopupMenu.propTypes = {
  actions: React.PropTypes.array.isRequired,
  onPress: React.PropTypes.func.isRequired,
  children: React.PropTypes.object.isRequired,
};

export default PopupMenu;

<PopupMenu actions=['1', '2'] onPress={() => { // }}>
      <YourListItem .... />
</PopupMenu>

[wvengen]

@terrysahaidak That’s a good point. As a somewhat ugly workaround I’m now using a Picker with an opacity of zero and a fixed width, positioning it on top of an icon (though not in a NavigationBar). I’d love it to be possible to specify an element for rendering the Picker button, perhaps something for a new issue.