diff --git a/README.md b/README.md
index 7813984..c259c81 100644
--- a/README.md
+++ b/README.md
@@ -939,7 +939,7 @@ TBA
| 1️⃣ — The `ContextMenuView.menuConfig` prop accepts an optional `MenuConfig` object.
This object will be used to create and configure the context menu. |
| 2️⃣ — You can set the context menu title via passing a string value to the `MenuConfig.menuTitle` property.
📝 **Note**: You can pass an empty string if you don't want a context menu title to appear. |
| 3️⃣ — To populate the context menu with items, you can pass a `MenuActionConfig` object in the `MenuConfig.menuItems` property.
📝 **Note A**: The `MenuConfig.menuItems` property can accept an array of a `MenuElementConfig` union type.
To be more specific, the `menuItems` property can accept an array containing any of the following object types: `MenuConfig` object, `MenuActionConfig`, and `DeferredMenuElementConfig`.
📝 **Note B**: If you pass in a `MenuActionConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a context menu action.
📝 **Note C**: If you pass in a `MenuConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a submenu.
📝 **Note D**: If you pass in a `DeferredMenuElementConfig` object in the `MenuConfig.menuItems` property, it means that you want to create a deferred menu item (i.e. a menu item that has a loading indicator). |
-| 4️⃣ — A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc).
As such, if you pass in a `MenuActionConfig` object to `MenuConfig.menuItems`, it means that you want to create a context menu action.
📝 **Note A**: The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. If you have multiple menu actions, the `actionKey` will help you differentiate them.
📝 **Note B**: You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object).
In other words, the `actionKey` allows you to identify which menu action item was selected/pressed.
📝 **Note C**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. |
+| 4️⃣ — A `MenuActionConfig` object represents an action item in the context menu (e.g. copy, paste, delete, etc).
As such, if you pass in a `MenuActionConfig` object to `MenuConfig.menuItems`, it means that you want to create a context menu action.
📝 **Note A**: The `MenuActionConfig.actionKey` property serves as a unique identifier for your menu action. If you have multiple menu actions, the `actionKey` will help you differentiate them.
📝 **Note B**: You will receive the value you passed in `MenuActionConfig.actionKey` in the `ContextMenuView.onPressMenuItem` event (i.e. via the `nativeEvent` object).
In other words, the `actionKey` allows you to identify which menu action item was selected/pressed. For a more detailed example regarding the `onPressMenuItem` event, see: [`ContextMenuView` Example 09](#ContextMenuView-Example-09).
📝 **Note C**: Make sure that the `actionKey` is unique for each instance of the `ContextMenuView` component. |
| 5️⃣ — You can use the `ContextMenuView.onPressMenuItem` event prop to get notified whenever a menu action item has been selected.
The function you pass to the `onPressMenuItem` prop will receive a `OnPressMenuItemEventObject` object.
📝 **Note A**: Details about the selected menu action item can be accessed via the `OnPressMenuItemEventObject.nativeEvent` object.
E.g. `OnPressMenuItemEventObject.nativeEvent.actionKey`.
📝 **Note B**: If `ContextMenuView.shouldWaitForMenuToHide`
`BeforeFiringOnPressMenuItem` prop is set to `true` (which it is by default), then this event will fire after `onMenuDidHide` is triggered. |
@@ -1454,6 +1454,14 @@ export function ContextMenuViewExample08(props) {
### `ContextMenuView` Example 09
+**Summary**: An example for the `onPressMenuItem` event prop.
+
+| Notes |
+| ------------------------------------------------------------ |
+| The `onPressMenuItem` event prop allows you to know which menu item was pressed via the `nativeEvent.actionKey` property in the event object.
📝 **Note A**: The entire menu action config (i.e. `MenuActionConfig`) object of the selected item can be accessed via the `nativeEvent` object (e.g. `nativeEvent.actionTitle`, `nativeEvent.menuState`, etc).
📝 **Note B**: For the full type declaration for all the events, see: [`MenuEvents.ts`](./src/types/MenuEvents.ts). |
+
+
+
[🔗 Full Example](example/src/examples/ContextMenuViewExample09.tsx)
```jsx
@@ -1468,32 +1476,19 @@ export function ContextMenuViewExample09(props) {
menuItems: [{
actionKey : 'save',
actionTitle: 'Save',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'square.and.arrow.down',
- },
- }
+ // ...
}, {
actionKey : 'like',
actionTitle: 'Like',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'hand.thumbsup',
- },
- }
+ // ...
}, {
actionKey : 'play',
actionTitle: 'Play',
- icon: {
- type: 'IMAGE_SYSTEM',
- imageValue: {
- systemName: 'play',
- },
- }
+ // ...
}],
}}
+ // Use `actionKey` to identify which menu action was
+ // pressed....
onPressMenuItem={({nativeEvent}) => {
switch (nativeEvent.actionKey) {
case 'save':