---
name: PopoverMenu
route: /Menus/PopoverMenu
menu: Menus
---

import { Playground, PropsTable } from 'docz'
import { Alert, View, Image } from 'react-native'
import { colors } from '@barcard/functions'
import { PopoverMenu, BaseText } from '../../src'
import { MenuProvider } from 'react-native-popup-menu'

## PopoverMenu

## About

Configurable popover menu with dynamic options and option selection handler.

## Basic Usage

<Playground>
  <MenuProvider>
    <PopoverMenu
      renderTrigger={() => (
        <Image
          source={{ uri: 'https://placekitten.com/g/100/100' }}
          style={{
            width: 100,
            height: 100,
            borderRadius: 50,
          }}
        />
      )}
      options={[
        {
          label: 'Say Hi',
          onSelect: () => alert('Hi'),
        },
        {
          label: 'Say Goodbye',
          onSelect: () => alert('Goodbye'),
        },
      ]}
    />
  </MenuProvider>
</Playground>

## Implementation Notes

The `MenuProvider` component must be removed from the implementation of
`PopoverMenu` and be placed as the top element in the App's render method
(`App.js`).

## Properties

<PropsTable of={PopoverMenu} includeDescription={true} />
