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.

|

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