Create Popover Menu For React Native Inspired By Material Design

Category: React React Navigation & Menu | July 19, 2021
Author: prscX
Official Page: Go to website
Last Update: July 19, 2021
License: MIT

react native popover menu

Description:

If you are looking to create popover menu for React Native application then, react-native-popover-menu library can be very useful for you. Because, this library provides you multiple styles of creating popover menu and it is light-weight and easy to integrate into your React Native project.

How can I use it?

1. First, you will need to install the library with npm, like this.

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

2. Then, import the component in your project.

import RNPopover from 'react-native-popover-menu';

3. Now, create the popover menu like this.

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>;