Uwallet Umovers screen
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Icon, type IconName, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press } from "../shared";
const ACTIONS: { icon: IconName; label: string }[] = [
{ icon: "plus", label: "Buy" },
{ icon: "arrow-up", label: "Sell" },
{ icon: "repeat", label: "Swap" },
{ icon: "arrow-down", label: "Receive" },
];
const MOVERS = [
{ glyph: "₿", tint: "#F7931A", amt: "53.00 BTC", price: "$43,280", chg: "+3.10%" },
{ glyph: "Ξ", tint: "#627EEA", amt: "15.00 ETH", price: "$8,600.00", chg: "+2.30%" },
{ glyph: "$", tint: "#2775CA", amt: "5.00 USDC", price: "$106.00", chg: "+4.10%" },
{ glyph: "₮", tint: "#26A17B", amt: "10.00 USDT", price: "$260.00", chg: "+1.50%" },
];
const ACTIVITY: { icon: IconName; label: string; amount: string }[] = [
{ icon: "download", label: "Bought BTC", amount: "+$1,240.00" },
{ icon: "repeat", label: "Swapped ETH → USDC", amount: "-$1,850.00" },
];
/** Floating black tab capsule — the ref's pill nav with a raised active
* disc. Lives above the sheet, clears the home indicator via insets. */
function PillNav() {
const insets = useSafeAreaInsets();
const items: { icon: IconName; active?: boolean }[] = [
{ icon: "home", active: true },
{ icon: "search" },
{ icon: "credit-card" },
{ icon: "user" },
];
return (
<View
className="absolute inset-x-10 flex-row items-center justify-between rounded-full bg-[#1C1C1E] px-2 py-2"
style={{ bottom: Math.max(insets.bottom, 12) }}
>
{items.map((it) => (
<Press
key={it.icon}
accessibilityRole="button"
className={cn(
"h-11 flex-1 items-center justify-center rounded-full",
it.active && "bg-[#3A3A3C]",
)}
>
<Icon name={it.icon} size="sm" color={it.active ? "#FFFFFF" : "#8E8E93"} />
</Press>
))}
</View>
);
}
/** Wallet movers — the pale-mint home: glow header with greeting + balance
* + 4 action tiles, then a white sheet with the 2×2 Top Movers coin grid,
* recent actions, and the floating black pill nav. */
export function WalletMoversScreen({ name = "Jenny", onNotifications, onProfile }: { name?: string; onNotifications?: () => void; onProfile?: () => void }) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
<SafeAreaView className="flex-1" edges={["top"]}>
<View className="flex-row items-start justify-between px-5 pt-1">
<View>
<View className="flex-row items-center gap-1.5">
<Text className="text-[17px] font-semibold text-[#1C1C1E]">
Good morning, {name}
</Text>
<Icon name="sparkles" size="md" color="#F0A92E" />
</View>
<Text className="mt-0.5 text-[13px] text-[#1C1C1E]/50">
Here's your wallet balance
</Text>
</View>
<View className="flex-row items-center gap-2.5">
<Press
onPress={onNotifications}
accessibilityRole="button"
accessibilityLabel="Notifications"
className="h-10 w-10 items-center justify-center rounded-full bg-white"
>
<Icon name="bell" size="sm" color="#1C1C1E" />
</Press>
<Press onPress={onProfile} accessibilityRole="button" accessibilityLabel="Profile">
<Avatar fallback="J" size="md" source={{ uri: "https://i.pravatar.cc/150?img=47" }} />
</Press>
</View>
</View>
<Mount delay={70} className="mt-4 flex-row items-end justify-between px-5">
<View>
<View className="flex-row items-center gap-1.5">
<Text className="text-[13px] text-[#1C1C1E]/55">Total Balance</Text>
<Icon name="eye" size="sm" color="#1C1C1E" />
</View>
<Text className="mt-1 text-[34px] font-bold tracking-tight text-[#1C1C1E]">
$3,482.17
</Text>
</View>
<Text className="mb-1.5 text-[13px] font-semibold text-[#15803D]">↑ +12.4% (24h)</Text>
</Mount>
<Mount delay={110} className="mt-4 flex-row gap-3 px-5">
{ACTIONS.map((a) => (
<Press
key={a.label}
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel={a.label}
className="flex-1 items-center gap-1.5 rounded-2xl bg-white py-3.5"
>
<Icon name={a.icon} size="md" color="#1C1C1E" />
<Text className="text-[12.5px] font-medium text-[#1C1C1E]">{a.label}</Text>
</Press>
))}
</Mount>
{/* sheet */}
<View className="mt-5 flex-1 rounded-t-[32px] bg-white px-5 pt-5">
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="pb-28">
<Mount delay={140}>
<View className="flex-row items-center justify-between">
<Text className="text-[17px] font-bold text-[#1C1C1E]">Top Movers</Text>
<Text className="text-[13px] text-[#1C1C1E]/45">See all</Text>
</View>
<View className="mt-3.5 flex-row flex-wrap gap-3">
{MOVERS.map((m) => (
<View key={m.amt} className="w-[47%] grow rounded-3xl bg-[#F4F5F9] p-4">
<View className="flex-row items-center gap-2">
<View
className="h-8 w-8 items-center justify-center rounded-full"
style={{ backgroundColor: `${m.tint}1F` }}
>
<Text className="text-[14px] font-bold" style={{ color: m.tint }}>
{m.glyph}
</Text>
</View>
<Text className="text-[12.5px] text-[#1C1C1E]/55">{m.amt}</Text>
</View>
<View className="mt-3 flex-row items-baseline gap-2">
<Text className="text-[17px] font-bold text-[#1C1C1E]">{m.price}</Text>
<Text className="text-[11.5px] font-semibold text-[#15803D]">{m.chg}</Text>
</View>
</View>
))}
</View>
</Mount>
<Mount delay={180}>
<View className="mt-6 flex-row items-center justify-between">
<Text className="text-[17px] font-bold text-[#1C1C1E]">Recent Actions</Text>
<Text className="text-[13px] text-[#1C1C1E]/45">See all</Text>
</View>
{ACTIVITY.map((a) => (
<View key={a.label} className="mt-3 flex-row items-center rounded-2xl bg-[#F4F5F9] px-4 py-3.5">
<View className="h-9 w-9 items-center justify-center rounded-full bg-white">
<Icon name={a.icon} size="sm" color="#1C1C1E" />
</View>
<Text className="ml-3 flex-1 text-[14.5px] font-medium text-[#1C1C1E]">{a.label}</Text>
<Text className="text-[14px] font-semibold text-[#1C1C1E]">{a.amount}</Text>
</View>
))}
</Mount>
</ScrollView>
</View>
</SafeAreaView>
<PillNav />
</View>
);
}
WalletMoversScreen.displayName = "WalletMoversScreen";
Recreate the "Uwallet Umovers Screen" screen in React Native using LumioUI.
Goal: Uwallet Umovers screen 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 finance-wallet-movers
```
Or pull just the components: `npx lumioui add button text icon avatar`
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.
- imported but not rendered directly — likely used through a sibling or as a utility
### `text` — Themed type scale from caption to display.
- `<Text>` ×16
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×6
### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1
## 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/finance/wallet-movers.tsx` exporting WalletMoversScreen. 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, Icon, type IconName, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press } from "../shared";
const ACTIONS: { icon: IconName; label: string }[] = [
{ icon: "plus", label: "Buy" },
{ icon: "arrow-up", label: "Sell" },
{ icon: "repeat", label: "Swap" },
{ icon: "arrow-down", label: "Receive" },
];
const MOVERS = [
{ glyph: "₿", tint: "#F7931A", amt: "53.00 BTC", price: "$43,280", chg: "+3.10%" },
{ glyph: "Ξ", tint: "#627EEA", amt: "15.00 ETH", price: "$8,600.00", chg: "+2.30%" },
{ glyph: "$", tint: "#2775CA", amt: "5.00 USDC", price: "$106.00", chg: "+4.10%" },
{ glyph: "₮", tint: "#26A17B", amt: "10.00 USDT", price: "$260.00", chg: "+1.50%" },
];
const ACTIVITY: { icon: IconName; label: string; amount: string }[] = [
{ icon: "download", label: "Bought BTC", amount: "+$1,240.00" },
{ icon: "repeat", label: "Swapped ETH → USDC", amount: "-$1,850.00" },
];
/** Floating black tab capsule — the ref's pill nav with a raised active
* disc. Lives above the sheet, clears the home indicator via insets. */
function PillNav() {
const insets = useSafeAreaInsets();
const items: { icon: IconName; active?: boolean }[] = [
{ icon: "home", active: true },
{ icon: "search" },
{ icon: "credit-card" },
{ icon: "user" },
];
return (
<View
className="absolute inset-x-10 flex-row items-center justify-between rounded-full bg-[#1C1C1E] px-2 py-2"
style={{ bottom: Math.max(insets.bottom, 12) }}
>
{items.map((it) => (
<Press
key={it.icon}
accessibilityRole="button"
className={cn(
"h-11 flex-1 items-center justify-center rounded-full",
it.active && "bg-[#3A3A3C]",
)}
>
<Icon name={it.icon} size="sm" color={it.active ? "#FFFFFF" : "#8E8E93"} />
</Press>
))}
</View>
);
}
/** Wallet movers — the pale-mint home: glow header with greeting + balance
* + 4 action tiles, then a white sheet with the 2×2 Top Movers coin grid,
* recent actions, and the floating black pill nav. */
export function WalletMoversScreen({ name = "Jenny", onNotifications, onProfile }: { name?: string; onNotifications?: () => void; onProfile?: () => void }) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
<SafeAreaView className="flex-1" edges={["top"]}>
<View className="flex-row items-start justify-between px-5 pt-1">
<View>
<View className="flex-row items-center gap-1.5">
<Text className="text-[17px] font-semibold text-[#1C1C1E]">
Good morning, {name}
</Text>
<Icon name="sparkles" size="md" color="#F0A92E" />
</View>
<Text className="mt-0.5 text-[13px] text-[#1C1C1E]/50">
Here's your wallet balance
</Text>
</View>
<View className="flex-row items-center gap-2.5">
<Press
onPress={onNotifications}
accessibilityRole="button"
accessibilityLabel="Notifications"
className="h-10 w-10 items-center justify-center rounded-full bg-white"
>
<Icon name="bell" size="sm" color="#1C1C1E" />
</Press>
<Press onPress={onProfile} accessibilityRole="button" accessibilityLabel="Profile">
<Avatar fallback="J" size="md" source={{ uri: "https://i.pravatar.cc/150?img=47" }} />
</Press>
</View>
</View>
<Mount delay={70} className="mt-4 flex-row items-end justify-between px-5">
<View>
<View className="flex-row items-center gap-1.5">
<Text className="text-[13px] text-[#1C1C1E]/55">Total Balance</Text>
<Icon name="eye" size="sm" color="#1C1C1E" />
</View>
<Text className="mt-1 text-[34px] font-bold tracking-tight text-[#1C1C1E]">
$3,482.17
</Text>
</View>
<Text className="mb-1.5 text-[13px] font-semibold text-[#15803D]">↑ +12.4% (24h)</Text>
</Mount>
<Mount delay={110} className="mt-4 flex-row gap-3 px-5">
{ACTIONS.map((a) => (
<Press
key={a.label}
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel={a.label}
className="flex-1 items-center gap-1.5 rounded-2xl bg-white py-3.5"
>
<Icon name={a.icon} size="md" color="#1C1C1E" />
<Text className="text-[12.5px] font-medium text-[#1C1C1E]">{a.label}</Text>
</Press>
))}
</Mount>
{/* sheet */}
<View className="mt-5 flex-1 rounded-t-[32px] bg-white px-5 pt-5">
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="pb-28">
<Mount delay={140}>
<View className="flex-row items-center justify-between">
<Text className="text-[17px] font-bold text-[#1C1C1E]">Top Movers</Text>
<Text className="text-[13px] text-[#1C1C1E]/45">See all</Text>
</View>
<View className="mt-3.5 flex-row flex-wrap gap-3">
{MOVERS.map((m) => (
<View key={m.amt} className="w-[47%] grow rounded-3xl bg-[#F4F5F9] p-4">
<View className="flex-row items-center gap-2">
<View
className="h-8 w-8 items-center justify-center rounded-full"
style={{ backgroundColor: `${m.tint}1F` }}
>
<Text className="text-[14px] font-bold" style={{ color: m.tint }}>
{m.glyph}
</Text>
</View>
<Text className="text-[12.5px] text-[#1C1C1E]/55">{m.amt}</Text>
</View>
<View className="mt-3 flex-row items-baseline gap-2">
<Text className="text-[17px] font-bold text-[#1C1C1E]">{m.price}</Text>
<Text className="text-[11.5px] font-semibold text-[#15803D]">{m.chg}</Text>
</View>
</View>
))}
</View>
</Mount>
<Mount delay={180}>
<View className="mt-6 flex-row items-center justify-between">
<Text className="text-[17px] font-bold text-[#1C1C1E]">Recent Actions</Text>
<Text className="text-[13px] text-[#1C1C1E]/45">See all</Text>
</View>
{ACTIVITY.map((a) => (
<View key={a.label} className="mt-3 flex-row items-center rounded-2xl bg-[#F4F5F9] px-4 py-3.5">
<View className="h-9 w-9 items-center justify-center rounded-full bg-white">
<Icon name={a.icon} size="sm" color="#1C1C1E" />
</View>
<Text className="ml-3 flex-1 text-[14.5px] font-medium text-[#1C1C1E]">{a.label}</Text>
<Text className="text-[14px] font-semibold text-[#1C1C1E]">{a.amount}</Text>
</View>
))}
</Mount>
</ScrollView>
</View>
</SafeAreaView>
<PillNav />
</View>
);
}
WalletMoversScreen.displayName = "WalletMoversScreen";
```
Screen: https://lumioui.dev/screens/finance-wallet-movers