Audiobook Player
Media Pro
Listen to an audiobook with chapter and whole-book progress side by side. Set a sleep timer and the light on the cover fades with the countdown, so the whole screen winds down toward sleep.
More in Media
View all 16Agent prompt
Paste into Claude Code, Cursor or Devin to rebuild this screen.
Recreate the "Audiobook Player" screen in React Native using LumioUI.
Goal: Listen to an audiobook with chapter and whole-book progress side by side. Set a sleep timer and the light on the cover fades with the countdown, so the whole screen winds down toward sleep. Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx @lumioui/cli add pro/media-audiobook-player
```
Or pull just the components: `npx @lumioui/cli add pro/animated-icons icon slider text`
Native packages:
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `animated-icons` — Hand-drawn icon set that rests still until you set it moving with springs, draw-ons and morphs. A short trace of light runs along each icon as it moves. Looping is kept for icons tied to a live state.
- `<AnimatedIcon>` ×1
### `icon` — Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.
- `<Icon>` ×3
### `slider` — Slider with an optional value bubble and tick marks for stepped values. The fill brightens while you drag, and it can give a brief flicker when you push past either end.
- `<Slider>` ×1
### `text` — Themed type scale from caption to display that follows light and dark mode. Includes a pull-quote style with an accent rule and a quieter dimmed tone for secondary text.
- `<Text>` ×18
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/media/audiobook-player.tsx` exporting AudiobookPlayerScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
This is a LumioUI Pro item: its source is not published in the docs. Install it with a Pro license key
(set `LUMIO_LICENSE_KEY`; keys are on lumioui.com/account) and read the installed file as the reference:
```bash
npx @lumioui/cli add pro/media-audiobook-player
```
The source lands at `screens/media/audiobook-player.tsx`.
Screen: https://lumioui.com/screens/media-audiobook-player