carautenbach / react-native-default-menu

Menu component for showing default OS menus. Uses ActionSheetIOS for IOS and UIManager for Android.

react-native-default-menu

Menu component for showing default OS menus. Uses ActionSheetIOS for IOS and UIManager for Android

Installation

npm i react-native-default-menu

or

yarn add react-native-default-menu

Demo

Usage

...
import Menu from 'react-native-default-menu';
...
const options = ['Edit', 'Remove'];
...
onPopupEvent = (eventName, index) => {
  // on IOS it returns the option name as first argument
  // on Android it returns 'itemSelected' or 'dismissed' as first argument
  // the second argument is the index of the selected option. If cancelled, it returns undefined as index
  console.log('index', index);
  let optionName;
  if (index >= 0) optionName = options[index]; // get option name from 'options' array
  console.log('selected option', optionName);
};
...
render() {
  return(
    <View>
      <Menu options={options} onPress={this.onPopupEvent}>
        <Text>click me</Text>
      </Menu>
    </View>
   )
}

Complete Example

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Menu from 'react-native-default-menu';
import Icon from 'react-native-vector-icons/MaterialIcons';

const options = ['Edit', 'Remove'];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      eventName: 'none',
      index: 'none',
      selectedOption: 'none',
    };
  }

  onPopupEvent = (eventName, index) => {
    let selectedOption = 'none';
    if (index >= 0) selectedOption = options[index];
    this.setState({ eventName, index, selectedOption });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={{ padding: 20 }}>
          <Menu options={options} onPress={this.onPopupEvent} style={{height: 30, width: 30}}>
            <Icon name={'more-vert'} size={24} color={'grey'} />
          </Menu>
        </View>
        <View style={{ padding: 15 }}>
          <Text style={styles.text}>{`event: ${this.state.eventName}`}</Text>
          <Text style={styles.text}>{`index: ${this.state.index}`}</Text>
          <Text style={styles.text}>{`selected option: ${this.state.selectedOption}`}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  text: { fontSize: 30 },
});