About

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. [email protected]

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.

expo-context-menu-demo.mp4

Installation

npm install @appandflow/expo-context-menu

Usage

Wrap your application with the ExpoContextMenuProvider

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

<ExpoContextMenuProvider>
  <YourApp />
</ExpoContextMenuProvider>

Then you can use the lib with the ExpoContextMenu component

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

<ExpoContextMenu
  onPress={onPress}
  menuItems={[
    {
      title: 'Add to Favorites',
      onPress: () => null,
      icon: <Icon name="Heart" color={colors.black1} size={18} />,
    },
    {
      title: 'Share',
      onPress: () => null,
      icon: <Icon name="Share" color={colors.black1} size={18} />,
    },
  ]}
>
  <YourComponent />
</ExpoContextMenu>

Props

Name	Description
menuItems	Custom items you can display when the context menu is open

{
  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