Podium + ranked list + your rank
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Glass, Icon, List, SegmentedControl, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, World } from "../shared";
export interface Leader {
id: string;
name: string;
points: string;
avatarUrl: string;
}
export interface LeaderboardScreenProps {
contest?: string;
leaders?: Leader[];
you?: { rank: number; points: string };
onBack?: () => void;
}
const DEFAULT_LEADERS: Leader[] = [
{ id: "l1", name: "Priya Nair", points: "2,840", avatarUrl: "https://i.pravatar.cc/150?img=32" },
{ id: "l2", name: "Marcus Oduya", points: "2,690", avatarUrl: "https://i.pravatar.cc/150?img=59" },
{ id: "l3", name: "Noah Reyes", points: "2,510", avatarUrl: "https://i.pravatar.cc/150?img=13" },
{ id: "l4", name: "Lena Kovács", points: "2,300", avatarUrl: "https://i.pravatar.cc/150?img=45" },
{ id: "l5", name: "Tariq Aziz", points: "2,180", avatarUrl: "https://i.pravatar.cc/150?img=67" },
{ id: "l6", name: "Mira Castellanos", points: "2,140", avatarUrl: "https://i.pravatar.cc/150?img=44" },
{ id: "l7", name: "Jonas Lindqvist", points: "2,090", avatarUrl: "https://i.pravatar.cc/150?img=53" },
{ id: "l8", name: "Ada Okafor", points: "2,040", avatarUrl: "https://i.pravatar.cc/150?img=25" },
{ id: "l9", name: "Ren Ishida", points: "1,980", avatarUrl: "https://i.pravatar.cc/150?img=61" },
{ id: "l10", name: "Sofia Marchetti", points: "1,950", avatarUrl: "https://i.pravatar.cc/150?img=41" },
{ id: "l11", name: "Dev Patel", points: "1,920", avatarUrl: "https://i.pravatar.cc/150?img=11" },
];
/** Leaderboard — podium top-3 + ranked list + your rank pinned. */
export function LeaderboardScreen({
contest = "September Challenge",
leaders = DEFAULT_LEADERS,
you = { rank: 12, points: "1,940" },
onBack,
}: LeaderboardScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [range, setRange] = React.useState("Week");
const [first, second, third, ...rest] = leaders;
const podium = (l: Leader, place: 1 | 2 | 3) => {
const dim = place === 1 ? "h-20 w-20" : "h-14 w-14";
const medal =
place === 1 ? "bg-warning" : place === 2 ? "bg-muted-foreground" : "bg-warning/60";
return (
<View className="items-center gap-1">
<Mount className="relative">
{/* Crown over first place — the podium's only ornament. */}
{place === 1 ? (
<Icon
name="crown"
size="sm"
color="#F59E0B"
className="absolute -top-5 z-10 self-center"
/>
) : null}
<Avatar
size="xl"
source={{ uri: l.avatarUrl }}
fallback={l.name}
alt={l.name}
className={dim}
/>
<View
className={`absolute -bottom-1 -right-1 h-6 w-6 items-center justify-center rounded-full border-2 border-background ${medal}`}
>
<Text className="text-[10px] font-bold text-primary-foreground">
{place}
</Text>
</View>
</Mount>
<Text className="text-xs font-medium" numberOfLines={1}>
{l.name.split(" ")[0]}
</Text>
<Text className="text-[10px] text-muted-foreground">{l.points}</Text>
</View>
);
};
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">
Leaderboard
</Text>
</View>
</View>
</View>
<Mount className="mt-14 pt-1">
<Text variant="muted" className="pb-1 text-center text-xs">
Season 4 · resets in 3 days
</Text>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
>
{/* Contest + range. */}
<Mount delay={60} className="px-4 pt-1">
<Text className="text-sm text-muted-foreground">{contest}</Text>
<View className="mt-2">
<SegmentedControl
options={["Week", "Month", "All"]}
value={range}
onValueChange={(v) => {
haptics.selection();
setRange(v);
}}
/>
</View>
</Mount>
{/* Podium — the top 3 as a unit, not rows. */}
<Mount delay={120} className="flex-row items-end justify-center gap-6 px-4 pt-6">
{second && podium(second, 2)}
{first && podium(first, 1)}
{third && podium(third, 3)}
</Mount>
{/* Promotion zone — the league marker: dashed line + caps label. */}
<Mount delay={160} className="mx-4 mt-5 flex-row items-center gap-3">
<View className="h-px flex-1 border-t border-dashed border-[#16A34A]/60" />
<Text className="text-[11px] font-bold uppercase tracking-[0.18em] text-[#16A34A]">
Promotion zone
</Text>
<View className="h-px flex-1 border-t border-dashed border-[#16A34A]/60" />
</Mount>
{/* Ranks 4+. */}
<Mount delay={180} className="mx-4 mt-4 overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
{rest.map((l, i) => (
<React.Fragment key={l.id}>
{i > 0 && <List.Separator />}
<List.Item
title={l.name}
leading={
<View className="flex-row items-center gap-2.5">
<Text className="w-6 text-sm font-semibold text-muted-foreground">
{i + 4}
</Text>
<Avatar size="sm" source={{ uri: l.avatarUrl }} fallback={l.name} alt={l.name} />
</View>
}
trailing={
<Text className="text-sm font-semibold">{l.points}</Text>
}
className="py-2.5"
/>
</React.Fragment>
))}
</Mount>
</ScrollView>
{/* Your rank — floats over the board like Strava. */}
<View pointerEvents="box-none" className="absolute inset-x-0 bottom-0 px-4 pt-2" style={{ paddingBottom: insets.bottom + 12 }}>
<View className="flex-row items-center gap-2.5 overflow-hidden rounded-full bg-white px-4 py-3 shadow-sm dark:bg-[#1A1A20]">
<Text className="w-6 text-sm font-bold text-[#65A30D]">{you.rank}</Text>
<Avatar size="sm" fallback="You" alt="You" />
<Text className="flex-1 text-sm font-semibold">You</Text>
<Text className="text-sm font-semibold">{you.points}</Text>
</View>
</View>
</SafeAreaView>
</World>
);
}
LeaderboardScreen.displayName = "LeaderboardScreen";
Recreate the "Leaderboard Screen" screen in React Native using LumioUI.
Goal: Podium + ranked list + your rank 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 misc-leaderboard
```
Or pull just the components: `npx lumioui add avatar button icon list segmented-control 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
### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×3
### `button` — Tactile pill button with press spring, ink wash and async loading.
- imported but not rendered directly — likely used through a sibling or as a utility
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility
### `segmented-control` — iOS 26 segmented picker — glass capsule track with a gliding liquid indicator pill, spring motion + haptics
- `<SegmentedControl>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×12
## 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/misc/leaderboard.tsx` exporting LeaderboardScreen. 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 { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Glass, Icon, List, SegmentedControl, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, World } from "../shared";
export interface Leader {
id: string;
name: string;
points: string;
avatarUrl: string;
}
export interface LeaderboardScreenProps {
contest?: string;
leaders?: Leader[];
you?: { rank: number; points: string };
onBack?: () => void;
}
const DEFAULT_LEADERS: Leader[] = [
{ id: "l1", name: "Priya Nair", points: "2,840", avatarUrl: "https://i.pravatar.cc/150?img=32" },
{ id: "l2", name: "Marcus Oduya", points: "2,690", avatarUrl: "https://i.pravatar.cc/150?img=59" },
{ id: "l3", name: "Noah Reyes", points: "2,510", avatarUrl: "https://i.pravatar.cc/150?img=13" },
{ id: "l4", name: "Lena Kovács", points: "2,300", avatarUrl: "https://i.pravatar.cc/150?img=45" },
{ id: "l5", name: "Tariq Aziz", points: "2,180", avatarUrl: "https://i.pravatar.cc/150?img=67" },
{ id: "l6", name: "Mira Castellanos", points: "2,140", avatarUrl: "https://i.pravatar.cc/150?img=44" },
{ id: "l7", name: "Jonas Lindqvist", points: "2,090", avatarUrl: "https://i.pravatar.cc/150?img=53" },
{ id: "l8", name: "Ada Okafor", points: "2,040", avatarUrl: "https://i.pravatar.cc/150?img=25" },
{ id: "l9", name: "Ren Ishida", points: "1,980", avatarUrl: "https://i.pravatar.cc/150?img=61" },
{ id: "l10", name: "Sofia Marchetti", points: "1,950", avatarUrl: "https://i.pravatar.cc/150?img=41" },
{ id: "l11", name: "Dev Patel", points: "1,920", avatarUrl: "https://i.pravatar.cc/150?img=11" },
];
/** Leaderboard — podium top-3 + ranked list + your rank pinned. */
export function LeaderboardScreen({
contest = "September Challenge",
leaders = DEFAULT_LEADERS,
you = { rank: 12, points: "1,940" },
onBack,
}: LeaderboardScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [range, setRange] = React.useState("Week");
const [first, second, third, ...rest] = leaders;
const podium = (l: Leader, place: 1 | 2 | 3) => {
const dim = place === 1 ? "h-20 w-20" : "h-14 w-14";
const medal =
place === 1 ? "bg-warning" : place === 2 ? "bg-muted-foreground" : "bg-warning/60";
return (
<View className="items-center gap-1">
<Mount className="relative">
{/* Crown over first place — the podium's only ornament. */}
{place === 1 ? (
<Icon
name="crown"
size="sm"
color="#F59E0B"
className="absolute -top-5 z-10 self-center"
/>
) : null}
<Avatar
size="xl"
source={{ uri: l.avatarUrl }}
fallback={l.name}
alt={l.name}
className={dim}
/>
<View
className={`absolute -bottom-1 -right-1 h-6 w-6 items-center justify-center rounded-full border-2 border-background ${medal}`}
>
<Text className="text-[10px] font-bold text-primary-foreground">
{place}
</Text>
</View>
</Mount>
<Text className="text-xs font-medium" numberOfLines={1}>
{l.name.split(" ")[0]}
</Text>
<Text className="text-[10px] text-muted-foreground">{l.points}</Text>
</View>
);
};
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">
Leaderboard
</Text>
</View>
</View>
</View>
<Mount className="mt-14 pt-1">
<Text variant="muted" className="pb-1 text-center text-xs">
Season 4 · resets in 3 days
</Text>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
>
{/* Contest + range. */}
<Mount delay={60} className="px-4 pt-1">
<Text className="text-sm text-muted-foreground">{contest}</Text>
<View className="mt-2">
<SegmentedControl
options={["Week", "Month", "All"]}
value={range}
onValueChange={(v) => {
haptics.selection();
setRange(v);
}}
/>
</View>
</Mount>
{/* Podium — the top 3 as a unit, not rows. */}
<Mount delay={120} className="flex-row items-end justify-center gap-6 px-4 pt-6">
{second && podium(second, 2)}
{first && podium(first, 1)}
{third && podium(third, 3)}
</Mount>
{/* Promotion zone — the league marker: dashed line + caps label. */}
<Mount delay={160} className="mx-4 mt-5 flex-row items-center gap-3">
<View className="h-px flex-1 border-t border-dashed border-[#16A34A]/60" />
<Text className="text-[11px] font-bold uppercase tracking-[0.18em] text-[#16A34A]">
Promotion zone
</Text>
<View className="h-px flex-1 border-t border-dashed border-[#16A34A]/60" />
</Mount>
{/* Ranks 4+. */}
<Mount delay={180} className="mx-4 mt-4 overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
{rest.map((l, i) => (
<React.Fragment key={l.id}>
{i > 0 && <List.Separator />}
<List.Item
title={l.name}
leading={
<View className="flex-row items-center gap-2.5">
<Text className="w-6 text-sm font-semibold text-muted-foreground">
{i + 4}
</Text>
<Avatar size="sm" source={{ uri: l.avatarUrl }} fallback={l.name} alt={l.name} />
</View>
}
trailing={
<Text className="text-sm font-semibold">{l.points}</Text>
}
className="py-2.5"
/>
</React.Fragment>
))}
</Mount>
</ScrollView>
{/* Your rank — floats over the board like Strava. */}
<View pointerEvents="box-none" className="absolute inset-x-0 bottom-0 px-4 pt-2" style={{ paddingBottom: insets.bottom + 12 }}>
<View className="flex-row items-center gap-2.5 overflow-hidden rounded-full bg-white px-4 py-3 shadow-sm dark:bg-[#1A1A20]">
<Text className="w-6 text-sm font-bold text-[#65A30D]">{you.rank}</Text>
<Avatar size="sm" fallback="You" alt="You" />
<Text className="flex-1 text-sm font-semibold">You</Text>
<Text className="text-sm font-semibold">{you.points}</Text>
</View>
</View>
</SafeAreaView>
</World>
);
}
LeaderboardScreen.displayName = "LeaderboardScreen";
```
Screen: https://lumioui.dev/screens/misc-leaderboard