!contextmenubanner

$3

App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by Expo. Need a hand? Let’s build together. team@appandflow.com

expo-context-menu

Crossplatform Context Menu component - compatible with Expo managed apps.
https://developer.apple.com/design/human-interface-guidelines/context-menus

Example

With our library you can customize your context menu to have the look and feel of the native menus. You can see the full repository of this example here.

Installation

``sh
npm install @appandflow/expo-context-menu
`

Usage

Wrap your application with the ExpoContextMenuProvider

`tsx
import { ExpoContextMenuProvider } from '@appanflow/expo-context-menu';




`

Then you can use the lib with the ExpoContextMenu component

`tsx
import { ExpoContextMenu } from '@appandflow/expo-context-menu';

onPress={onPress}
menuItems={[
{
title: 'Add to Favorites',
onPress: () => null,
icon: ,
},
{
title: 'Share',
onPress: () => null,
icon: ,
},
]}
>


`

Props

| Name | Description |
| ---- | ----------- |
| menuItems | Custom items you can display when the context menu is open |
`tsx
{
title: string;
icon?: React.ReactElement;
onPress: () => void;
destructive?: boolean;
}[];
``
| Name | Description |
| ---- | ----------- |
| renderMenu (optional) | Custom component to replace the container rendering the menuItems |
| isFullScreen (optional) | Boolean to have the full screen layout animation |
| onPress (optional) | Function to pass a custom event when pressing on the children |
| onLongPressStart (optional) | Callback to customize the long press starting action |
| onLongPressEnd (optional) | Callback to customize the long press ending action |
| onMenuOpen (optional) | Callback to customize the children when the menu is open |
| onMenuClose (optional) | Callback to customize the children when the menu closes |
| itemScaleOnMenuOpen (optional) | Number to change the scale of the children when the menu is open (default to 0.97) |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library