Baller game card: sticker world, glass scoreboard with LIVE pill, who-wins pick card, dark CTA
import * as React from "react";
import { Image, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Drift, Mount, Press, StickyBottomBar } from "../shared";
const OBJECTS = [
{ emoji: "⚽", cls: "-left-3 top-14", size: "text-[48px]", rotate: -12 },
{ emoji: "🥅", cls: "-right-4 top-24", size: "text-[56px]", rotate: 8 },
{ emoji: "🎟️", cls: "left-6 top-64", size: "text-[40px]", rotate: -16 },
{ emoji: "🏟️", cls: "right-8 top-72", size: "text-[44px]", rotate: 10 },
{ emoji: "🧦", cls: "-left-2 bottom-56", size: "text-[38px]", rotate: 6 },
{ emoji: "🏆", cls: "-right-2 bottom-64", size: "text-[46px]", rotate: -8 },
] as const;
const CREST = {
ars: "https://resources.premierleague.com/premierleague/badges/70/t3.png",
che: "https://resources.premierleague.com/premierleague/badges/70/t8.png",
} as const;
const OPTIONS = [
{ key: "ars", label: "Arsenal", crest: CREST.ars, odds: "+1.9" },
{ key: "draw", label: "Draw", crest: null, odds: "+3.2" },
{ key: "che", label: "Chelsea", crest: CREST.che, odds: "+2.4" },
] as const;
/** Prediction live — the Baller game card: sticker field over the brand
* gradient, glass scoreboard with a LIVE pill, then a "who wins" pick
* card where the chosen side floods with white. */
export function PredictionLiveScreen({
onPredict,
onBack,
}: {
onPredict?: (pick: string) => void;
onBack?: () => void;
}) {
const haptics = useHaptic();
const [pick, setPick] = React.useState<string>("ars");
const [placed, setPlaced] = React.useState(false);
const picked = OPTIONS.find((o) => o.key === pick);
return (
<View className="flex-1 bg-[#0D8BD4]">
{OBJECTS.map((o, i) => (
<Drift key={o.emoji} emoji={o.emoji} cls={o.cls} size={o.size} rotate={o.rotate} index={i} />
))}
<SafeAreaView className="flex-1" edges={["top"]}>
<View className="flex-row items-center justify-between px-4 pt-1">
<Press
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Back"
className="h-10 w-10 items-center justify-center rounded-full bg-white/20"
>
<Icon name="chevron-left" size="sm" color="#FFF" />
</Press>
<Text className="text-[15px] font-semibold text-white">Premier League</Text>
<View className="w-10" />
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-4 px-5 pb-40 pt-5">
{/* Scoreboard — glass over the pitch world. */}
<Mount>
<View className="overflow-hidden rounded-3xl border border-white/[0.15] bg-black/25">
<View className="items-center gap-3 p-5">
<View className="flex-row items-center gap-1.5 rounded-full bg-[#EF4444] px-2.5 py-1">
<View className="h-1.5 w-1.5 rounded-full bg-white" />
<Text className="text-[11px] font-bold tracking-wide text-white">LIVE · 64'</Text>
</View>
<View className="flex-row items-center gap-6">
<View className="items-center gap-1.5">
<View className="h-12 w-12 items-center justify-center rounded-full bg-white">
<Image source={{ uri: CREST.ars }} className="h-9 w-9" resizeMode="contain" />
</View>
<Text className="text-[13px] font-semibold text-white">Arsenal</Text>
</View>
<Text className="text-[40px] font-bold tracking-tight text-white">2 — 1</Text>
<View className="items-center gap-1.5">
<View className="h-12 w-12 items-center justify-center rounded-full bg-white">
<Image source={{ uri: CREST.che }} className="h-9 w-9" resizeMode="contain" />
</View>
<Text className="text-[13px] font-semibold text-white">Chelsea</Text>
</View>
</View>
<Text className="text-[12px] text-white/60">Emirates Stadium · 60,704 in</Text>
</View>
</View>
</Mount>
{/* The pick card — swaps to a locked confirmation once placed. */}
<Mount key={placed ? "placed" : "pick"} delay={90}>
<View className="rounded-3xl bg-white p-5">
{placed ? (
<View className="items-center py-2">
<View className="h-14 w-14 items-center justify-center rounded-full bg-[#16A34A]/15">
<Icon name="check" size="lg" color="#16A34A" />
</View>
<Text className="mt-3 text-[20px] font-bold tracking-tight text-[#0B0B0F]">
{picked?.label} locked at {picked?.odds}
</Text>
<Text className="mt-1 text-center text-[13px] text-[#0B0B0F]/50">
You're in with 234,113 others · settles at full time
</Text>
<Press
onPress={() => {
haptics.light();
setPlaced(false);
}}
accessibilityRole="button"
className="mt-4 rounded-full bg-[#0B0B0F]/[0.05] px-4 py-2"
>
<Text className="text-[13px] font-semibold text-[#0B0B0F]/70">Change pick</Text>
</Press>
</View>
) : (
<>
<Text className="text-[20px] font-bold tracking-tight text-[#0B0B0F]">
Who wins tonight?
</Text>
<Text className="mt-1 text-[13px] text-[#0B0B0F]/50">
234,112 predictions in · closes at kickoff
</Text>
<View className="mt-4 gap-2">
{OPTIONS.map((o) => {
const active = pick === o.key;
return (
<Press
key={o.key}
onPress={() => {
haptics.selection();
setPick(o.key);
}}
accessibilityRole="button"
accessibilityLabel={`Pick ${o.label}`}
className={cn(
"flex-row items-center gap-3 rounded-2xl px-4 py-3.5",
active ? "bg-[#0D8BD4]" : "bg-[#0B0B0F]/[0.05]"
)}
>
{o.crest ? (
<Image source={{ uri: o.crest }} className="h-6 w-6" resizeMode="contain" />
) : (
<View className="h-6 w-6 items-center justify-center rounded-full bg-white">
<Icon name="minus" size="sm" color="#0B0B0F" />
</View>
)}
<Text
className={cn(
"flex-1 text-[15px] font-semibold",
active ? "text-white" : "text-[#0B0B0F]"
)}
>
{o.label}
</Text>
<Text
className={cn(
"text-[14px] font-bold",
active ? "text-white" : "text-[#0B0B0F]/50"
)}
>
{o.odds}
</Text>
</Press>
);
})}
</View>
</>
)}
</View>
</Mount>
</ScrollView>
<StickyBottomBar className="px-5">
<Button
size="lg"
className="w-full bg-[#0B0B0F]"
textClassName="text-white"
onPress={() => {
haptics.medium();
if (!placed) setPlaced(true);
onPredict?.(pick);
}}
accessibilityLabel={placed ? "Prediction placed" : "Place prediction"}
>
{placed ? "Watch the match ›" : `Place prediction · ${picked?.odds}`}
</Button>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
PredictionLiveScreen.displayName = "PredictionLiveScreen";
Recreate the "Prediction Live Screen" screen in React Native using LumioUI.
Goal: Baller game card: sticker world, glass scoreboard with LIVE pill, who-wins pick card, dark CTA 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-prediction-live
```
Or pull just the components: `npx lumioui add button glass icon 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
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1
### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- 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>` ×3
### `text` — Themed type scale from caption to display.
- `<Text>` ×13
## 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/prediction-live.tsx` exporting PredictionLiveScreen. 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 { Image, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Drift, Mount, Press, StickyBottomBar } from "../shared";
const OBJECTS = [
{ emoji: "⚽", cls: "-left-3 top-14", size: "text-[48px]", rotate: -12 },
{ emoji: "🥅", cls: "-right-4 top-24", size: "text-[56px]", rotate: 8 },
{ emoji: "🎟️", cls: "left-6 top-64", size: "text-[40px]", rotate: -16 },
{ emoji: "🏟️", cls: "right-8 top-72", size: "text-[44px]", rotate: 10 },
{ emoji: "🧦", cls: "-left-2 bottom-56", size: "text-[38px]", rotate: 6 },
{ emoji: "🏆", cls: "-right-2 bottom-64", size: "text-[46px]", rotate: -8 },
] as const;
const CREST = {
ars: "https://resources.premierleague.com/premierleague/badges/70/t3.png",
che: "https://resources.premierleague.com/premierleague/badges/70/t8.png",
} as const;
const OPTIONS = [
{ key: "ars", label: "Arsenal", crest: CREST.ars, odds: "+1.9" },
{ key: "draw", label: "Draw", crest: null, odds: "+3.2" },
{ key: "che", label: "Chelsea", crest: CREST.che, odds: "+2.4" },
] as const;
/** Prediction live — the Baller game card: sticker field over the brand
* gradient, glass scoreboard with a LIVE pill, then a "who wins" pick
* card where the chosen side floods with white. */
export function PredictionLiveScreen({
onPredict,
onBack,
}: {
onPredict?: (pick: string) => void;
onBack?: () => void;
}) {
const haptics = useHaptic();
const [pick, setPick] = React.useState<string>("ars");
const [placed, setPlaced] = React.useState(false);
const picked = OPTIONS.find((o) => o.key === pick);
return (
<View className="flex-1 bg-[#0D8BD4]">
{OBJECTS.map((o, i) => (
<Drift key={o.emoji} emoji={o.emoji} cls={o.cls} size={o.size} rotate={o.rotate} index={i} />
))}
<SafeAreaView className="flex-1" edges={["top"]}>
<View className="flex-row items-center justify-between px-4 pt-1">
<Press
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Back"
className="h-10 w-10 items-center justify-center rounded-full bg-white/20"
>
<Icon name="chevron-left" size="sm" color="#FFF" />
</Press>
<Text className="text-[15px] font-semibold text-white">Premier League</Text>
<View className="w-10" />
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-4 px-5 pb-40 pt-5">
{/* Scoreboard — glass over the pitch world. */}
<Mount>
<View className="overflow-hidden rounded-3xl border border-white/[0.15] bg-black/25">
<View className="items-center gap-3 p-5">
<View className="flex-row items-center gap-1.5 rounded-full bg-[#EF4444] px-2.5 py-1">
<View className="h-1.5 w-1.5 rounded-full bg-white" />
<Text className="text-[11px] font-bold tracking-wide text-white">LIVE · 64'</Text>
</View>
<View className="flex-row items-center gap-6">
<View className="items-center gap-1.5">
<View className="h-12 w-12 items-center justify-center rounded-full bg-white">
<Image source={{ uri: CREST.ars }} className="h-9 w-9" resizeMode="contain" />
</View>
<Text className="text-[13px] font-semibold text-white">Arsenal</Text>
</View>
<Text className="text-[40px] font-bold tracking-tight text-white">2 — 1</Text>
<View className="items-center gap-1.5">
<View className="h-12 w-12 items-center justify-center rounded-full bg-white">
<Image source={{ uri: CREST.che }} className="h-9 w-9" resizeMode="contain" />
</View>
<Text className="text-[13px] font-semibold text-white">Chelsea</Text>
</View>
</View>
<Text className="text-[12px] text-white/60">Emirates Stadium · 60,704 in</Text>
</View>
</View>
</Mount>
{/* The pick card — swaps to a locked confirmation once placed. */}
<Mount key={placed ? "placed" : "pick"} delay={90}>
<View className="rounded-3xl bg-white p-5">
{placed ? (
<View className="items-center py-2">
<View className="h-14 w-14 items-center justify-center rounded-full bg-[#16A34A]/15">
<Icon name="check" size="lg" color="#16A34A" />
</View>
<Text className="mt-3 text-[20px] font-bold tracking-tight text-[#0B0B0F]">
{picked?.label} locked at {picked?.odds}
</Text>
<Text className="mt-1 text-center text-[13px] text-[#0B0B0F]/50">
You're in with 234,113 others · settles at full time
</Text>
<Press
onPress={() => {
haptics.light();
setPlaced(false);
}}
accessibilityRole="button"
className="mt-4 rounded-full bg-[#0B0B0F]/[0.05] px-4 py-2"
>
<Text className="text-[13px] font-semibold text-[#0B0B0F]/70">Change pick</Text>
</Press>
</View>
) : (
<>
<Text className="text-[20px] font-bold tracking-tight text-[#0B0B0F]">
Who wins tonight?
</Text>
<Text className="mt-1 text-[13px] text-[#0B0B0F]/50">
234,112 predictions in · closes at kickoff
</Text>
<View className="mt-4 gap-2">
{OPTIONS.map((o) => {
const active = pick === o.key;
return (
<Press
key={o.key}
onPress={() => {
haptics.selection();
setPick(o.key);
}}
accessibilityRole="button"
accessibilityLabel={`Pick ${o.label}`}
className={cn(
"flex-row items-center gap-3 rounded-2xl px-4 py-3.5",
active ? "bg-[#0D8BD4]" : "bg-[#0B0B0F]/[0.05]"
)}
>
{o.crest ? (
<Image source={{ uri: o.crest }} className="h-6 w-6" resizeMode="contain" />
) : (
<View className="h-6 w-6 items-center justify-center rounded-full bg-white">
<Icon name="minus" size="sm" color="#0B0B0F" />
</View>
)}
<Text
className={cn(
"flex-1 text-[15px] font-semibold",
active ? "text-white" : "text-[#0B0B0F]"
)}
>
{o.label}
</Text>
<Text
className={cn(
"text-[14px] font-bold",
active ? "text-white" : "text-[#0B0B0F]/50"
)}
>
{o.odds}
</Text>
</Press>
);
})}
</View>
</>
)}
</View>
</Mount>
</ScrollView>
<StickyBottomBar className="px-5">
<Button
size="lg"
className="w-full bg-[#0B0B0F]"
textClassName="text-white"
onPress={() => {
haptics.medium();
if (!placed) setPlaced(true);
onPredict?.(pick);
}}
accessibilityLabel={placed ? "Prediction placed" : "Place prediction"}
>
{placed ? "Watch the match ›" : `Place prediction · ${picked?.odds}`}
</Button>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
PredictionLiveScreen.displayName = "PredictionLiveScreen";
```
Screen: https://lumioui.dev/screens/misc-prediction-live