# Dynamic Island Instant Camera — React Native component from Motionary > A React Native camera screen that opens out of the Dynamic Island, then prints each shot as an instant photo that develops on screen. Pull down and the island grows into a live VisionCamera lens; press the shutter and a Skia print feeds out of a slot and comes up over a minute, faster if you shake it. Drop it into a photo or journaling app as its capture screen. Product page: https://motionary.dev/animations/dynamic-island-instant-camera Price: $10 USD (live price on the product page) License: single developer, unlimited personal and commercial apps Delivery: instant download of the full TypeScript source after checkout Stack: expo blur, expo, react native skia, reanimated Rarity: legendary Sold by: Motionary (https://motionary.dev) ## What it is A React Native camera screen that opens out of the Dynamic Island, then prints each shot as an instant photo that develops on screen. Pull down and the island grows into a live VisionCamera lens; press the shutter and a Skia print feeds out of a slot and comes up over a minute, faster if you shake it. Drop it into a photo or journaling app as its capture screen. ## How it works Everything that moves runs on the UI thread. One Reanimated shared value drives the whole screen: a single Gesture.Pan writes an offset where negative opens the lens and positive scrolls the album, with rubber banding and withDecay momentum, so there is no ScrollView. The screen is two @shopify/react-native-skia canvases, so hit testing is arithmetic in a worklet. The camera body starts as a rounded rect that matches the Dynamic Island cutout (125.33 x 36.67 pt) and grows into a 243 pt lens barrel with the react-native-vision-camera v5 preview inside it. While the print feeds out it is mapped onto a projected quad with a homography, then two critically damped springs drop it flat onto the album. One SkSL runtime effect grades every photo and doubles as development: a pale ghost that gains contrast, then colour, over 60 seconds, with noise so it comes up unevenly. useAnimatedSensor feeds the accelerometer into a useFrameCallback worklet, so shaking speeds development and swings the print like loose paper. It needs a development build, since VisionCamera v5 and Nitro modules do not run in Expo Go, and was built on Expo SDK 56 with Reanimated 4.3. The layout is designed around the iPhone Dynamic Island; on phones without one, including Android, the pill is drawn with no cutout behind it. In the iOS Simulator, which has no camera, the lens plays a looping demo reel. ## What you get - TypeScript source (Blip.tsx + Scene, CameraBody, Album, FilmCard, Viewfinder, Chrome) - Instant-film SkSL shader (shaders.ts) - Measured layout and timing constants (theme.ts) - On-disk album store with developing prints (store.ts) - Simulator demo reel + handheld-reel.swift generator ## Requirements - Expo SDK: `expo@~56.0.11` (the version this drop is built and tested on) - React Native: `react-native@0.85.3` - Runtime dependencies: `@shopify/react-native-skia`, `expo-blur`, `expo-file-system`, `expo-haptics`, `expo-media-library`, `react-native-gesture-handler`, `react-native-nitro-image`, `react-native-nitro-modules`, `react-native-reanimated`, `react-native-vision-camera`, `react-native-worklets` - Requires a development build, not Expo Go, because it depends on the native module react-native-vision-camera, react-native-nitro-modules. ## Install ```bash npx expo install @shopify/react-native-skia expo-blur expo-file-system expo-haptics expo-media-library react-native-gesture-handler react-native-nitro-image react-native-nitro-modules react-native-reanimated react-native-vision-camera react-native-worklets ``` ## How to get it - Buy Dynamic Island Instant Camera on its own at https://motionary.dev/animations/dynamic-island-instant-camera for $10 USD. Secure Stripe checkout, instant download, no subscription and no renewal. - Or get it with the Motionary lifetime pass: every drop and every build, current and future, for one payment with no renewal. https://motionary.dev/pricing - A team license covers up to 10 developers, each with their own account. https://motionary.dev/pricing - License terms: https://motionary.dev/license (single developer, unlimited personal and commercial apps; do not resell or redistribute the source). - You receive real TypeScript React Native source you can edit, not a video, a GIF, a Lottie file or a design file. ## Related drops on Motionary - Gooey Profile (Free): https://motionary.dev/animations/gooey-profile - Rolling Scroll Gallery ($8 USD): https://motionary.dev/animations/rolling-scroll-gallery - Halo Button ($5 USD): https://motionary.dev/animations/halo-button - Voice Glow Carousel ($7 USD): https://motionary.dev/animations/voice-glow-carousel ## About Motionary Motionary (https://motionary.dev) is a shop for premium, production-ready React Native and Expo animation and interaction components, built with Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop" and ships as editable TypeScript source, not a video, a GIF or a design file. Motionary sells three things: individual drops (roughly $3 to $12 each, some free), Builds (a complete app shipped end to end, with every drop inside it), and a lifetime pass that covers every drop and every build, current and future, for one payment with no subscription. A team license covers a whole squad, each developer with their own account. Checkout is Stripe and delivery is an instant download. Created and curated by Motionary (https://motionary.dev). Catalog and key pages: - All drops: https://motionary.dev/animations - Builds (complete apps): https://motionary.dev/builds - Pricing, lifetime pass and team license: https://motionary.dev/pricing - Free React Native component reference: https://motionary.dev/components - License: https://motionary.dev/license - Machine-readable overview: https://motionary.dev/llms.txt - Machine-readable full catalog: https://motionary.dev/llms-full.txt ## File metadata Canonical URL of this file: https://motionary.dev/animations/dynamic-island-instant-camera/llms.txt Describes: https://motionary.dev/animations/dynamic-island-instant-camera Format: llms.txt (https://llmstxt.org)