# Siri Answer Island — React Native component from Motionary > A Dynamic Island expander: the pill morphs into a listening orb, then a spinner, then an answer card you drag down into a full-screen sheet. Reanimated shared values own every shape, Skia runtime shaders paint the light, and iOS 26 liquid glass is used when present. Drop it into an assistant, search or any app that answers from the island. Product page: https://motionary.dev/animations/siri-answer-island Price: $12 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, react native, react native skia, shaders, react native gesture handler Rarity: legendary Sold by: Motionary (https://motionary.dev) ## What it is A Dynamic Island expander: the pill morphs into a listening orb, then a spinner, then an answer card you drag down into a full-screen sheet. Reanimated shared values own every shape, Skia runtime shaders paint the light, and iOS 26 liquid glass is used when present. Drop it into an assistant, search or any app that answers from the island. ## How it works The shell is a single rounded rect whose width, height, top inset and corner radius are Reanimated shared values, so every state, idle pill, listening orb, thinking loader and answer card, is the same object on a different spring rather than four views crossfading. Springs were fitted to 120fps screen recordings: the island to card morph travels in about 135ms and settles by 250ms, which is roughly a 0.55 damping ratio at 3.6Hz, and the measurements live in one metrics.ts file. Phase scheduling runs in a useFrameCallback on the UI runtime, so timers, the shader clock and the geometry never touch the JS thread; when nothing is animating the callback returns immediately and invalidates no canvas. The orb prism, the glass bevel and the six orbiting loader dots are Skia RuntimeEffect shaders driven by that same clock. Gesture.Pan drives an expand value directly while a second spring adds a small sideways swell, and release commits open. On iOS 26 the lens sits on expo-glass-effect and the shaders finish it optically; elsewhere it falls back to expo-blur, and useReducedMotion stops the breathing. Tested on Expo SDK 56 with React Native 0.85 and Reanimated 4.3 in a development build, Skia and glass rule out Expo Go. ## What you get - TypeScript source (Shell.tsx, SiriOverlay.tsx, AnswerDoc.tsx, SheetChrome.tsx) - useSiriMachine hook with the four phase state machine - metrics.ts with every measured size, spring and enter curve - Three Skia runtime shaders (prism, glass, spinner) - Demo app: animated wallpaper, launch button and notes backdrop ## Requirements - Expo SDK: `expo@^56.0.8` (the version this drop is built and tested on) - React Native: `react-native@0.85.3` - Runtime dependencies: `@react-native-masked-view/masked-view`, `@shopify/react-native-skia`, `expo-blur`, `expo-glass-effect`, `expo-haptics`, `expo-linear-gradient`, `expo-symbols`, `react-native-gesture-handler`, `react-native-reanimated`, `react-native-svg`, `react-native-worklets` - Runs in Expo Go: this drop uses no native module beyond what Expo Go already bundles on Expo SDK 56. A development build is still what you would ship to production, and is required as soon as you add a native module Expo Go does not carry. ## Install ```bash npx expo install @react-native-masked-view/masked-view @shopify/react-native-skia expo-blur expo-glass-effect expo-haptics expo-linear-gradient expo-symbols react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets ``` ## How to get it - Buy Siri Answer Island on its own at https://motionary.dev/animations/siri-answer-island for $12 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 - Glass Magnifier ($10 USD): https://motionary.dev/animations/glass-magnifier - Dot Wave Slider ($10 USD): https://motionary.dev/animations/dot-wave-slider - Hold to Confirm Button ($8 USD): https://motionary.dev/animations/hold-to-confirm-button - Halo Button ($5 USD): https://motionary.dev/animations/halo-button ## 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 Mehdi Davoodi (https://mahdidavoodi.com). 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/siri-answer-island/llms.txt Describes: https://motionary.dev/animations/siri-answer-island Format: llms.txt (https://llmstxt.org)