React Native Context Menu with a Gallery Preview

A held-photo preview with drag-through menu actions, with configurable images, title, background color, and fonts.

How it works

1. The component measures its own gallery cells, so the selected image can begin at the exact thumbnail position without using screen dimensions.
2. The pressed cell and the overlay container are measured in window coordinates in the same UI-thread frame. Subtracting the overlay origin captures the cell position directly, including the header and current scroll offset. One continuous progress shared value drives the preview's position, size, radius, background focus, and menu materialization.
3. A 300 ms long press advances that same progress to a small peek at 0.96 scale, then continues toward the open state with an interruptible spring. The image has a fixed layout and travels with transforms, avoiding per-frame image resizing.
4. Continued finger movement maps to menu rows and springs a translucent highlight between them; release executes the active row.
5. The preview and glass layers stay mounted after their first use. The closing spring stops exactly at zero without overshooting, so the preview returns to the measured thumbnail position and both swap visibility on the same UI-thread frame. Interrupted closes resume from the current progress; stale completion callbacks cannot hide a reopened menu. Short containers place the menu beside the preview to keep all actions reachable.
6. The forwarded ref exposes open(index?), close(), and play(index?), letting a product tour reproduce the complete hold, scan, and Favorite sequence. Every close path has a 600 ms fallback that settles progress and releases the overlay if the animation completion callback is lost. Reopening cancels that fallback. Playback starts its timers after the measured selection is committed, and late measurements cannot reopen a dismissed menu. Autoplay chooses Favorite at 1,770 ms after preparation, allows up to 600 ms to close, rests for 1,500 ms, then plays another thumbnail.

Install

npx expo install @shopify/react-native-skia expo-blur expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Icons: Lucide (ISC).

Usage

import PeekContextMenu from './PeekContextMenu';

export function PhotoLibrary() {
  return (
    <PeekContextMenu
      images={[require('./photo-1.jpg'), require('./photo-2.jpg')]}
      onAction={(action, index) => handlePhotoAction(action, index)}
    />
  );
}

Customize the product copy and styling:

<PeekContextMenu
  images={photos}
  favoriteIndices={[1, 4]}
  brandName="Field Notes"
  title="Moments"
  itemCountLabel="864 items"
  backgroundColor="#09090B"
  fontFamily="YourSansFont"
  mediumFontFamily="YourSansMediumFont"
/>

Props

Why this one

The preview does not simply pop into the center: it preserves spatial continuity from the exact gallery cell. The same gesture opens and scrubs the menu, a spring-following highlight makes the current choice unmistakable, and a concise toast closes the feedback loop. The full interaction also works by tap and through a named accessibility action.

Compatibility

• Expo SDK 58
• React Native 0.88
• Reanimated 4.7, Worklets 0.13, and Skia 2.14
• iOS: supported
• Android: supported
• Web: supported
• Works in Expo Go because the native dependencies are included in Expo SDK 58

Accessibility

Every gallery image and menu row is a labeled button. Gallery images expose “Show actions” as their activation action, so holding is never the only path. Tap opens the same menu, the backdrop is a labeled close target, and toast feedback is announced through a polite live region. Reduced Motion replaces growth and spring travel with short fades.

Customization notes

Movement follows gestures, scroll position, or interruptible spring physics. A global duration is not exposed; reduced-motion fades retain their short fixed timing.