Mastering iOS Context Menus & Link Previews: React Native & Expo Router

When building a polished iOS application, micro-interactions matter. One of the most satisfying native interactions on iOS is the Context Menu with Link Preview—the smooth animation when you long-press a card, the background blurs, and a mini preview of the destination screen appears along with contextual actions.

Implementing this behavior in React Native has historically been complicated, relying on brittle third-party libraries or custom native modules. However, with Expo Router, this native iOS interaction can now be implemented cleanly and declaratively.

---

1. The Goal: A Reusable <Preview /> Wrapper

Expo Router provides built-in components like <Link.Preview>, <Link.Menu>, and <Link.MenuAction>. However, using them directly everywhere quickly becomes repetitive—especially when dealing with dynamic or asynchronous menu items.

Instead, we created a single reusable abstraction: <Preview />. This wrapper handles:

• Routing logic
• Preview rendering
• Async menu item resolution
• Nested submenus

---

2. Designing Flexible Menu Types

First, we define a flexible structure for menu items to ensure type safety and support for nested submenus.

import type { LinkMenuActionProps, Href } from "expo-router";

export interface LinkMenuAction {
  title: string;
  icon?: LinkMenuActionProps["icon"];
  destructive?: boolean;
  onPress: () => void;
}

export interface LinkSubMenu {
  title: string;
  icon?: LinkMenuActionProps["icon"];
  actions: LinkMenuAction[];
}

export type LinkMenuItem = LinkMenuAction | LinkSubMenu;

---

3. Building the Reusable <Preview /> Component

The core component manages the state of the menu items, allowing them to be passed as a static array or a Promise (useful for fetching data on the fly).

import { Link } from "expo-router";
import { useEffect, useState, ReactNode } from "react";

export interface WithLinkPreviewProps {
  href: Href;
  children: ReactNode;
  menuItems?: LinkMenuItem[] | Promise<LinkMenuItem[]>;
  asChild?: boolean;
}

export function Preview({ href, children, menuItems, asChild = true }: WithLinkPreviewProps) {
  const [items, setItems] = useState<LinkMenuItem[]>([]);

  useEffect(() => {
    if (!menuItems) return;

    if (menuItems instanceof Promise) {
      menuItems.then(setItems);
    } else {
      setItems(menuItems);
    }
  }, [menuItems]);

  return (
    <Link href={href} asChild={asChild}>
      <Link.Trigger>{children}</Link.Trigger>

      {items.length > 0 && (
        <Link.Menu>
          {items.map((item) => {
            if ("actions" in item) {
              return (
                <Link.Menu key={item.title} title={item.title} icon={item.icon}>
                  {item.actions.map((action) => (
                    <Link.MenuAction key={action.title} {...action} />
                  ))}
                </Link.Menu>
              );
            }
            return <Link.MenuAction key={item.title} {...item} />;
          })}
        </Link.Menu>
      )}

      <Link.Preview />
    </Link>
  );
}

---

4. Encapsulating Business Logic

In real applications, we wrap the <Preview /> inside domain-specific components. For example, a CalendarPreview that allows users to bookmark events directly from the list view:

export function CalendarPreview({ event, children }) {
  const { addEvent, removeEvent, mappings } = useCalendar();
  const isBookmarked = !!mappings[event.id];

  const menuItems = [{
    title: isBookmarked ? "Remove from Calendar" : "Add to Calendar",
    icon: isBookmarked ? "calendar.badge.minus" : "calendar.badge.plus",
    destructive: isBookmarked,
    onPress: () => isBookmarked ? removeEvent(event.id) : addEvent(event),
  }];

  return (
    <Preview href={`/economic-event/${event.id}`} menuItems={menuItems}>
      {children}
    </Preview>
  );
}

---

5. Keeping UI Components Clean

Because routing and context menu logic are fully abstracted, the main UI component remains incredibly simple and focused on layout.

const EventCard = memo(({ event }) => {
  return (
    <CalendarPreview event={event}>
      <Pressable className="rounded-xl border border-gray-200 bg-white p-4">
        <Text className="text-lg font-bold">{event.name}</Text>
        <Text className="text-sm text-gray-500">{event.time}</Text>
      </Pressable>
    </CalendarPreview>
  );
});

The Result: A Native Experience

When a user long-presses the card:

1. The card lifts and the background blurs.
2. The target screen preview appears instantly.
3. The Quick Actions (Add/Remove) are displayed.

---

Developer Takeaways

If you're building an iOS-focused React Native app, these patterns can significantly improve UX. Key lessons:

• Wrap Primitives: Turn Expo Router primitives into reusable abstractions.
• Decouple Logic: Keep your UI components clean by moving interaction logic to wrappers.
• Native Feel: Small micro-interactions are what make a cross-platform app feel truly native.

Adding native context menus is much easier than it used to be. Once abstracted properly, you can apply this "premium" feel to any component in your app with almost zero friction.

Happy Coding 🚀!