React Native Tilted Photo Grid Onboarding

A full-screen onboarding pattern with four tilted photo rows that enter together, then take turns moving through the grid.

How it works

1. The component measures its own container with onLayout, so card and grid sizes stay proportional inside a screen, modal, or tablet layout.
2. It waits for all 32 card images to load, with a configurable timeout as a fallback, before revealing the composition.
3. Each row renders a second copy of its eight cards so it can wrap without exposing an empty edge.
4. Reanimated shared values drive the row turns and the staggered copy entrance on the UI thread.
5. Alternating rows move in opposite directions, with their turns offset so only one row moves at a time.

Install

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

Usage

import TiltedGridOnboarding from './TiltedGridOnboarding';

const cards = [
  require('./assets/card-01.jpg'),
  // Add 31 more local or remote image sources.
];

export function WelcomeScreen() {
  return <TiltedGridOnboarding cards={cards} />;
}

Customize the measured look and replay the full entrance when needed:

import { useRef } from 'react';
import TiltedGridOnboarding, {
  type TiltedGridOnboardingRef,
} from './TiltedGridOnboarding';

export function WelcomeScreen() {
  const onboardingRef = useRef<TiltedGridOnboardingRef>(null);

  return (
    <TiltedGridOnboarding
      ref={onboardingRef}
      cards={cards}
      title="Make your"
      highlightedTitle="next idea"
      titleSuffix="feel real"
      subtitle="Turn a short prompt into something worth sharing."
      ctaLabel="Start creating"
      accentColor="#7C3AED"
      gridRotation={-8}
      turnDuration={900}
      titleFontFamily="YourRegularFont"
      highlightedTitleFontFamily="YourBoldFont"
      ctaFontFamily="YourSemiboldFont"
      onCtaPress={() => continueOnboarding()}
      onAnimationStart={() => trackAnimationStart()}
    />
  );
}

The forwarded ref exposes replay().

Props

Compatibility

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

Accessibility

The primary action is exposed as a button and accepts a custom screen-reader label. With reduced motion enabled, the looping card movement stops and the card rows, title, subtitle, and action use a short fade; the button keeps its brief press feedback.