React Native Water Splash with Refraction and Drag

A tactile welcome screen where a floating image disturbs a living pool before diving beneath the surface.

How it works

1. The component measures its own container with onLayout, then derives every position and size from that local width and height.
2. A Skia runtime shader draws the tiled pool, animated caustics, soft foliage shadows, wake, and expanding touch ripple.
3. A displacement-map shader refracts the title and image shadow with the same wave field, keeping all water layers synchronized.
4. One Reanimated progress value drives the title fade, welcome reveal, image scale, and return choreography on the UI thread.
5. The pan gesture adds wake and tilt from pointer velocity; releasing high enough triggers the entry spring and calls onEnter.

Install

npx expo install expo-image react-native-gesture-handler react-native-reanimated react-native-worklets @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 WaterRefractionSplash from './WaterRefractionSplash';

export function WelcomeScreen() {
  return (
    <WaterRefractionSplash
      floatingImage={require('./assets/leaf.png')}
      onEnter={() => navigateNext()}
    />
  );
}

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

import { useRef } from 'react';
import WaterRefractionSplash, {
  type WaterRefractionSplashRef,
} from './WaterRefractionSplash';

export function BrandedWelcome() {
  const splashRef = useRef<WaterRefractionSplashRef>(null);

  return (
    <WaterRefractionSplash
      ref={splashRef}
      title="Breathe"
      instruction="Drag the leaf to enter"
      welcomeText="You're here"
      floatingImage={require('./assets/leaf.png')}
      floatingImageAspectRatio={1.1}
      titleFont={require('./assets/YourSerif.ttf')}
      instructionFontFamily="YourSans"
      welcomeFontFamily="YourSerif"
      look="rippled"
      waveAmplitude={0.015}
      causticsIntensity={0.3}
      shadowDarkness={0.7}
    />
  );
}

The forwarded ref exposes enter(), reset(), and simulateDrag().

Props

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 Expo SDK 57

Accessibility

The floating image is exposed as a labeled button, and tapping it provides the same entry path as dragging. With reduced motion enabled, continuous water, floating, rotation, and ripple motion stop; entry and reveal use short fades and direct movement.