Skip to content

Noitidart/react-native-popup-menu-android

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 

Repository files navigation

react-native-popup-menu-android

Show the native Android material style popup menu on press of an element. This react-native module is a "Native Module" type. However you do not have to link because this is already available inside React Native.

Table of Contents

Demo

A demo of the screen recording shown above is available as a Snack:

snack.expo.io :: react-native-popup-menu-android Demo

Usage

Installation

npm i react-native-popup-menu-android

Import

import showPopupMenu from 'react-native-popup-menu-android'

Render

class More extends Component<||> {
    moreButton: null | Element<typeof View>

    render() {
        return (
            <TouchableNativeFeedback onPress={this.showMore}>
                <View ref={this.refMoreButton}>
                    <Text>Show Menu</Text>
                </View>
            </TouchableNativeFeedback>
        )
    }

    refMoreButton = el => this.moreButton = el

    showMore = () => {
        showPopupMenu(
            [
                { id:'edit', label:'Quick Edit' },
                { id:'delete', label:'Trash' },
                { id:'follow', label:'Follow' }
            ],
            this.handleMoreItemSelect,
            this.moreButton
        );
    }

    handleMoreItemSelect = (item: PopupMenuItem) => {
        alert('Pressed: ' + item.label)
    }
}

API

showPopupMenu

static showPopupMenu(
    items: PopupMenuItem,
    onSelect: OnPopupMenuItemSelect,
    anchor: PopupMenuAchor,
    options: PopupMenuOptions
): void

Show the native popup menu relative to element referenced by anchor.

Parameter Type Default Required Description
items PopupMenuItem[] Yes Array of strings that are offered as autocomplete suggestions.
onSelect OnPopupMenuItemSelect Yes A callback that gets
anchor PopupAnchor Yes A ref to the element from which the menu should be positioned on.
options PopupOptions undefined See PopupOptions.

Types

Flow is used as the typing system.

Exported Types

import type {
    OnPopupMenuItemSelect,
    PopupMenuItem,
    PopupMenuOptions
} from 'react-native-popup-android'
type OnPopupMenuItemSelect
(selectedPopupMenuItem: [PopupMenuItem](#type-popupmenuitem)) => void
type PopupMenuItem
{ id?: any, label: string }
type PopupMenuOptions
Android
{
    onCancel?: () => void
}
Key Type Default Required Description
onCancel () => void undefined A callback that triggered by user when he dismisses the popup due to (1) hits the hardware back button, or (2) presses outside of the popup menu. This callback is also triggered if an error occurs in trying to display the popup.
iOS

TODO

Internal Types

type PopupAnchor
type PopupAnchor = Element<
  typeof Text |
  typeof TouchableNativeFeedback |
  typeof TouchableWithoutFeedback |
  typeof View
>

Similar Packages

About

Native Module - Show the native Android material style popup menu on press of an element.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published