Zoom Transitions

Native iOS 18+ zoom transitions between screens

Native iOS 18+ zoom transitions. The destination screen expands from a source element with a fluid animation.

import { One, Stack, useParams, useRouter } from 'one'
import { Pressable, Text, View } from 'react-native'

// source screen: wrap the tappable element
function ListScreen() {
  const router = useRouter()
  return (
    <One.iOS.ZoomTransitionSource identifier="item-1">
      <Pressable onPress={() => router.push('/detail?id=item-1')}>
        <Text>Mountain View</Text>
      </Pressable>
    </One.iOS.ZoomTransitionSource>
  )
}

// destination screen: place the enabler anywhere
function DetailScreen() {
  const { id } = useParams()
  return (
    <View>
      <Stack.Screen options={{ headerShown: false }} />
      <One.iOS.ZoomTransitionEnabler zoomTransitionSourceIdentifier={id} />
      <One.iOS.ZoomTransitionAlignmentRectDetector identifier={id}>
        <View collapsable={false}>
          <Text>Detail for {id}</Text>
        </View>
      </One.iOS.ZoomTransitionAlignmentRectDetector>
    </View>
  )
}

• Set headerShown: false on the detail screen to avoid the header overlapping during the zoom animation
• The identifier must match between ZoomTransitionSource and ZoomTransitionEnabler
• Use One.iOS.ZoomTransitionAlignmentRectDetector on the destination to align the zoom to a specific element

ZoomTransitionSource takes a required identifier, an optional alignment rect (x, y, width, height), and animateAspectRatioChange. ZoomTransitionEnabler takes the required zoomTransitionSourceIdentifier plus an optional dismissalBoundsRect (minX, maxX, minY, maxY) that bounds the dismiss gesture. ZoomTransitionAlignmentRectDetector takes the matching identifier and wraps the destination element.

Keep the source element mounted while the destination is open. UIKit resolves that element again when returning. The detector has one native child; use a non-collapsible View when that child wraps other content. Its destination rectangle is retained for the current transition’s dismissal after React removes the detector.