feat(ios): add SF Symbol icon support for context menu items (#191)

hryhoriiK97 · web-flow · commit 579a9ed59eec · 2026-03-28T20:31:20.000+01:00
* feat(ios): add SF Symbol icon support for context menu items

* refactor: move optional props to the bottom
diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -4,6 +4,7 @@ import {
   ScrollView,
   Alert,
   Linking,
+  Platform,
   View,
   Text,
 } from 'react-native';
@@ -25,7 +26,8 @@ export default function App() {
   const contextMenuItems = useMemo(
     () => [
       {
-        text: '✦ Summarize with AI',
+        text: 'Summarize with AI',
+        icon: Platform.OS === 'ios' ? 'sparkles' : undefined,
         onPress: ({ text }: { text: string }) => {
           Alert.alert('✦ Summarize with AI', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
@@ -34,6 +36,7 @@ export default function App() {
       },
       {
         text: 'Translate',
+        icon: Platform.OS === 'ios' ? 'globe' : undefined,
         onPress: ({ text }: { text: string }) => {
           Alert.alert('Translate', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
diff --git a/apps/example/src/InputScreen.tsx b/apps/example/src/InputScreen.tsx
@@ -107,7 +107,8 @@ export default function InputScreen() {
   const bubbleContextMenuItems = useMemo(
     () => [
       {
-        text: '✦ Summarize with AI',
+        text: 'Summarize with AI',
+        icon: Platform.OS === 'ios' ? 'sparkles' : undefined,
         onPress: ({ text }: { text: string }) => {
           Alert.alert('✦ Summarize with AI', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
@@ -116,6 +117,8 @@ export default function InputScreen() {
       },
       {
         text: 'Reply',
+        icon:
+          Platform.OS === 'ios' ? 'arrowshape.turn.up.left.fill' : undefined,
         onPress: ({ text }: { text: string }) => {
           inputRef.current?.setValue(`> ${text}\n\n`);
           inputRef.current?.focus();
@@ -129,6 +132,7 @@ export default function InputScreen() {
     () => [
       {
         text: '✦ Summarize with AI',
+        icon: Platform.OS === 'ios' ? 'sparkles' : undefined,
         onPress: ({
           text,
           styleState,
diff --git a/apps/macos-example/src/App.tsx b/apps/macos-example/src/App.tsx
@@ -25,7 +25,8 @@ export default function App() {
   const contextMenuItems = useMemo(
     () => [
       {
-        text: '✦ Summarize with AI',
+        text: 'Summarize with AI',
+        icon: 'sparkles',
         onPress: ({ text }: { text: string }) => {
           Alert.alert('✦ Summarize with AI', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
@@ -34,6 +35,7 @@ export default function App() {
       },
       {
         text: 'Translate',
+        icon: 'globe',
         onPress: ({ text }: { text: string }) => {
           Alert.alert('Translate', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
diff --git a/apps/macos-example/src/InputScreen.tsx b/apps/macos-example/src/InputScreen.tsx
@@ -66,7 +66,8 @@ export default function InputScreen() {
   const bubbleContextMenuItems = useMemo(
     () => [
       {
-        text: '✦ Summarize with AI',
+        text: 'Summarize with AI',
+        icon: 'sparkles',
         onPress: ({ text }: { text: string }) => {
           Alert.alert('✦ Summarize with AI', `"${text}"`, [
             { text: 'Dismiss', style: 'cancel' },
@@ -75,6 +76,7 @@ export default function InputScreen() {
       },
       {
         text: 'Reply',
+        icon: 'arrowshape.turn.up.left.fill',
         onPress: ({ text }: { text: string }) => {
           inputRef.current?.setValue(`> ${text}\n\n`);
           inputRef.current?.focus();
@@ -87,7 +89,8 @@ export default function InputScreen() {
   const inputContextMenuItems = useMemo(
     () => [
       {
-        text: '✦ Summarize with AI',
+        text: 'Summarize with AI',
+        icon: 'sparkles',
         onPress: ({
           text,
           styleState,
diff --git a/docs/API_REFERENCE.md b/docs/API_REFERENCE.md
@@ -172,6 +172,8 @@ Markdown flavor. Set to `'github'` to enable GitHub Flavored Markdown table supp
 
 Custom items to add to the text selection context menu. Items appear before the system actions (Copy, etc.). Items with `visible: false` are hidden from the menu.
 
+> **iOS**: Requires iOS 16+. On earlier versions the prop is ignored.
+
 | Type                 | Default Value | Platform |
 | -------------------- | ------------- | -------- |
 | `ContextMenuItem[]`  | -             | Both     |
@@ -182,6 +184,12 @@ Custom items to add to the text selection context menu. Items appear before the
 interface ContextMenuItem {
   /** Label shown in the context menu. */
   text: string;
+  /**
+   * SF Symbol name for the icon shown next to the item label.
+   * Supported on iOS and macOS. Ignored on Android.
+   * Example: 'sparkles', 'translate', 'doc.text'
+   */
+  icon?: string;
   /** Called when the item is tapped. */
   onPress: (event: {
     /** The selected text at the time of the press. */
@@ -393,6 +401,8 @@ Fires when the input loses focus.
 
 Custom items to add to the text selection context menu. Items appear before the system actions (Copy, Cut, etc.). Items with `visible: false` are hidden from the menu.
 
+> **iOS**: Requires iOS 16+. On earlier versions the prop is ignored.
+
 | Type                 | Default Value | Platform |
 | -------------------- | ------------- | -------- |
 | `ContextMenuItem[]`  | -             | Both     |
@@ -403,6 +413,12 @@ Custom items to add to the text selection context menu. Items appear before the
 interface ContextMenuItem {
   /** Label shown in the context menu. */
   text: string;
+  /**
+   * SF Symbol name for the icon shown next to the item label.
+   * Supported on iOS and macOS. Ignored on Android.
+   * Example: 'sparkles', 'translate', 'doc.text'
+   */
+  icon?: string;
   /** Called when the item is tapped. */
   onPress: (event: {
     /** The selected text at the time of the press. */
diff --git a/ios/EnrichedMarkdown.mm b/ios/EnrichedMarkdown.mm
@@ -140,6 +140,7 @@ @implementation EnrichedMarkdown {
   BOOL _enableLinkPreview;
 
   NSArray<NSString *> *_contextMenuItemTexts;
+  NSArray<NSString *> *_contextMenuItemIcons;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -545,7 +546,7 @@ - (EnrichedMarkdownInternalText *)createTextViewForRenderedSegment:(EMRenderedTe
     }
     NSString *segmentMarkdown = extractMarkdownFromAttributedString(textView.textStorage, textView.selectedRange);
     NSArray<NSMenuItem *> *customItems = ENRMBuildContextMenuItems(
-        strongSelf->_contextMenuItemTexts, textView,
+        strongSelf->_contextMenuItemTexts, strongSelf->_contextMenuItemIcons, textView,
         ^(NSString *itemText, NSString *selectedText, NSUInteger selectionStart, NSUInteger selectionEnd) {
           auto eventEmitter = std::static_pointer_cast<EnrichedMarkdownEventEmitter const>(strongSelf->_eventEmitter);
           if (eventEmitter) {
@@ -683,6 +684,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   if (ENRMContextMenuItemsChanged(oldViewProps.contextMenuItems, newViewProps.contextMenuItems)) {
     _contextMenuItemTexts = ENRMContextMenuTextsFromItems(newViewProps.contextMenuItems);
+    _contextMenuItemIcons = ENRMContextMenuIconsFromItems(newViewProps.contextMenuItems);
   }
 
   if (markdownChanged || stylePropChanged || md4cFlagsChanged || allowTrailingMarginChanged) {
@@ -812,7 +814,7 @@ - (UIMenu *)textView:(UITextView *)textView
         }
       };
   NSMutableArray<UIAction *> *customActions =
-      ENRMBuildContextMenuActions(_contextMenuItemTexts, textView, range, handler);
+      ENRMBuildContextMenuActions(_contextMenuItemTexts, _contextMenuItemIcons, textView, range, handler);
 
   NSString *segmentMarkdown = extractMarkdownFromAttributedString(textView.attributedText, range);
   return buildEditMenuForSelection(textView.attributedText, range, segmentMarkdown, _config, suggestedActions,
diff --git a/ios/EnrichedMarkdownText.mm b/ios/EnrichedMarkdownText.mm
@@ -82,6 +82,7 @@ @implementation EnrichedMarkdownText {
   BOOL _accessibilityNeedsRebuild;
 
   NSArray<NSString *> *_contextMenuItemTexts;
+  NSArray<NSString *> *_contextMenuItemIcons;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -210,7 +211,7 @@ - (void)setupTextView
       return baseMenu;
     }
     NSArray<NSMenuItem *> *customItems = ENRMBuildContextMenuItems(
-        strongSelf->_contextMenuItemTexts, textView,
+        strongSelf->_contextMenuItemTexts, strongSelf->_contextMenuItemIcons, textView,
         ^(NSString *itemText, NSString *selectedText, NSUInteger selectionStart, NSUInteger selectionEnd) {
           auto eventEmitter =
               std::static_pointer_cast<EnrichedMarkdownTextEventEmitter const>(strongSelf->_eventEmitter);
@@ -495,6 +496,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   if (ENRMContextMenuItemsChanged(oldViewProps.contextMenuItems, newViewProps.contextMenuItems)) {
     _contextMenuItemTexts = ENRMContextMenuTextsFromItems(newViewProps.contextMenuItems);
+    _contextMenuItemIcons = ENRMContextMenuIconsFromItems(newViewProps.contextMenuItems);
   }
 
   if (newViewProps.streamingAnimation != oldViewProps.streamingAnimation) {
@@ -629,7 +631,7 @@ - (UIMenu *)textView:(ENRMPlatformTextView *)textView
         }
       };
   NSMutableArray<UIAction *> *customActions =
-      ENRMBuildContextMenuActions(_contextMenuItemTexts, textView, range, handler);
+      ENRMBuildContextMenuActions(_contextMenuItemTexts, _contextMenuItemIcons, textView, range, handler);
 
   return buildEditMenuForSelection(textView.attributedText, range, _cachedMarkdown, _config, suggestedActions,
                                    customActions);
diff --git a/ios/input/EnrichedMarkdownInput+ContextMenu.mm b/ios/input/EnrichedMarkdownInput+ContextMenu.mm
@@ -37,16 +37,19 @@ - (UIMenu *)textView:(UITextView *)textView
                         handler:^(__kindof UIAction *action) { [self copySelectedRangeAsMarkdown]; }];
 
   NSArray<NSString *> *customItemTexts = [self contextMenuItemTexts];
+  NSArray<NSString *> *customItemIcons = [self contextMenuItemIcons];
   __weak EnrichedMarkdownInput *weakSelf = self;
   NSMutableArray<UIMenuElement *> *allActions = [NSMutableArray arrayWithCapacity:customItemTexts.count];
-  for (NSString *itemText in customItemTexts) {
+  [customItemTexts enumerateObjectsUsingBlock:^(NSString *itemText, NSUInteger index, BOOL *_) {
+    NSString *iconName = index < customItemIcons.count ? customItemIcons[index] : nil;
+    UIImage *image = iconName.length > 0 ? [UIImage systemImageNamed:iconName] : nil;
     UIAction *customAction =
         [UIAction actionWithTitle:itemText
-                            image:nil
+                            image:image
                        identifier:nil
                           handler:^(__kindof UIAction *_) { [weakSelf emitContextMenuItemPress:itemText]; }];
     [allActions addObject:customAction];
-  }
+  }];
 
   NSUInteger insertIndex = suggestedActions.count;
   NSMutableArray *systemActions = [suggestedActions mutableCopy];
@@ -70,10 +73,11 @@ - (NSMenu *)enrichedMenuForEvent:(NSEvent *)event defaultMenu:(NSMenu *)menu tex
   }
 
   __weak EnrichedMarkdownInput *weakSelf = self;
-  NSArray<NSMenuItem *> *customItems = ENRMBuildContextMenuItems(
-      [self contextMenuItemTexts], textView, ^(NSString *itemText, NSString *_, NSUInteger __, NSUInteger ___) {
-        [weakSelf emitContextMenuItemPress:itemText];
-      });
+  NSArray<NSMenuItem *> *customItems =
+      ENRMBuildContextMenuItems([self contextMenuItemTexts], [self contextMenuItemIcons], textView,
+                                ^(NSString *itemText, NSString *_, NSUInteger __, NSUInteger ___) {
+                                  [weakSelf emitContextMenuItemPress:itemText];
+                                });
   ENRMPrependMenuItems(menu, customItems);
 
   [menu addItem:[NSMenuItem separatorItem]];
diff --git a/ios/input/EnrichedMarkdownInput+Internal.h b/ios/input/EnrichedMarkdownInput+Internal.h
@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 - (void)emitContextMenuItemPress:(NSString *)itemText;
 - (NSArray<NSString *> *)contextMenuItemTexts;
+- (NSArray<NSString *> *)contextMenuItemIcons;
 
 #if !TARGET_OS_OSX
 - (void)showFormatBar;
diff --git a/ios/input/EnrichedMarkdownInput.mm b/ios/input/EnrichedMarkdownInput.mm
@@ -73,6 +73,7 @@ @implementation EnrichedMarkdownInput {
 #endif
 
   NSArray<NSString *> *_contextMenuItemTexts;
+  NSArray<NSString *> *_contextMenuItemIcons;
 }
 
 #pragma mark - Fabric lifecycle
@@ -277,6 +278,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
 
   if (ENRMContextMenuItemsChanged(oldViewProps.contextMenuItems, newViewProps.contextMenuItems)) {
     _contextMenuItemTexts = ENRMContextMenuTextsFromItems(newViewProps.contextMenuItems);
+    _contextMenuItemIcons = ENRMContextMenuIconsFromItems(newViewProps.contextMenuItems);
   }
 
   BOOL styleChanged = applyInputStyleProps(_formatterStyle, newViewProps, oldViewProps);
@@ -824,6 +826,11 @@ - (void)emitOnChangeState
   return _contextMenuItemTexts ?: @[];
 }
 
+- (NSArray<NSString *> *)contextMenuItemIcons
+{
+  return _contextMenuItemIcons ?: @[];
+}
+
 - (void)emitContextMenuItemPress:(NSString *)itemText
 {
   auto eventEmitter = [self getEventEmitter];
diff --git a/ios/utils/ContextMenuUtils.h b/ios/utils/ContextMenuUtils.h
@@ -14,7 +14,7 @@ static bool ENRMContextMenuItemsChanged(const std::vector<T> &oldItems, const st
     return true;
   }
   for (size_t i = 0; i < newItems.size(); i++) {
-    if (newItems[i].text != oldItems[i].text) {
+    if (newItems[i].text != oldItems[i].text || newItems[i].icon != oldItems[i].icon) {
       return true;
     }
   }
@@ -30,6 +30,18 @@ template <typename T> static NSArray<NSString *> *ENRMContextMenuTextsFromItems(
   return [result copy];
 }
 
+template <typename T> static NSArray<NSString *> *_Nullable ENRMContextMenuIconsFromItems(const std::vector<T> &items)
+{
+  NSMutableArray<NSString *> *result = [NSMutableArray arrayWithCapacity:items.size()];
+  bool hasAnyIcon = false;
+  for (const auto &item : items) {
+    NSString *iconName = @(item.icon.c_str());
+    hasAnyIcon = hasAnyIcon || iconName.length > 0;
+    [result addObject:iconName];
+  }
+  return hasAnyIcon ? [result copy] : nil;
+}
+
 #endif
 
 typedef void (^ENRMContextMenuPressHandler)(NSString *_Nonnull itemText, NSString *_Nonnull selectedText,
@@ -43,13 +55,15 @@ extern "C" {
 
 // TODO: Remove API_AVAILABLE(ios(16.0)) guard when the minimum iOS deployment target in RN is bumped to 16.
 NSMutableArray<UIAction *> *_Nullable ENRMBuildContextMenuActions(NSArray<NSString *> *_Nonnull itemTexts,
+                                                                  NSArray<NSString *> *_Nullable iconNames,
                                                                   UITextView *_Nonnull textView, NSRange selectedRange,
                                                                   ENRMContextMenuPressHandler _Nonnull handler)
     API_AVAILABLE(ios(16.0));
 
 #else
 
 NSArray<NSMenuItem *> *_Nullable ENRMBuildContextMenuItems(NSArray<NSString *> *_Nonnull itemTexts,
+                                                           NSArray<NSString *> *_Nullable iconNames,
                                                            NSTextView *_Nonnull textView,
                                                            ENRMContextMenuPressHandler _Nonnull handler);
 
diff --git a/ios/utils/ContextMenuUtils.mm b/ios/utils/ContextMenuUtils.mm
@@ -4,8 +4,9 @@
 #if !TARGET_OS_OSX
 
 // TODO: Remove API_AVAILABLE(ios(16.0)) guard when the minimum iOS deployment target in RN is bumped to 16.
-NSMutableArray<UIAction *> *_Nullable ENRMBuildContextMenuActions(NSArray<NSString *> *itemTexts, UITextView *textView,
-                                                                  NSRange selectedRange,
+NSMutableArray<UIAction *> *_Nullable ENRMBuildContextMenuActions(NSArray<NSString *> *itemTexts,
+                                                                  NSArray<NSString *> *_Nullable iconNames,
+                                                                  UITextView *textView, NSRange selectedRange,
                                                                   ENRMContextMenuPressHandler handler)
     API_AVAILABLE(ios(16.0))
 {
@@ -18,21 +19,24 @@
   NSUInteger selectionEnd = NSMaxRange(selectedRange);
 
   NSMutableArray<UIAction *> *actions = [NSMutableArray arrayWithCapacity:itemTexts.count];
-  for (NSString *itemText in itemTexts) {
+  [itemTexts enumerateObjectsUsingBlock:^(NSString *itemText, NSUInteger index, BOOL *_) {
+    NSString *iconName = iconNames ? iconNames[index] : nil;
+    UIImage *image = iconName.length > 0 ? [UIImage systemImageNamed:iconName] : nil;
     [actions addObject:[UIAction actionWithTitle:itemText
-                                           image:nil
+                                           image:image
                                       identifier:nil
                                          handler:^(__kindof UIAction *_) {
                                            handler(itemText, selectedText, selectionStart, selectionEnd);
                                          }]];
-  }
+  }];
   return actions;
 }
 
 #else
 
-NSArray<NSMenuItem *> *_Nullable ENRMBuildContextMenuItems(NSArray<NSString *> *itemTexts, NSTextView *textView,
-                                                           ENRMContextMenuPressHandler handler)
+NSArray<NSMenuItem *> *_Nullable ENRMBuildContextMenuItems(NSArray<NSString *> *itemTexts,
+                                                           NSArray<NSString *> *_Nullable iconNames,
+                                                           NSTextView *textView, ENRMContextMenuPressHandler handler)
 {
   if (itemTexts.count == 0) {
     return nil;
@@ -44,9 +48,15 @@
   NSUInteger selectionEnd = NSMaxRange(selectedRange);
 
   NSMutableArray<NSMenuItem *> *items = [NSMutableArray arrayWithCapacity:itemTexts.count];
-  for (NSString *itemText in itemTexts) {
-    [items addObject:ENRMCreateMenuItem(itemText, ^{ handler(itemText, selectedText, selectionStart, selectionEnd); })];
-  }
+  [itemTexts enumerateObjectsUsingBlock:^(NSString *itemText, NSUInteger index, BOOL *_) {
+    NSMenuItem *item =
+        ENRMCreateMenuItem(itemText, ^{ handler(itemText, selectedText, selectionStart, selectionEnd); });
+    NSString *iconName = iconNames ? iconNames[index] : nil;
+    if (iconName.length > 0) {
+      item.image = [NSImage imageWithSystemSymbolName:iconName accessibilityDescription:nil];
+    }
+    [items addObject:item];
+  }];
   return items;
 }
 
diff --git a/src/EnrichedMarkdownInput.tsx b/src/EnrichedMarkdownInput.tsx
diff --git a/src/EnrichedMarkdownInputNativeComponent.ts b/src/EnrichedMarkdownInputNativeComponent.ts
diff --git a/src/EnrichedMarkdownNativeComponent.ts b/src/EnrichedMarkdownNativeComponent.ts
diff --git a/src/EnrichedMarkdownText.tsx b/src/EnrichedMarkdownText.tsx
diff --git a/src/EnrichedMarkdownTextNativeComponent.ts b/src/EnrichedMarkdownTextNativeComponent.ts

Original file line number	Diff line number	Diff line change
`@@ -73,6 +73,7 @@ @implementation EnrichedMarkdownInput {`
`73`	`73`	`#endif`
`74`	`74`
`75`	`75`	`NSArray<NSString > _contextMenuItemTexts;`
	`76`	`+ NSArray<NSString > _contextMenuItemIcons;`
`76`	`77`	`}`
`77`	`78`
`78`	`79`	`#pragma mark - Fabric lifecycle`
`@@ -277,6 +278,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &`
`277`	`278`
`278`	`279`	`if (ENRMContextMenuItemsChanged(oldViewProps.contextMenuItems, newViewProps.contextMenuItems)) {`
`279`	`280`	`_contextMenuItemTexts = ENRMContextMenuTextsFromItems(newViewProps.contextMenuItems);`
	`281`	`+ _contextMenuItemIcons = ENRMContextMenuIconsFromItems(newViewProps.contextMenuItems);`
`280`	`282`	`}`
`281`	`283`
`282`	`284`	`BOOL styleChanged = applyInputStyleProps(_formatterStyle, newViewProps, oldViewProps);`
`@@ -824,6 +826,11 @@ - (void)emitOnChangeState`
`824`	`826`	`return _contextMenuItemTexts ?: @[];`
`825`	`827`	`}`
`826`	`828`
	`829`	`+- (NSArray<NSString > )contextMenuItemIcons`
	`830`	`+{`
	`831`	`+ return _contextMenuItemIcons ?: @[];`
	`832`	`+}`
	`833`	`+`
`827`	`834`	`- (void)emitContextMenuItemPress:(NSString *)itemText`
`828`	`835`	`{`
`829`	`836`	`auto eventEmitter = [self getEventEmitter];`