About this animation
An interruptible instant-film print that follows the hand while a noisy center-out chemical mask reveals the photograph.
Why this one
Typical instant-photo demos fade a colored rectangle away uniformly. This version behaves like a physical object and a chemical image: color emerges irregularly from the center, passes through a cool cast, warms as contrast settles, and ends with one specular sweep inside the photographic surface. Fast drags advance the same continuous timeline, while a tap provides an accessible alternative.
How it works
- The component measures its container and sizes the print as a fraction of the available width and height.
- One continuous progress value drives the noise threshold, center-out reveal, color temperature, contrast, helper fade, completion bounce, and specular sweep.
- A Skia runtime shader samples the photograph and mixes it with the dormant gray-green chemistry at an irregular frontier.
- Pan velocity tilts the print up to 12 degrees; release springs position and rotation back with inherited velocity.
- Each qualifying shake advances progress by
shakeBoost, then resumes the remaining linear development timeline. - Reduced Motion presents the fully developed print without drag travel, bounce, or shine.
Install
npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-workletsFor web, initialize CanvasKit before rendering the component, following the React Native Skia Expo web setup.
Usage
import PolaroidDevelop from './PolaroidDevelop';
<PolaroidDevelop image={require('./photo.jpg')} />;Customize its material and timing:
import { useRef } from 'react';
import PolaroidDevelop, { type PolaroidDevelopRef } from './PolaroidDevelop';
const ref = useRef<PolaroidDevelopRef>(null);
<PolaroidDevelop
ref={ref}
image={require('./photo.jpg')}
caption="A slow Sunday"
developDurationMs={4800}
shakeBoost={0.12}
frameColor="#FBF8F0"
onComplete={() => announceReady()}
/>;The forwarded ref exposes reset() and shake(direction?).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
image | DataSourceParam | Required | Photograph revealed inside the frame. |
caption | string | 'A quiet afternoon' | Handwritten caption below the photo. |
developDurationMs | number | 4300 | Development time without shaking. |
shakeBoost | number | 0.15 | Progress added by each qualifying shake. |
frameColor | string | '#FAF8F3' | Instant-film frame color. |
dormantColor | string | '#5E6B5E' | Fallback color while the image loads. |
captionFontFamily | string | System font | Caption font family. |
autoStart | boolean | true | Starts development on mount. |
onComplete | () => void | — | Called once when development completes. |
accessibilityLabel | string | 'Shake photo to develop' | Screen-reader label for the print. |
style | StyleProp<ViewStyle> | — | Outer-container style. |
testID | string | — | Test identifier. |
Compatibility
- Expo SDK 57
- React Native 0.86
- Reanimated 4.5, Worklets 0.10, and React Native Skia 2.6
- iOS: supported, not yet verified on a device
- Android: supported, not yet verified on a device
- Web: supported, not yet visually verified
- Works in Expo Go because its native dependencies are included in Expo SDK 57
Accessibility
The print exposes an adjustable interaction with instructions for dragging or tapping, and its internal press target offers a labeled button alternative to shaking. The reset control belongs to the host screen. With Reduced Motion enabled, the final developed state is shown immediately and physical movement is removed.
