Queue list with a pinned mini-player bar: play, pause, next
import * as React from "react";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, Image, Progress, Text } from "@lumioui/ui";
import { LumioMark, Press, World } from "../shared";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import Animated, {
useAnimatedStyle,
useSharedValue,
withDelay,
withRepeat,
withTiming,
} from "react-native-reanimated";
interface Track {
id: string;
title: string;
artist: string;
duration: string;
coverUrl: string;
}
export interface MiniPlayerScreenProps {
queue?: Track[];
onExpandPlayer?: (track: Track) => void;
onBack?: () => void;
}
const cover = (id: string) => `https://images.unsplash.com/${id}?w=200&h=200&fit=crop&q=60&auto=format`;
const QUEUE: [Track, ...Track[]] = [
{ id: "1", title: "Midnight Sun", artist: "Aurora Fields", duration: "3:42", coverUrl: cover("photo-1493225457124-a3eb161ffa5f") },
{ id: "2", title: "Copper Sky", artist: "Terra Nova", duration: "4:08", coverUrl: cover("photo-1511379938547-c1f69419868d") },
{ id: "3", title: "Low Tide", artist: "Sable", duration: "2:56", coverUrl: cover("photo-1470225620780-dba8ba36b745") },
{ id: "4", title: "Grain", artist: "Field Notes", duration: "3:21", coverUrl: cover("photo-1508700115892-45ecd05ae2ad") },
{ id: "5", title: "Window Seat", artist: "Norra", duration: "4:44", coverUrl: cover("photo-1459749411175-04bf5292ceea") },
];
/** Three-bar equalizer — bounces while the row's track is playing. */
function EqBars({ color = "bg-[#65A30D]" }: { color?: string }) {
const reduce = useReducedMotion();
const h0 = useSharedValue(4);
const h1 = useSharedValue(4);
const h2 = useSharedValue(4);
const bars = [h0, h1, h2];
React.useEffect(() => {
bars.forEach((h, i) => {
h.value = reduce
? [12, 7, 10][i] ?? 8
: withDelay(
i * 140,
withRepeat(withTiming([12, 7, 10][i] ?? 8, { duration: 380 }), -1, true)
);
});
}, [reduce, h0, h1, h2]);
const s0 = useAnimatedStyle(() => ({ height: h0.value }));
const s1 = useAnimatedStyle(() => ({ height: h1.value }));
const s2 = useAnimatedStyle(() => ({ height: h2.value }));
return (
<View className="h-3.5 flex-row items-end gap-[2.5px]">
{[s0, s1, s2].map((style, i) => (
<Animated.View
key={i}
className={cn("w-[3px] rounded-full", color)}
style={style}
/>
))}
</View>
);
}
/** Mini player — the Spotify/Apple Music idiom: a queue list with a pinned
* mini-player bar (cover thumb + title + play/pause + next). Tapping a row
* swaps the now-playing track; the play button toggles state. */
export function MiniPlayerScreen({
queue = QUEUE,
onExpandPlayer,
onBack,
}: MiniPlayerScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [current, setCurrent] = useState<Track>(queue[0] ?? QUEUE[0]);
const [playing, setPlaying] = useState(true);
const pick = (t: Track) => {
haptics.selection();
setCurrent(t);
setPlaying(true);
onExpandPlayer?.(t);
};
const skipNext = () => {
haptics.light();
const i = queue.findIndex((t) => t.id === current.id);
setCurrent(queue[(i + 1) % queue.length] ?? QUEUE[0]);
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Up next
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: 96 }}
>
<View className="flex-row items-center justify-between px-5 pb-1 pt-2">
<Text variant="small" className="font-medium text-muted-foreground">
Queue · {queue.length} tracks
</Text>
<Text variant="small" className="text-muted-foreground">
Autoplay on
</Text>
</View>
{queue.map((t) => {
const active = t.id === current.id;
return (
<Pressable
key={t.id}
onPress={() => pick(t)}
accessibilityRole="button"
accessibilityLabel={`${t.title} by ${t.artist}, ${t.duration}${active ? ", now playing" : ""}`}
accessibilityState={{ selected: active }}
className={cn(
"mx-2 flex-row items-center gap-3 rounded-2xl px-3 py-2.5",
active && "bg-[#EDF8C4]"
)}
>
<Image
source={{ uri: t.coverUrl }}
className="h-12 w-12 rounded-xl"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<View className="flex-1">
<Text
variant="small"
className={cn("font-medium", active && "text-[#65A30D]")}
numberOfLines={1}
>
{t.title}
</Text>
<Text variant="muted" className="text-xs" numberOfLines={1}>
{t.artist}
</Text>
</View>
{active && playing ? <EqBars /> : null}
<Text variant="muted" className="text-xs tabular-nums">
{t.duration}
</Text>
</Pressable>
);
})}
</ScrollView>
{/* Pinned mini player — floats above the queue bottom. */}
<View
className="absolute inset-x-3 bottom-0"
style={{ paddingBottom: insets.bottom + 10 }}
>
<Pressable
onPress={() => {
haptics.light();
onExpandPlayer?.(current);
}}
accessibilityRole="button"
accessibilityLabel={`Now playing: ${current.title} by ${current.artist}`}
className="overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]"
style={{
shadowColor: "#000",
shadowOpacity: 0.18,
shadowRadius: 16,
shadowOffset: { width: 0, height: 8 },
elevation: 8,
}}
>
<View className="flex-row items-center gap-3 px-3 py-2.5">
<Image
source={{ uri: current.coverUrl }}
className="h-10 w-10 rounded-xl"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<View className="flex-1">
<Text variant="small" className="font-semibold" numberOfLines={1}>
{current.title}
</Text>
<Text variant="muted" className="text-xs" numberOfLines={1}>
{current.artist}
</Text>
{/* Source line — mini players credit the queue. */}
<Text variant="muted" className="text-[10px]" numberOfLines={1}>
Playing from Liked Songs
</Text>
</View>
<Pressable
onPress={() => {
haptics.light();
setPlaying((p) => !p);
}}
accessibilityRole="button"
accessibilityLabel={playing ? "Pause" : "Play"}
accessibilityState={{ expanded: !playing }}
hitSlop={10}
className="h-10 w-10 items-center justify-center"
>
<Icon name={playing ? "pause" : "play"} size="md" color="foreground" />
</Pressable>
<Pressable
onPress={skipNext}
accessibilityRole="button"
accessibilityLabel="Next track"
hitSlop={10}
className="h-10 w-10 items-center justify-center"
>
<Icon name="skip-forward" size="md" color="foreground" />
</Pressable>
</View>
<Progress value={62} className="h-0.5 rounded-none" />
</Pressable>
</View>
</SafeAreaView>
</World>
);
}
MiniPlayerScreen.displayName = "MiniPlayerScreen";
Recreate the "Mini Player Screen" screen in React Native using LumioUI.
Goal: Queue list with a pinned mini-player bar: play, pause, next 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 add media-mini-player
```
Or pull just the components: `npx lumioui add icon image progress text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×3
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×2
### `progress` — Animated fill bar with indeterminate sweep mode.
- `<Progress>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×9
## 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/mini-player.tsx` exporting MiniPlayerScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, Image, Progress, Text } from "@lumioui/ui";
import { LumioMark, Press, World } from "../shared";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import Animated, {
useAnimatedStyle,
useSharedValue,
withDelay,
withRepeat,
withTiming,
} from "react-native-reanimated";
interface Track {
id: string;
title: string;
artist: string;
duration: string;
coverUrl: string;
}
export interface MiniPlayerScreenProps {
queue?: Track[];
onExpandPlayer?: (track: Track) => void;
onBack?: () => void;
}
const cover = (id: string) => `https://images.unsplash.com/${id}?w=200&h=200&fit=crop&q=60&auto=format`;
const QUEUE: [Track, ...Track[]] = [
{ id: "1", title: "Midnight Sun", artist: "Aurora Fields", duration: "3:42", coverUrl: cover("photo-1493225457124-a3eb161ffa5f") },
{ id: "2", title: "Copper Sky", artist: "Terra Nova", duration: "4:08", coverUrl: cover("photo-1511379938547-c1f69419868d") },
{ id: "3", title: "Low Tide", artist: "Sable", duration: "2:56", coverUrl: cover("photo-1470225620780-dba8ba36b745") },
{ id: "4", title: "Grain", artist: "Field Notes", duration: "3:21", coverUrl: cover("photo-1508700115892-45ecd05ae2ad") },
{ id: "5", title: "Window Seat", artist: "Norra", duration: "4:44", coverUrl: cover("photo-1459749411175-04bf5292ceea") },
];
/** Three-bar equalizer — bounces while the row's track is playing. */
function EqBars({ color = "bg-[#65A30D]" }: { color?: string }) {
const reduce = useReducedMotion();
const h0 = useSharedValue(4);
const h1 = useSharedValue(4);
const h2 = useSharedValue(4);
const bars = [h0, h1, h2];
React.useEffect(() => {
bars.forEach((h, i) => {
h.value = reduce
? [12, 7, 10][i] ?? 8
: withDelay(
i * 140,
withRepeat(withTiming([12, 7, 10][i] ?? 8, { duration: 380 }), -1, true)
);
});
}, [reduce, h0, h1, h2]);
const s0 = useAnimatedStyle(() => ({ height: h0.value }));
const s1 = useAnimatedStyle(() => ({ height: h1.value }));
const s2 = useAnimatedStyle(() => ({ height: h2.value }));
return (
<View className="h-3.5 flex-row items-end gap-[2.5px]">
{[s0, s1, s2].map((style, i) => (
<Animated.View
key={i}
className={cn("w-[3px] rounded-full", color)}
style={style}
/>
))}
</View>
);
}
/** Mini player — the Spotify/Apple Music idiom: a queue list with a pinned
* mini-player bar (cover thumb + title + play/pause + next). Tapping a row
* swaps the now-playing track; the play button toggles state. */
export function MiniPlayerScreen({
queue = QUEUE,
onExpandPlayer,
onBack,
}: MiniPlayerScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [current, setCurrent] = useState<Track>(queue[0] ?? QUEUE[0]);
const [playing, setPlaying] = useState(true);
const pick = (t: Track) => {
haptics.selection();
setCurrent(t);
setPlaying(true);
onExpandPlayer?.(t);
};
const skipNext = () => {
haptics.light();
const i = queue.findIndex((t) => t.id === current.id);
setCurrent(queue[(i + 1) % queue.length] ?? QUEUE[0]);
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<View className="h-11 w-11" />
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Up next
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: 96 }}
>
<View className="flex-row items-center justify-between px-5 pb-1 pt-2">
<Text variant="small" className="font-medium text-muted-foreground">
Queue · {queue.length} tracks
</Text>
<Text variant="small" className="text-muted-foreground">
Autoplay on
</Text>
</View>
{queue.map((t) => {
const active = t.id === current.id;
return (
<Pressable
key={t.id}
onPress={() => pick(t)}
accessibilityRole="button"
accessibilityLabel={`${t.title} by ${t.artist}, ${t.duration}${active ? ", now playing" : ""}`}
accessibilityState={{ selected: active }}
className={cn(
"mx-2 flex-row items-center gap-3 rounded-2xl px-3 py-2.5",
active && "bg-[#EDF8C4]"
)}
>
<Image
source={{ uri: t.coverUrl }}
className="h-12 w-12 rounded-xl"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<View className="flex-1">
<Text
variant="small"
className={cn("font-medium", active && "text-[#65A30D]")}
numberOfLines={1}
>
{t.title}
</Text>
<Text variant="muted" className="text-xs" numberOfLines={1}>
{t.artist}
</Text>
</View>
{active && playing ? <EqBars /> : null}
<Text variant="muted" className="text-xs tabular-nums">
{t.duration}
</Text>
</Pressable>
);
})}
</ScrollView>
{/* Pinned mini player — floats above the queue bottom. */}
<View
className="absolute inset-x-3 bottom-0"
style={{ paddingBottom: insets.bottom + 10 }}
>
<Pressable
onPress={() => {
haptics.light();
onExpandPlayer?.(current);
}}
accessibilityRole="button"
accessibilityLabel={`Now playing: ${current.title} by ${current.artist}`}
className="overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]"
style={{
shadowColor: "#000",
shadowOpacity: 0.18,
shadowRadius: 16,
shadowOffset: { width: 0, height: 8 },
elevation: 8,
}}
>
<View className="flex-row items-center gap-3 px-3 py-2.5">
<Image
source={{ uri: current.coverUrl }}
className="h-10 w-10 rounded-xl"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<View className="flex-1">
<Text variant="small" className="font-semibold" numberOfLines={1}>
{current.title}
</Text>
<Text variant="muted" className="text-xs" numberOfLines={1}>
{current.artist}
</Text>
{/* Source line — mini players credit the queue. */}
<Text variant="muted" className="text-[10px]" numberOfLines={1}>
Playing from Liked Songs
</Text>
</View>
<Pressable
onPress={() => {
haptics.light();
setPlaying((p) => !p);
}}
accessibilityRole="button"
accessibilityLabel={playing ? "Pause" : "Play"}
accessibilityState={{ expanded: !playing }}
hitSlop={10}
className="h-10 w-10 items-center justify-center"
>
<Icon name={playing ? "pause" : "play"} size="md" color="foreground" />
</Pressable>
<Pressable
onPress={skipNext}
accessibilityRole="button"
accessibilityLabel="Next track"
hitSlop={10}
className="h-10 w-10 items-center justify-center"
>
<Icon name="skip-forward" size="md" color="foreground" />
</Pressable>
</View>
<Progress value={62} className="h-0.5 rounded-none" />
</Pressable>
</View>
</SafeAreaView>
</World>
);
}
MiniPlayerScreen.displayName = "MiniPlayerScreen";
```
Screen: https://lumioui.dev/screens/media-mini-player