/react-native-pop-menu

A popup menu component for Android and iOS

Primary LanguageJavaScript

npm npm npm

react-native-pop-menu

A popup menu component for Android and iOS.

Installation

$ npm install react-native-pop-menu --save

Demo

$cd demo

$npm install

$react-native run-ios

Basic Usage

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{ position: 'absolute', right: 12, top: 32 }}
                          onPress={() => {
                            this.setState({
                              menuVisible: true
                            });
                          }}>
          <Text>Menu</Text>
        </TouchableOpacity>
        <Menu visible={this.state.menuVisible}
              onVisible={(isVisible) => {
                this.state.menuVisible = isVisible
              }} 
              data={[
                {
                  title: 'MenuItem 1',
                  onPress: () => {
                    //todo something...
                  }
                },
                {
                  title: 'MenuItem 2',
                  onPress: () => {
                    //todo something...
                  }
                },
              ]} />
      </View>
    );
  }

API

Props:

prop type description default
data Array Array that include object which contain 'title' and 'onPress' undefined
top Number Menu top position 74
right Number Menu right position If not set 'top' and 'right', right = 12
left Number Menu left position If not set 'top' and 'right', right = 12
visible Bool Determines whether your Menu is visible true
onVisible Function The 'onVisible' callback is called when the Menu's visible changed undefined
arrowPosition String Menu arrow's position, one of 'topRight', 'topLeft', 'topCenter' 'topRight'
contentStyle View.propTypes.style Edit the Menu's stylecd { backgroundColor: defaultColor }