react-native-simple-pop-menu

KO | EN

gitlite — search

#python #react #ai #llm #golang #docker #macos #windows #awesome #awesome-list #pytorch #ios #openai #mcp

react-native-simple-pop-menu

(★ 10)

The highly customisable pop menu for React Native

react-native-simple-pop-menu Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2 align="center">React Native Simple Pop Menu</h2>
<p align="center">The Customizable Pop Menu for <a href="https://facebook.github.io/react-native/">react native.</a>

Features:

- Simple to use popup/context menu
- Support all in and out [Animatable](https://github.com/oblador/react-native-animatable) animations
- Non opinionated and Extremely Customizable
- Auto position the menu based on the anchor position
- You provide your own item components
- You provide your own container component
- Fully typed with Typescript

| Light                                         | Dark                                         |
| --------------------------------------------- | -------------------------------------------- |
| ![Pop menu demo](https://raw.githubusercontent.com/alwex/react-native-simple-pop-menu/main/.github/example-light.png) | ![Pop menu demo](https://raw.githubusercontent.com/alwex/react-native-simple-pop-menu/main/.github/example-dark.png) |

## Who uses React Native Simple Pop Menu

_Does your company or app use React Native Simple Pop Menu? Open a pull request and add your logo/icon with link here!_

## Installation

```
npm install react-native-simple-pop-menu --save
```

```
yarn add react-native-simple-pop-menu
```

## Usage

Wrap your application inside `PopMenuProvider` and then simply use `PopMenu` component where you need it.

```JSX
import {
  PopMenu,
  PopMenuItem,
  PopMenuProvider,
} from 'react-native-simple-pop-menu'

const menuItems1: PopMenuItem[] = [
  {
    render: () => <Text>Header</Text>,
  },
  {
    render: () => <Text>Item 1</Text>,
    onPress: () => console.log('item 1 pressed'), // Optional onPress
  },
  // ... more items
]

const App = () => {
  return (
      <PopMenuProvider>
        <View>
          <PopMenu items={menuItems1}>
            <Button>PRESS ME</Button>
          </PopMenu>
        </View>
      </PopMenuProvider>
  )
}

export default App
```

## Advanced Usage

Check the [example](https://github.com/alwex/react-native-pop-menu/blob/main/example/src/App.tsx) folder for more advanced usage

## Properties

| Prop               | Description                                                                               | Default   |
| ------------------ | ----------------------------------------------------------------------------------------- | --------- |
| **`items`**        | Array of `PopMenuItem`                                                                    |
| **`container`**    | Menu Container (Optional)                                                                 |
| **`trigger`**      | Menu Open trigger `press` or `longPress`                                                  | `press`   |
| **`animationIn`**  | Opening Animation one of [Animatable](https://github.com/oblador/react-native-animatable) | `zoomIn`  |
| **`animationOut`** | Closing Animation one of [Animatable](https://github.com/oblador/react-native-animatable) | `zoomOut` |

react-native-simple-pop-menu

react-native-simple-pop-menu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-simple-pop-menu

react-native-simple-pop-menu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README