Adding ios 18 zoom functionality to push screen in RNN with options

[markdevocht]

PR: iOS 18+ fluid zoom transition for stack push

Summary

Adds support for UIKit’s fluid zoom transition when pushing onto a stack, exposed as animations.push.zoom in layout options. This lets list → detail flows use the same system zoom morph as native iOS 18+ apps (interactive slow-down, reverse, dismiss-by-drag), without reimplementing the animation in RNN.

Motivation

RNN already supports custom hero-style transitions via sharedElementTransitions on both iOS and Android. That path is flexible but does not match Apple’s system fluid zoom on iOS 18+. Apps that want the Photos-style transition should be able to opt in with a small, declarative API instead of wiring preferredTransition in native code themselves.

What’s included

• JS / TS: ZoomTransitionOptions and animations.push.zoom on StackPushAnimationOptions (fromId, optional enabled).
• iOS native: Parse zoom on RNNScreenTransition, resolve source view via nativeID + RNNElementFinder, set destination.preferredTransition with zoomWithOptions: before pushViewController:animated: (iOS 18+ only).
• Docs: Animations guide and API reference for zoom usage and platform limits.

Usage

Tag the source view in React:

<View nativeID={`product-thumb-${item.id}`}>
  <Image source={item.image} />
</View>

On push, pass the same id:

Navigation.push(componentId, {
  component: {
    name: 'ProductDetail',
    options: {
      animations: {
        push: {
          zoom: { fromId: `product-thumb-${item.id}` },
        },
      },
    },
  },
});

Reverse zoom on pop is handled by UIKit when the detail screen is popped; no animations.pop.zoom is required.

Behavior and constraints

Topic	Behavior
Platform	iOS 18+ only. Older iOS: option is ignored; normal stack push.
Android	Option is ignored; use sharedElementTransitions for a similar hero effect.
Scope	animations.push only — not pop, setStackRoot, or modals in this change.
Animated push	Applied only when animated: true and zoom is enabled with a non-empty fromId.
vs shared elements	If sharedElementTransitions, content, topBar, or elementTransitions custom animations are set on the same push, zoom is not applied (hasCustomAnimation takes precedence).
Implementation	Uses UIViewController.preferredTransition / system zoom — not RNN’s ScreenAnimationController shared-element animator.

Relationship to existing animations

• sharedElementTransitions — RNN custom hero on iOS and Android; fromId + toId, configurable duration/interpolation. Still the right choice for cross-platform hero animations or fine-grained control.
• animations.push.zoom — iOS 18+ system transition; single fromId matching nativeID; native look and interaction.

These are intentionally separate APIs; do not combine them on the same push if you want zoom.

iOS example: