React Native Onboarding Animation with Infinite Zoom

A cinematic onboarding sequence that travels through nested photographic worlds before revealing nearby friends and a bold brand screen.

How it works

1. One continuous journey shared value drives the complete sequence, so images, titles, friend markers, counters, the brand screen, and the CTA cannot drift onto separate clocks.
2. The camera uses a continuous velocity profile: a gentle acceleration, a constant-speed cruise, and a long deceleration into the final image. Every layer reads the same camera position, which removes speed resets at level boundaries.
3. Titles are derived directly from that camera position and cross-fade while traveling a short distance, with no React state update or independent animation between levels.
4. After the camera stops, friend markers settle in with a restrained spring-shaped path. The completed scene then holds before the brand badge and CTA enter.
5. Reduced Motion keeps the narrative order but replaces scaling and overshoot with cross-fades and shorter holds.

Timing

levelSeconds controls the camera travel time per transition. With the four-level demo and the default 1.8, the timing is:

The default four-level sequence therefore finishes in 7.6s. A different number of levels changes only the camera-travel portion. Reduced Motion uses 250ms marker and reveal phases, a 40ms marker stagger, and a 250ms final breath.

Why this one

Many infinite-zoom intros animate each layer as a separate clip, creating tiny pauses or acceleration resets that become especially noticeable near the end. This implementation treats the entire piece as one choreographed journey, preserves velocity through every photographic handoff, and gives the destination enough time to settle before asking the viewer to act. The restrained type movement, soft depth, single accent, and delayed white CTA keep the cinematic effect legible instead of turning the finish into a pileup of competing animations.

Install

npx expo install react-native-reanimated react-native-worklets expo-image @shopify/react-native-skia

On web, load Skia before rendering this component. The Native Animation catalog handles that asynchronous setup at its app boundary.

Usage

import InfiniteZoomIntro from './InfiniteZoomIntro';

const levels = [
  { image: require('./overview.jpg'), title: 'The world' },
  { image: require('./neighborhood.jpg'), title: 'Close to home' },
];

export function IntroScreen() {
  return <InfiniteZoomIntro levels={levels} />;
}

Customize the pacing, people, typography, and final action or control playback through its ref:

import { useRef } from 'react';
import InfiniteZoomIntro, { type InfiniteZoomIntroRef } from './InfiniteZoomIntro';

export function SocialIntro() {
  const introRef = useRef<InfiniteZoomIntroRef>(null);

  return (
    <InfiniteZoomIntro
      accentColor="#5B4BFF"
      brand="Together"
      ctaLabel="Find my circle"
      fontFamily="YourSansFont"
      friends={friends}
      levelSeconds={2.1}
      levels={levels}
      onCtaPress={() => continueOnboarding()}
      onFinish={() => trackIntroComplete()}
      ref={introRef}
      titleFontFamily="YourDisplayFont"
    />
  );
}

The forwarded ref exposes replay() and skip().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5, Worklets 0.10, and React Native Skia 2.6
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: supported, verified by the project build
• Works in Expo Go because its native dependencies are included in Expo SDK 57

Accessibility

The action is exposed as a labeled button, titles are announced as headings, and friend markers include their distance. With Reduce Motion enabled, image levels cross-fade without scaling, markers fade without bouncing, and the badge remains still.