Nascent Political Miscreant
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-native-popover-menupublic

    PRs Welcome

    React Native: Popover Menu

    This library is a ReactNative bridge around native popup/popover menus. It allows you to create simple popup menus.

    Note: Android SDK 27 > is supported

    Android: zawadz88/MaterialPopupMenu
    iOS: liufengting/FTPopMenu

    Getting started

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

    $ react-native link react-native-popover-menu

    $ react-native link react-native-vector-icons

    Usage

    import RNPopoverMenu from 'react-native-popover-menu';
     
    import Icon from 'react-native-vector-icons'
     
    • React Way
     
    let copy = <Icon family={'FontAwesome'} name={'copy'} color={'#000000'} size={30} />
    let paste = <Icon family={'FontAwesome'} name={'paste'} color={'#000000'} size={30} />
    let share = <Icon family={'FontAwesome'} name={'share'} color={'#000000'} size={30} />
     
    <RNPopover visible={this.state.visible} reference={this.ref}>
      <RNPopover.Menu label={"Editing"}>
        <RNPopover.Menu label={"Copy"} icon={copy} />
        <RNPopover.Menu label={"Paste"} icon={paste} />
      </RNPopover.Menu>
      <RNPopover.Menu >
        <RNPopover.Menu label={"Share"} icon={share} />
      </RNPopover.Menu>
    </RNPopover>;
    • API Way
     
     
    let copy = <Icon family={'FontAwesome'} name={'copy'} color={'#000000'} size={30} />
    let paste = <Icon family={'FontAwesome'} name={'paste'} color={'#000000'} size={30} />
    let share = <Icon family={'FontAwesome'} name={'share'} color={'#000000'} size={30} />
     
    let menus = [
      {
        label: "Editing",
        menus: [
          { label: "Copy", icon: copy },
          { label: "Paste", icon: paste }
        ]
      },
      {
        label: "Other",
        menus: [
          { label: "Share", icon: share }
        ]
      },
      {
        label: "",
        menus: [
          { label: "Share me please" }
        ]
      }
    ]
     
    RNPopoverMenu.Show(this.ref, {
      title: "",
      menus: menus,
      onDone: selection => { },
      onCancel: () => { }
    });
     

    Note:

    • We have added family prop for Icon class, please make sure that you pass the props

    Props

    • Props: Generic
    Prop Type Default Note
    title string Title of popover section
    menus array Array of Menus
    onDone(sectionSelection, menuSelection) func It is called when menu is selected
    onCancel func It is called when we close the popover
    • Props: Android
    Prop Type Default Note
    theme string light Light & Dark theme support only on Android Platform
    • Props: iOS
    Prop Type Default Note
    tintColor string Color of tint
    perferedWidth number Prefered Width of the Popover
    rowHeight number Height of the menu row

    Credits

    Contribution

    Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

    License

    This library is provided under the Apache 2 License.

    RNPopoverMenu @ Pranav Raj Singh Chauhan

    Keywords

    install

    npm i react-native-popover-menu

    Downloadsweekly downloads

    109

    version

    0.0.11

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar