React Native Animated Image Welcome with Crossfades

A full-screen welcome experience where photographic scenes dissolve like film shots while a spacious wordmark breathes at the center.

How it works

1. Every scene mounts once and remains mounted for the lifetime of the component, so a transition never swaps or remounts an image.
2. An opaque loading surface stays in place until every image reports onLoad; only then do the interface and automatic sequence begin.
3. The incoming scene fades over a fully opaque outgoing scene, while a slow reversible drift creates restrained Ken Burns movement.
4. A six-second sine wave controls the wordmark spacing, while a damped spring adds a small typographic accent at every scene change.
5. The wordmark and actions use separate entrance values so the scene remains visible before the interface settles into place.

Why this one

Most cinematic welcome screens recycle two image nodes and briefly expose an unloaded source between shots. This version keeps every scene warm in memory, waits for the complete set, and always dissolves a new frame over an opaque previous frame. The result is a continuous film-like sequence with no blank flash, paired with responsive spring feedback and a subtly lit glass action.

Install

npx expo install react-native-reanimated react-native-worklets expo-image expo-linear-gradient

Usage

import CinematicWelcome from './CinematicWelcome';

const scenes = [require('./forest.jpg'), require('./stone.jpg')];

export function WelcomeScreen() {
  return <CinematicWelcome scenes={scenes} />;
}

Customize the rhythm, typography, and actions or control the sequence through its forwarded ref:

import { useRef } from 'react';
import CinematicWelcome, { type CinematicWelcomeRef } from './CinematicWelcome';

export function WelcomeScreen() {
  const welcomeRef = useRef<CinematicWelcomeRef>(null);

  return (
    <CinematicWelcome
      ref={welcomeRef}
      breath={[0.28, 0.52]}
      fadeMs={1100}
      fontFamily="YourSansFont"
      onPrimaryPress={() => beginSignup()}
      onSceneChange={(index) => trackScene(index)}
      onSecondaryPress={() => openSignIn()}
      primaryLabel="Begin"
      sceneSeconds={4}
      scenes={scenes}
      secondaryLabel="I have an account"
      wordmark="Quiet"
      wordmarkFontFamily="YourLightFont"
    />
  );
}

The forwarded ref exposes next(), pause(), and resume().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5 and Worklets 0.10
• 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

Both actions expose button roles and labels to screen readers. When reduced motion is enabled, camera drift and typographic breathing stop, while scene changes and action entry use short 300 ms fades.