Skip to main content
The ZoomIn preset creates a screen that scales and fades in from the center. Gestures are disabled by default for this preset.

​
Function Signature

ZoomIn(
  config?: Partial<ScreenTransitionConfig>
): ScreenTransitionConfig

​
Parameters

​
config
Partial<ScreenTransitionConfig>
default:"{}"
Optional configuration to override preset defaults

​
Returns

​
ScreenTransitionConfig
object
Configuration object with animation interpolator

​
Implementation Details

​
Screen Style Interpolator

The preset combines scale and opacity animations: 
screenStyleInterpolator: ({ progress }) => {
  "worklet";

  const scale = interpolate(
    progress,
    [0, 1, 2],
    [0.5, 1, 0.5],
    Extrapolation.CLAMP,
  );

  const opacity = interpolate(
    progress,
    [0, 1, 2],
    [0, 1, 0],
    Extrapolation.CLAMP,
  );

  return {
    contentStyle: {
      transform: [{ scale }],
      opacity,
    },
  };
}
Animation behavior:
  • progress = 0: Screen is scaled to 50% and invisible (scale: 0.5, opacity: 0)
  • progress = 1: Screen is at normal size and fully visible (scale: 1, opacity: 1)
  • progress = 2: Screen scales back to 50% and fades out (scale: 0.5, opacity: 0)
Extrapolation: Uses CLAMP to prevent values from going outside the defined range.

​
Transition Spec

transitionSpec: {
  open: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restSpeedThreshold: 0.02,
  },
  close: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restSpeedThreshold: 0.02,
  },
}

​
Usage Examples

import Transition from "react-native-screen-transitions";

<Stack.Screen
  name="Detail"
  options={{
    ...Transition.Presets.ZoomIn(),
  }}
/>

​
Common Use Cases

  • Fullscreen takeovers - Dramatic entrance for important content
  • Image viewers - Expanding images to fullscreen
  • Onboarding - Attention-grabbing screen transitions
  • Splash screens - Branded entry animations
  • Alerts - Modal dialogs that need emphasis

​
Combining with Backdrop

Add a backdrop that fades in with the zoom: 
import { interpolateColor } from "react-native-reanimated";

<Stack.Screen
  name="Alert"
  options={{
    ...Transition.Presets.ZoomIn(),
    screenStyleInterpolator: ({ progress }) => {
      "worklet";
      const preset = Transition.Presets.ZoomIn().screenStyleInterpolator({ progress });
      return {
        ...preset,
        backdropStyle: {
          backgroundColor: interpolateColor(
            progress,
            [0, 1],
            ["rgba(0,0,0,0)", "rgba(0,0,0,0.6)"]
          ),
        },
      };
    },
  }}
/>

​
Notes

Gestures are disabled by default for this preset. The zoom animation is primarily designed for programmatic navigation rather than gesture-driven dismissal.
For a more dramatic effect, adjust the initial scale value to start smaller (e.g., 0.3 instead of 0.5).
When enabling gestures, make sure to provide a gestureDirection that makes sense for your use case. Vertical gestures typically work best with zoom animations.