expo-focus-menu

Native iOS context menus with haptic feedback, custom React component icons, and interactive emoji reactions for React Native. Provides an elegant focus menu UI component for Expo and React Native apps.

Features

• 📱 Native iOS Context Menus - Uses UIContextMenuInteraction for authentic iOS experience
• 🎯 Focus Menu UI - Long press to reveal contextual actions
• 💫 Haptic Feedback - Configurable haptic response on menu activation
• 🎨 React Component Icons - Use any React component as menu icons (SVGs, icon libraries, custom graphics)
• 😀 Emoji Reactions - Interactive emoji picker for quick reactions
• 📦 Submenus - Nested menu items for complex hierarchies
• 🔴 Destructive Actions - Native styling for dangerous operations
• ♿ Accessibility - Full VoiceOver and accessibility support

Installation

For Expo managed projects

npx expo install expo-focus-menu

For bare React Native projects

First ensure you have installed and configured the expo package.

npm install expo-focus-menu
# or
yarn add expo-focus-menu

iOS Setup

Run pod install after installation:

cd ios && pod install

Note: This module currently only supports iOS. Android support displays a fallback view.

Quick Start

import { Ionicons } from '@expo/vector-icons';
import { ExpoFocusMenuView } from 'expo-focus-menu';

function MyComponent() {
  const menuItems = [
    { id: 'share', title: 'Share', icon: <Ionicons name="share-outline" size={20} color="#333" /> },
    { id: 'copy', title: 'Copy', icon: <Ionicons name="copy-outline" size={20} color="#333" /> },
    { id: 'delete', title: 'Delete', icon: <Ionicons name="trash-outline" size={20} color="#FF3B30" />, destructive: true },
  ];

  return (
    <ExpoFocusMenuView
      items={menuItems}
      onItemPress={(itemId) => console.log('Selected:', itemId)}
    >
      <Text>Long press me!</Text>
    </ExpoFocusMenuView>
  );
}

Icons

Icons are passed as React components, giving you full flexibility to use any icon library or custom graphics:

import { Ionicons, MaterialIcons, FontAwesome } from '@expo/vector-icons';
import { Image } from 'react-native';
import CustomSvgIcon from './CustomSvgIcon';

const menuItems = [
  // Using @expo/vector-icons
  { id: 'ion', title: 'Ionicons', icon: <Ionicons name="heart" size={20} color="red" /> },
  { id: 'material', title: 'Material', icon: <MaterialIcons name="star" size={20} color="gold" /> },
  { id: 'fa', title: 'FontAwesome', icon: <FontAwesome name="check" size={20} color="green" /> },

  // Using custom SVG components
  { id: 'custom', title: 'Custom Icon', icon: <CustomSvgIcon width={20} height={20} /> },

  // Using Image components
  { id: 'image', title: 'Image Icon', icon: <Image source={require('./icon.png')} style={{ width: 20, height: 20 }} /> },

  // No icon
  { id: 'noicon', title: 'No Icon' },
];

Recommended icon size: 20-24 points for optimal display in context menus.

Advanced Usage

With Emoji Reactions

<ExpoFocusMenuView
  items={menuItems}
  reactions={['👍', '❤️', '😂', '🔥', '💯']}
  onReactionPress={({ emoji, selected }) => {
    console.log(`Emoji ${emoji} was ${selected ? 'selected' : 'deselected'}`);
  }}
  onItemPress={(itemId) => console.log('Menu item:', itemId)}
>
  <View style={styles.card}>
    <Text>React to this content!</Text>
  </View>
</ExpoFocusMenuView>

With Submenus

import { Ionicons } from '@expo/vector-icons';

const menuItems = [
  { id: 'edit', title: 'Edit', icon: <Ionicons name="pencil" size={20} color="#333" /> },
  {
    id: 'share',
    title: 'Share',
    icon: <Ionicons name="share-outline" size={20} color="#333" />,
    children: [
      { id: 'twitter', title: 'Twitter', icon: <Ionicons name="logo-twitter" size={20} color="#1DA1F2" /> },
      { id: 'facebook', title: 'Facebook', icon: <Ionicons name="logo-facebook" size={20} color="#4267B2" /> },
      { id: 'email', title: 'Email', icon: <Ionicons name="mail-outline" size={20} color="#333" /> },
    ],
  },
  { id: 'delete', title: 'Delete', icon: <Ionicons name="trash-outline" size={20} color="#FF3B30" />, destructive: true },
];

Custom Configuration

<ExpoFocusMenuView
  items={menuItems}
  hapticFeedback={true}        // Enable haptic feedback
  onItemPress={handleItemPress}
  onMenuShow={() => console.log('Menu opened')}
  onMenuDismiss={() => console.log('Menu closed')}
>
  <YourContent />
</ExpoFocusMenuView>

API Reference

ExpoFocusMenuView Props

Prop	Type	Description	Default
items	FocusMenuItem[]	Array of menu items to display	Required
onItemPress	(itemId: string) => void	Callback when menu item is selected	Required
children	ReactNode	Content to wrap with menu	Required
hapticFeedback	boolean	Enable haptic feedback	false
reactions	string[]	Emoji reactions to display (none if omitted)	-
onReactionPress	(data: {emoji: string, selected: boolean}) => void	Reaction selection callback	-
onMenuShow	() => void	Menu shown callback	-
onMenuDismiss	() => void	Menu dismissed callback	-

FocusMenuItem Interface

import { ReactNode } from 'react';

interface FocusMenuItem {
  id: string;                    // Unique identifier
  title: string;                 // Display title
  subtitle?: string;             // Optional subtitle (iOS 15+)
  icon?: ReactNode;              // React component icon (e.g., from @expo/vector-icons)
  destructive?: boolean;         // Style as destructive action
  disabled?: boolean;            // Disable this item
  children?: FocusMenuItem[];    // Nested submenu items (max 1 level deep)
}

Compatibility

Platform Support

Platform	Status	Notes
iOS 13+	✅ Fully supported	Native UIContextMenuInteraction
iOS 14+	✅ Enhanced	UIMenu with advanced features
iOS 15+	✅ Enhanced	Subtitles support
Android	⚠️ Fallback	Displays children without menu
Web	⚠️ Fallback	Displays children without menu

Version Compatibility

expo-focus-menu	Expo SDK	React Native	iOS	Android	Node
0.3.x	54+	0.81+	15.0+	API 24+ (SDK 36)	20.0+
0.2.x	54+	0.81+	15.0+	API 24+ (SDK 36)	20.0+
0.1.x	54+	0.81+	15.0+	API 24+ (SDK 36)	20.0+

Dependency Requirements

Dependency	Version	Required
expo	*	Yes (peer)
react	*	Yes (peer)
react-native	*	Yes (peer)
ExpoModulesCore	Auto-linked	Yes (iOS)

Build Configuration

Configuration	iOS	Android
Swift Version	5.9	-
Compile SDK	-	36
Min SDK	iOS 15.0, tvOS 15.0	API 24
Target SDK	-	36

Migration from v0.2.x

Version 0.3.0 introduces a breaking change to the icon API:

Before (v0.2.x)

// String-based SF Symbol icons
{ id: 'copy', title: 'Copy', icon: 'doc.on.doc' }
{ id: 'share', title: 'Share', image: 'https://example.com/icon.png' }

After (v0.3.x)

import { Ionicons } from '@expo/vector-icons';

// React component icons
{ id: 'copy', title: 'Copy', icon: <Ionicons name="copy-outline" size={20} color="#333" /> }
{ id: 'share', title: 'Share', icon: <Image source={{ uri: 'https://example.com/icon.png' }} style={{ width: 20, height: 20 }} /> }

Key changes:

• icon prop now accepts ReactNode instead of string
• image prop has been removed (use <Image /> component in icon instead)
• SF Symbol names are no longer supported directly

Examples

Check the example directory for a complete working example with various use cases.

# Run the example app
cd example
npm install
npm run ios

Testing

# Run all tests
npm test

# Run iOS specific tests
npm run test:ios

# Run with coverage
npm test -- --coverage

Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

Roadmap

• Android support with native implementation
• Web context menu support
• Custom menu animations
• Menu item badges
• Dynamic menu updates
• Custom preview views
• Menu section headers

License

MIT © shottah

Acknowledgments

• Built with Expo Modules API
• Inspired by iOS native context menu interactions
• Emoji picker design inspired by popular messaging apps

Support

• 🐛 Report bugs
• 💡 Request features
• 📖 Read the docs
• ⭐ Star this repo if you find it useful!