react-native-ios-context-menu

🚧⚠️ Documentation WIP ⚠️🚧

📝 Note: See TODO.md for progress.

• The documentation is incomplete (some parts/sections are marked as TBA i.e. "to be added").
• Some of the links in the documentation are broken (i.e. the URL points to PLACE_HOLDER_LINK).
• Some of the gifs/images are old, or broken.
• For now, please see the Usage And Examples section, and Showcase, Tests and Demos section for information on how to use this library.

Notice
📝 Note #1: Staring on version 2.x, this library now uses expo-modules, and contains a peer dependency to react-native-ios-utilites.
📝 Note #2: The documentation + examples are currently being rewritten.

💅 README-old-v1.md — The old version of the documentation (archived).

💖 example/src/examples — The typescript rewrite of the examples (WIP). |

Versions

Library Version	Compatibility
2.1+	Uses Expo-Modules

Depends on react-native-ios-utilities@4.x

Depends on ContextMenuAuxiliaryPreview

iOS 13+

Xcode 15+ | | 2.0.x | Uses Expo-Modules

Depends on react-native-ios-utilities@4.x

iOS 13+

Xcode 15+ | | 1.6.2 | iOS 10 to iOS 15

Xcode 12+ | | 1.4 | iOS 10 to iOS 15

Xcode 13+ | | 1.3 and Below | iOS 10 to 14

Xcode 12+ |

📝 Note: Supports projects targeting iOS 10 but will use the action sheet fallback when running on iOS 12 and older.

Table of Contents

Sections and Links
A. Introduction

• Gifs and Demos

• Features | | B. Installation

• Expo

• Troubleshooting

--• Xcode Build Error (Swift)

--• Xcode Build Error (Undefined symbol) | | C. Basic Usage | | D. Documentation

• D.1. Components

--• ContextMenuView Component

----• Props

----• Event Props

----• Properties/Methods

----• Experimental - Aux. Preview

--• ContextMenuButton Component

----• Props

----• Event Props

----• Properties/Methods

• D.2. Context

--• ContextMenuButtonContext

--• ContextMenuButtonContext

• D.3. Hooks

--• useMenuContext

--• useMenuButtonContext

• D.4. Objects and Types

--• MenuConfig.ts

----• Object Type: MenuConfig

----• Object Type: MenuActionConfig

----• Object Type: DeferredMenuElementConfig

----• String Union: MenuAttributes

----• String Union: MenuState

----• String Union: UIMenuOptions

--• MenuPreviewConfig.ts

----• Object Type: MenuPreviewConfig

----• String Union: ContextMenuInteractionCommitStyle

----• String Union: MenuPreviewSize

----• String Union: MenuPreviewType

--• MenuAuxiliaryPreviewConfig.ts

----• Object Type: MenuAuxiliaryPreviewConfig

----• String Union Type: MenuAuxiliaryPreviewAnchorPosition

----• String Union Type: MenuAuxiliaryPreviewHorizontalAlignment

----• String Union Type: UIViewAnimateOptions

----• Object Type: UIViewAnimateConfig

----• Object Type: MenuAuxiliaryPreviewBaseTransitionConfig

----• Object Union Type: MenuAuxiliaryPreviewTransitionConfig

----• Mixed Union Type: MenuAuxiliaryPreviewTransitionEntranceDelay

--• MenuIconConfig.ts

--• ImageItemConfig.ts

----• Object Type: ImageItemConfig

----• Object Type: ImageResolvedAssetSource

----• Object Type: ImageRectConfig

----• Object Type: ImageGradientConfig

----• Object Type: ImageSystemConfig

--• Undocumented Types

• D.5. Constants | | E. Usage And Examples

📝 Note: See Example Index section for a complete list of examples + their descriptions. | | F. Showcase, Tests and Demos | | G. Meta | | H. Licence |

TOC: Examples Index

Examples
📌 ContextMenuView Example 01

💭 Summary: A basic context menu that has 3 menu action items. | | 📌 ContextMenuView Example 02

💭 Summary: Icon Example — A basic context menu that has 3 menu action items, each with a different "SF Symbols" icon. This examples shows how to add a system icon in the context menu action. | | 📌 ContextMenuView Example 03

💭 Summary: Nested Menu — This example shows a context menu that has a submenu item inside its list of menu actions. | | 📌 ContextMenuView Example 04

💭 Summary: Menu Attributes — This example context menu showcases the MenuActionConfig.menuAttributes property. | | 📌 ContextMenuView Example 05

💭 Summary: Nested Menu + Menu Attributes — A context menu that has a in-line submenu. | | 📌 ContextMenuView Example 06

💭 Summary: Menu Options — A context menu that has a destructive submenu. | | 📌 ContextMenuView Example 07

💭 Summary: Menu Options — A context menu that set to be both "destructive" and "display in-line". | | 📌 ContextMenuView Example 08

💭 Summary: Menu State — A context menu with 3 actions that has 'on', 'off', and 'mixed' menuState. | | 📌 ContextMenuView Example 09

💭 Summary: Events — An example for the onPressMenuItem event prop. | | 📌 ContextMenuView Example 10

💭 Summary: Dynamic Menu — An example showing how to dynamically update the context menu while it's visible. In this example, the menu action changes every time the counter increments every second. | | 📌 ContextMenuView Example 11

💭 Summary: Context Menu Previews — An example showing how to use a custom preview for the context menu. | | 📌 ContextMenuView Example 12

💭 Summary: Context Menu Previews — An example showing a custom context menu preview that dynamically changes its size due to its contents updating every second. | | 📌 ContextMenuView Example 13

💭 Summary: Menu Action — An example showing how to add a subtitle to menu action. | | 📌 ContextMenuView Example 14

💭 Summary: Context Menu Previews — An example that changes the exit transition of the context menu preview when its tapped using the preferredCommitStyle config. | | 📌 ContextMenuView Example 15

💭 Summary: Context Menu Previews — An example showing how to configure a context menu that uses targeted previews. | | 📌 ContextMenuView Example 15-02

💭 Summary: Context Menu Previews (Cont). — An example showing how to configure a context menu that uses targeted previews + WrapperView. | | 📌 ContextMenuView Example 16

💭 Summary: Icon Example — An example showing a context menu with an action that uses a 'IMAGE_ASSET' image for its icon. | | 📌 ContextMenuView Example 17

💭 Summary: Icon Example — An example showing a context menu with action items that have different colored icons. | | 📌 ContextMenuView Example 18

💭 Summary: Icon Example — An example showing a context menu with action items that has icons that uses local image assets imported via require(...). | | 📌 ContextMenuView Example 19

💭 Summary: Dynamic Menu — An example showing a context menu that has a loading indicator using deferred menu elements. | | 📌 ContextMenuView Example 20

💭 Summary: Dynamic Menu — An example showing a state-controlled context menu that shows a loading indicator using deferred menu elements. | | 📌 ContextMenuView Example 21

💭 Summary: Menu Element Size — TBA | | 📌 ContextMenuView Example 22

💭 Summary: Menu Element Size — TBA | | 📌 ContextMenuView Example 23

💭 Summary: Menu Element Size — TBA | | 📌 ContextMenuView Example 24

💭 Summary: Menu Attributes — keepsMenuPresented | | 📌 ContextMenuView Example 25

💭 Summary: Icon Example — Advanced customization (E.g. scale, weight, paletteColors, hierarchicalColor). | | 📌 ContextMenuView Example 26

💭 Summary: Icon Example — Network/Remote images as icons. | | 📌 ContextMenuView Example 27

💭 Summary: Icon Example — Network/Remote images as icons + fallback image. | | 📌 ContextMenuView Example 28

💭 Summary: Programmatically shows the context menu. | | 📌 ContextMenuView Auxiliary Preview - Example 01

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 02

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 03

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 04

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 05

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 06

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 07

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 08

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 09

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 10

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 11

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 12

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 13

💭 Summary: TBA | | 📌 ContextMenuView Auxiliary Preview - Example 14

💭 Summary: TBA | | 📌 **[ContextMenuView Auxiliary Preview - Example 15](#ContextMenuView-Auxi