React Native Welcome Screen with Orbiting Avatars

A bright onboarding screen where avatars and dimensional objects circle a softly pulsing sparkle above a gradient-highlighted headline.

How it works

1. The component measures its own container with onLayout; every radius, image size, text size, and content position scales from that local width and height.
2. One Reanimated frame clock drives both icon paths. The middle ring advances clockwise while the outer ring uses the same time value in reverse at two-thirds of the speed, and each icon remains upright because only its position changes.
3. Each icon adds a small sine-wave float. Transparent objects also tilt independently, while avatars stay level inside circular colored halos.
4. Skia draws the three soft white rings, the four-point gradient sparkle, and both precisely centered title lines. The sparkle uses two repeating eased animations for its scale and rotation.
5. replay() restarts the ring reveal, staggered icon springs, and rising content entrance without resetting the continuous orbit clock.

Install

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

On web, CanvasKit must finish loading before this component mounts. Copy canvaskit.wasm to your public assets and call LoadSkiaWeb from the web entry point:

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

await LoadSkiaWeb({ locateFile: () => '/canvaskit.wasm' });

Usage

import OrbitWelcome from './OrbitWelcome';

export function WelcomeScreen() {
  return (
    <OrbitWelcome
      innerItems={[
        {
          kind: 'avatar',
          source: require('./assets/person.jpg'),
          ringColor: '#DDEBFF',
        },
        { kind: 'object', source: require('./assets/calendar.png') },
        { kind: 'object', source: require('./assets/globe.png') },
        { kind: 'object', source: require('./assets/ticket.png') },
      ]}
      outerItems={[
        { kind: 'object', source: require('./assets/pin.png') },
        {
          kind: 'avatar',
          source: require('./assets/friend.jpg'),
          ringColor: '#F1E3FF',
        },
        { kind: 'object', source: require('./assets/popper.png') },
      ]}
    />
  );
}

Use the visual knobs and imperative control to adapt the pattern:

import { useRef } from 'react';
import OrbitWelcome, { type OrbitWelcomeRef } from './OrbitWelcome';

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

  return (
    <OrbitWelcome
      ref={welcomeRef}
      innerItems={innerItems}
      outerItems={outerItems}
      brand={<YourBrand />}
      title="Plan something"
      highlight="Worth sharing"
      highlightColors={['#3E7BFA', '#C33FF1', '#FF923D']}
      sparkleColors={['#D842A0', '#FFAA42']}
      backgroundColors={['#DDECF4', '#FCF8FA', '#FAE8EF']}
      ctaLabel="Continue"
      orbitSeconds={72}
      fontFamily="YourSansFont"
      titleFont={require('./assets/YourTitleFont.ttf')}
      onCtaPress={() => navigateNext()}
    />
  );
}

The forwarded ref exposes replay().

Props

OrbitItem is either an avatar with source and ringColor, or a transparent object image with source.

Compatibility

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

Accessibility

The orbit images are decorative and hidden from screen readers. The two visual title lines are exposed as one combined accessibility label, and the primary action is a labeled button. With reduced motion enabled, the orbits, floating, object tilt, and sparkle pulse stop; the entrance becomes a 200 ms fade.