managarten/picture/docs/development/CONTEXT_MENU_EXAMPLES.md

react-native-context-menu-view Usage Examples

Basic Context Menu

import ContextMenu from 'react-native-context-menu-view';
import { View, Text, Image } from 'react-native';

function BasicExample() {
  return (
    <ContextMenu
      actions={[
        { title: 'Save', systemIcon: 'square.and.arrow.down' },
        { title: 'Share', systemIcon: 'square.and.arrow.up' },
        { title: 'Delete', destructive: true, systemIcon: 'trash' }
      ]}
      onPress={(e) => {
        console.log('Action pressed:', e.nativeEvent.name);
        // Handle action based on e.nativeEvent.index or e.nativeEvent.name
      }}
    >
      <View className="p-4 bg-gray-100 rounded-lg">
        <Text>Long press me!</Text>
      </View>
    </ContextMenu>
  );
}

Context Menu with Submenus (iOS 14+)

import ContextMenu from 'react-native-context-menu-view';

function SubmenuExample() {
  return (
    <ContextMenu
      actions={[
        { title: 'Save', systemIcon: 'square.and.arrow.down' },
        {
          title: 'Export',
          systemIcon: 'square.and.arrow.up.on.square',
          // Nested submenu actions
          actions: [
            { title: 'Export as PDF', systemIcon: 'doc.fill' },
            { title: 'Export as Image', systemIcon: 'photo' },
            { title: 'Export as Video', systemIcon: 'video' }
          ]
        },
        { title: 'Delete', destructive: true, systemIcon: 'trash' }
      ]}
      onPress={(e) => {
        console.log('Action:', e.nativeEvent.name);
      }}
    >
      <View className="p-4 bg-blue-100 rounded-lg">
        <Text>Long press for submenu!</Text>
      </View>
    </ContextMenu>
  );
}

Context Menu with Preview

import ContextMenu from 'react-native-context-menu-view';

function PreviewExample() {
  return (
    <ContextMenu
      actions={[
        { title: 'Edit', systemIcon: 'pencil' },
        { title: 'Duplicate', systemIcon: 'plus.square.on.square' },
        { title: 'Delete', destructive: true, systemIcon: 'trash' }
      ]}
      onPress={(e) => {
        console.log('Action:', e.nativeEvent.name);
      }}
      previewBackgroundColor="white"
    >
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        className="w-full h-48 rounded-lg"
      />
    </ContextMenu>
  );
}

Context Menu on Generated Images

import ContextMenu from 'react-native-context-menu-view';
import * as MediaLibrary from 'expo-media-library';
import * as FileSystem from 'expo-file-system';

function GeneratedImageMenu({ imageUrl }: { imageUrl: string }) {
  const handleSave = async () => {
    // Request permissions
    const { status } = await MediaLibrary.requestPermissionsAsync();
    if (status !== 'granted') {
      alert('Permission required to save images');
      return;
    }

    // Download and save image
    const fileUri = FileSystem.documentDirectory + 'generated-image.jpg';
    await FileSystem.downloadAsync(imageUrl, fileUri);
    await MediaLibrary.createAssetAsync(fileUri);
    alert('Image saved!');
  };

  return (
    <ContextMenu
      actions={[
        { title: 'Save to Photos', systemIcon: 'square.and.arrow.down' },
        { title: 'Share', systemIcon: 'square.and.arrow.up' },
        {
          title: 'More Options',
          actions: [
            { title: 'Set as Wallpaper', systemIcon: 'photo.on.rectangle' },
            { title: 'Copy', systemIcon: 'doc.on.doc' },
            { title: 'View Details', systemIcon: 'info.circle' }
          ]
        },
        { title: 'Delete', destructive: true, systemIcon: 'trash' }
      ]}
      onPress={(e) => {
        switch(e.nativeEvent.index) {
          case 0: // Save to Photos
            handleSave();
            break;
          case 1: // Share
            // Implement share
            break;
          case 2: // Delete
            // Implement delete
            break;
        }
      }}
    >
      <Image
        source={{ uri: imageUrl }}
        className="w-full h-full rounded-lg"
        resizeMode="cover"
      />
    </ContextMenu>
  );
}

Available Action Properties

interface Action {
  title: string;                    // Action title
  systemIcon?: string;              // SF Symbol name (iOS only)
  icon?: string;                    // Custom icon (Android)
  destructive?: boolean;            // Red text for destructive actions
  disabled?: boolean;               // Disable the action
  inlineChildren?: boolean;         // Show submenu items inline
  actions?: Action[];               // Nested submenu actions
}

Common SF Symbols (iOS)

• square.and.arrow.down - Save/Download
• square.and.arrow.up - Share/Export
• trash - Delete
• pencil - Edit
• doc.on.doc - Copy
• heart / heart.fill - Favorite
• star / star.fill - Star/Rate
• photo - Image
• video - Video
• info.circle - Info
• eye / eye.slash - Show/Hide
• checkmark - Confirm

Android Support

The library also works on Android with Material Design menus:

<ContextMenu
  actions={[
    { title: 'Save', icon: 'save' },  // Use Android icon names
    { title: 'Share', icon: 'share' },
    { title: 'Delete', destructive: true, icon: 'delete' }
  ]}
  onPress={(e) => {
    console.log('Action:', e.nativeEvent.index);
  }}
>
  <YourComponent />
</ContextMenu>

Tips

1. Long Press: Context menu appears on long press by default
2. Submenus: Nest actions arrays for submenus (iOS 14+)
3. SF Symbols: Use Apple's SF Symbols for iOS icons
4. Destructive Actions: Set destructive: true for delete/remove actions
5. Event Handling: Use e.nativeEvent.index or e.nativeEvent.name to identify actions