# Sleep Timer Island — React Native component from Motionary > A sleep timer picker in the Dynamic Island: a horizontal ruler slider that scrubs 0 to 120 minutes with a heat glow that trails the pointer. The pill over the sensor cutout springs open into the full iOS sleep-timer island, with rubber-banded drag, decay, snap-to-minute and a live readout. Drop it into a music, podcast or sleep app that needs a timer picker. Product page: https://motionary.dev/animations/sleep-timer-island Price: $4 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, reanimated Rarity: rare Sold by: Motionary (https://motionary.dev) ## What it is A sleep timer picker in the Dynamic Island: a horizontal ruler slider that scrubs 0 to 120 minutes with a heat glow that trails the pointer. The pill over the sensor cutout springs open into the full iOS sleep-timer island, with rubber-banded drag, decay, snap-to-minute and a live readout. Drop it into a music, podcast or sleep app that needs a timer picker. ## How it works Every value in spec.ts was sampled from a 120fps recording of the real iOS sleep-timer island and is multiplied by island width over 371, so proportions hold on any iPhone. The closed pill sits exactly over the sensor cutout, so at rest it vanishes into the hardware. All state lives on the UI thread as Reanimated 4 shared values. Gesture.Pan drives the selected minute, reproducing the UIScrollView rubber band formula in points, and release hands off to withDecay with a clamp and rubber band, then a short withTiming snaps to a whole minute. A useFrameCallback low-passes velocity to compute heat and a tail length, so the glow peaks at the pointer tick with no lag and cools over about 0.4s once still. Ticks are a recycled pool of 46 Animated.Views moved by worklets, labels are static Texts, and the readout is a TextInput written with setNativeProps every frame because Fabric drops guarded text updates. The open and close morph interpolates width, height and a continuous-curve radius, and the blur during the morph is a fixed-intensity expo-blur view crossfaded by opacity, because animating intensity dropped UI frames. The outer edges of the ruler fade through a local Expo Modules Swift view that applies a UIKit variable blur, so the module is iOS only (16.4+) and needs a development build, not Expo Go. Tested on Expo SDK 56, React Native 0.85 and Reanimated 4.3. ## What you get - TypeScript source (SleepTimerIsland.tsx, SleepPage.tsx, Backdrop.tsx) - spec.ts with every dimension and color measured from the iOS recording - ProgressiveBlur Expo native module (Swift) for the ruler edge fade - Demo entry (App.tsx) with the Sleep Timer button that opens the island - Extra: generic multi-activity island shell (src/island) with a demo screen ## 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: `@shopify/react-native-skia`, `expo-blur`, `expo-haptics`, `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 @shopify/react-native-skia expo-blur expo-haptics expo-symbols react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets ``` ## How to get it - Buy Sleep Timer Island on its own at https://motionary.dev/animations/sleep-timer-island for $4 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 - Dynamic Island Boarding Pass ($6 USD): https://motionary.dev/animations/dynamic-island-boarding-pass - Dynamic Island Member Card ($6 USD): https://motionary.dev/animations/dynamic-island-member-card - Animated Live Activity ($10 USD): https://motionary.dev/animations/animated-live-activity - 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/sleep-timer-island/llms.txt Describes: https://motionary.dev/animations/sleep-timer-island Format: llms.txt (https://llmstxt.org)