1# Apple Zoom Transitions
2 
3Fluid zoom transitions for navigating between screens. iOS 18+, Expo SDK 55+, Stack navigator only.
4 
5```tsx
6import { Link } from "expo-router";
7```
8 
9## Basic Zoom
10 
11Use `withAppleZoom` on `Link.Trigger` to zoom the entire trigger element into the destination screen:
12 
13```tsx
14<Link href="/photo" asChild>
15  <Link.Trigger withAppleZoom>
16    <Pressable>
17      <Image
18        source={{ uri: "https://example.com/thumb.jpg" }}
19        style={{ width: 120, height: 120, borderRadius: 12 }}
20      />
21    </Pressable>
22  </Link.Trigger>
23</Link>
24```
25 
26## Targeted Zoom with `Link.AppleZoom`
27 
28Wrap only the element that should animate. Siblings outside `Link.AppleZoom` are not part of the transition:
29 
30```tsx
31<Link href="/photo" asChild>
32  <Link.Trigger>
33    <Pressable style={{ alignItems: "center" }}>
34      <Link.AppleZoom>
35        <Image
36          source={{ uri: "https://example.com/thumb.jpg" }}
37          style={{ width: 200, aspectRatio: 4 / 3 }}
38        />
39      </Link.AppleZoom>
40      <Text>Caption text (not zoomed)</Text>
41    </Pressable>
42  </Link.Trigger>
43</Link>
44```
45 
46`Link.AppleZoom` accepts only a single child element.
47 
48## Destination Target
49 
50Use `Link.AppleZoomTarget` on the destination screen to align the zoom animation to a specific element:
51 
52```tsx
53// Destination screen (e.g., app/photo.tsx)
54import { Link } from "expo-router";
55 
56export default function PhotoScreen() {
57  return (
58    <View style={{ flex: 1 }}>
59      <Link.AppleZoomTarget>
60        <Image
61          source={{ uri: "https://example.com/full.jpg" }}
62          style={{ width: "100%", aspectRatio: 4 / 3 }}
63        />
64      </Link.AppleZoomTarget>
65      <Text>Photo details below</Text>
66    </View>
67  );
68}
69```
70 
71Without a target, the zoom animates to fill the entire destination screen.
72 
73## Custom Alignment Rectangle
74 
75For manual control over where the zoom lands on the destination, use `alignmentRect` instead of `Link.AppleZoomTarget`:
76 
77```tsx
78<Link.AppleZoom alignmentRect={{ x: 0, y: 0, width: 200, height: 300 }}>
79  <Image source={{ uri: "https://example.com/thumb.jpg" }} />
80</Link.AppleZoom>
81```
82 
83Coordinates are in the destination screen's coordinate space. Prefer `Link.AppleZoomTarget` when possible — use `alignmentRect` only when the target element isn't available as a React component.
84 
85## Controlling Dismissal
86 
87Zoom screens support interactive dismissal gestures by default (pinch, swipe down when scrolled to top, swipe from leading edge). Use `usePreventZoomTransitionDismissal` on the destination screen to control this.
88 
89### Disable all dismissal gestures
90 
91```tsx
92import { usePreventZoomTransitionDismissal } from "expo-router";
93 
94export default function PhotoScreen() {
95  usePreventZoomTransitionDismissal();
96  return <Image source={{ uri: "https://example.com/full.jpg" }} />;
97}
98```
99 
100### Restrict dismissal to a specific area
101 
102Use `unstable_dismissalBoundsRect` to prevent conflicts with scrollable content:
103 
104```tsx
105usePreventZoomTransitionDismissal({
106  unstable_dismissalBoundsRect: {
107    minX: 0,
108    minY: 0,
109    maxX: 300,
110    maxY: 300,
111  },
112});
113```
114 
115This is useful when the destination contains a zoomable scroll view — the system gives that scroll view precedence over the dismiss gesture.
116 
117## Combining with Link.Preview
118 
119Zoom transitions work alongside long-press previews:
120 
121```tsx
122<Link href="/photo" asChild>
123  <Link.Trigger withAppleZoom>
124    <Pressable>
125      <Image
126        source={{ uri: "https://example.com/thumb.jpg" }}
127        style={{ width: 120, height: 120 }}
128      />
129    </Pressable>
130  </Link.Trigger>
131  <Link.Preview />
132</Link>
133```
134 
135## Best Practices
136 
137**Good use cases:**
138- Thumbnail → full image (gallery, profile photos)
139- Card → detail screen with similar visual content
140- Source and destination with similar aspect ratios
141 
142**Avoid:**
143- Skinny full-width list rows as zoom sources — the transition looks unnatural
144- Mismatched aspect ratios between source and destination without `alignmentRect`
145- Using zoom with sheets or popovers — only works in Stack navigator
146- Hiding the navigation bar — known issues with header visibility during transitions
147 
148**Tips:**
149- Always provide a close or back button — dismissal gestures are not discoverable
150- If the destination has a zoomable scroll view, use `unstable_dismissalBoundsRect` to avoid gesture conflicts
151- Source view doesn't need to match the tap target — only the `Link.AppleZoom` wrapped element animates
152- When source is unavailable (e.g., scrolled off screen), the transition zooms from the center of the screen
153 
154## References
155 
156- Expo Router Zoom Transitions: https://docs.expo.dev/router/advanced/zoom-transition/
157- Link.AppleZoom API: https://docs.expo.dev/versions/v55.0.0/sdk/router/#linkapplezoom
158- Apple UIKit Fluid Transitions: https://developer.apple.com/documentation/uikit/enhancing-your-app-with-fluid-transitions
159