React Native Welcome Animation with Horizon Glow

A dark welcome screen where a blue planetary rim gradually rises into a warm, slow-moving dawn.

How it works

1. The component measures its own container and positions every layer as a fraction of that width and height.
2. A full-screen Skia runtime shader measures the signed distance from a large circle to build the narrow inner rim, soft outer halo, and warm angular highlight.
3. One reveal shared value controls the rim width and brightness. A UI-thread clock moves the warm highlight along the arc and refreshes the film grain without React renders.
4. The planet interior is faded back into the background, leaving only the horizon visible.
5. The primary and secondary actions scale on press and spring back without moving the static welcome copy.

Install

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

For web, follow Skia's CanvasKit setup and load it before rendering your app:

import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

LoadSkiaWeb({ locateFile: (file) => `/${file}` }).then(() => {
  // Register or render the app here.
});

Copy the CanvasKit WASM file from node_modules/canvaskit-wasm/bin/full/canvaskit.wasm into your web public directory, or return its hosted URL from locateFile.

Usage

import HorizonGlowWelcome from './HorizonGlowWelcome';

export function WelcomeScreen() {
  return <HorizonGlowWelcome onPrimaryPress={() => openOnboarding()} />;
}

Use the visual controls and imperative replay method to adapt the pattern:

import { useRef } from 'react';
import HorizonGlowWelcome, {
  type HorizonGlowWelcomeRef,
} from './HorizonGlowWelcome';

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

  return (
    <HorizonGlowWelcome
      ref={welcomeRef}
      title="Welcome aboard"
      subtitle="A calmer way to organize your day."
      rimColors={['#2348E8', '#A8BCFF', '#FFD8AD']}
      sweepSeconds={16}
      grain={0.35}
      onRevealEnd={() => announceReady()}
    />
  );
}

The forwarded ref exposes replay().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5
• React Native Worklets 0.10
• React Native Skia 2.6
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: supported, pending catalog verification
• Works in Expo Go because the installed Expo SDK includes Skia, Reanimated, and Worklets

Accessibility

Both actions expose the button role and use their visible labels for screen readers. With Reduce Motion enabled, the horizon fades directly to its final state over 300 ms, the warm highlight remains still, and the grain becomes static.