Icons

ContextMenu supports icons on menu items. Icons are specified by name and resolved differently on each platform. SegmentedControl, Button and ButtonGroup accept the same names, plus image assets and per-platform pairs (the PlatformIcon type); see SegmentedControl Icon Support.

iOS

Use SF Symbols names. These are built into iOS and require no additional setup.

// Common SF Symbols
image: 'doc.on.doc'; // Copy
image: 'square.and.arrow.up'; // Share
image: 'trash'; // Delete
image: 'pencil'; // Edit
image: 'checkmark.circle'; // Checkmark

Browse available symbols using Apple's SF Symbols app or sfsymbols.com.

Android

Use drawable resource names from your app's res/drawable directory. You must add these resources yourself.

// Reference drawable by name (without extension)
image: 'content_copy'; // res/drawable/content_copy.xml
image: 'share'; // res/drawable/share.xml
image: 'delete'; // res/drawable/delete.xml

Adding drawable resources:

1. Create vector drawable XML files in android/app/src/main/res/drawable/
2. Use Material Icons as a source — download SVG and convert to Android Vector Drawable
3. Name the file to match the image prop value (e.g., content_copy.xml for image: 'content_copy')

Example vector drawable (res/drawable/content_copy.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M16,1L4,1c-1.1,0 -2,0.9 -2,2v14h2L4,3h12L16,1zM19,5L8,5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h11c1.1,0 2,-0.9 2,-2L21,7c0,-1.1 -0.9,-2 -2,-2zM19,21L8,21L8,7h11v14z"/>
</vector>

Cross-platform pattern

Use Platform.OS to provide the correct icon name for each platform:

import { Platform } from 'react-native';

const actions = [
  {
    id: 'copy',
    title: 'Copy',
    image: Platform.OS === 'ios' ? 'doc.on.doc' : 'content_copy',
  },
  {
    id: 'share',
    title: 'Share',
    image: Platform.OS === 'ios' ? 'square.and.arrow.up' : 'share',
  },
  {
    id: 'delete',
    title: 'Delete',
    image: Platform.OS === 'ios' ? 'trash' : 'delete',
    attributes: { destructive: true },
  },
];