Security-relevant account events grouped by day.
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { Mount, BLOCK_STAGGER, TintIcon } from "../shared";
import { useHaptic } from "@lumioui/core";
export interface ActivityEntry {
id: string;
/** e.g. "Signed in on a new device" */
action: string;
/** e.g. "MacBook Pro · San Francisco" */
detail?: string;
/** e.g. "2:41 PM" */
time: string;
icon: IconName;
hex: string;
}
export interface ActivityLogScreenProps {
/** Entries grouped by day label, newest first. */
groups?: { label: string; entries: ActivityEntry[] }[];
onBack?: () => void;
}
const DEFAULT_GROUPS: NonNullable<ActivityLogScreenProps["groups"]> = [
{
label: "Today",
entries: [
{ id: "a1", action: "Signed in on a new device", detail: "MacBook Pro · San Francisco", time: "2:41 PM", icon: "settings", hex: "#1E9E63" },
{ id: "a2", action: "Changed profile photo", time: "11:08 AM", icon: "image", hex: "#4A7FD4" },
{ id: "a3", action: "Exported data archive", detail: "2.1 GB · Download expires in 7 days", time: "9:12 AM", icon: "download", hex: "#7C5CFC" },
],
},
{
label: "Yesterday",
entries: [
{ id: "a4", action: "Enabled two-factor authentication", time: "6:24 PM", icon: "shield", hex: "#1E9E63" },
{ id: "a5", action: "Updated payment method", detail: "Visa •••• 4821", time: "4:03 PM", icon: "credit-card", hex: "#4A7FD4" },
{ id: "a6", action: "Signed out of iPad Air", time: "8:47 AM", icon: "log-out", hex: "#8B8FA3" },
],
},
{
label: "This week",
entries: [
{ id: "a7", action: "Password changed", time: "Tue · 9:14 PM", icon: "lock", hex: "#E8862D" },
{ id: "a8", action: "New login alert dismissed", detail: "Chrome on Windows · flagged safe", time: "Mon · 7:52 AM", icon: "check-circle", hex: "#1E9E63" },
{ id: "a9", action: "Privacy settings reviewed", time: "Sun · 5:30 PM", icon: "eye", hex: "#7C5CFC" },
],
},
];
/** Activity log — a real vertical timeline: pastel icon beads wired by a
* spine down the left rail, day labels as waypoints. Reads like history,
* not a settings list. */
export function ActivityLogScreen({
groups = DEFAULT_GROUPS,
onBack,
}: ActivityLogScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back pill + hug-label title pill + Filter pill. */}
<View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
<View className="flex-row items-center justify-between gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-4"
>
<Button
variant="ghost"
size="sm"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Filter activity"
>
Filter
</Button>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-5"
>
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Activity
</Text>
</Glass>
</View>
</View>
{/* Security status banner — the dark ink card flagship account
pages lead with: state at a glance before the timeline. */}
<Mount delay={40} className="px-6" style={{ paddingTop: insets.top + 60 }}>
<View className="mb-2 mt-3 flex-row items-center gap-3.5 overflow-hidden rounded-3xl bg-[#1B1B26] p-4">
<Glass interactive effect="regular" sheen={0.35} tintColor="#FFFFFF14" className="absolute inset-0 rounded-3xl" pointerEvents="none" />
<View className="h-11 w-11 items-center justify-center rounded-2xl bg-[#BEF04C]/20">
<Icon name="shield" size="md" color="#BEF04C" />
</View>
<View className="flex-1">
<Text className="text-[15px] font-semibold text-white">All devices verified</Text>
<Text className="text-xs text-white/60">{groups.reduce((n, g) => n + g.entries.length, 0)} events · last sign-in {groups[0]?.entries[0]?.time}</Text>
</View>
<View className="rounded-full bg-[#BEF04C]/20 px-2.5 py-1">
<Text className="text-[11px] font-bold text-[#BEF04C]">SECURE</Text>
</View>
</View>
{/* Nuclear option — activity logs always offer it when things look off. */}
<View className="mb-2 mt-2 flex-row justify-end">
<Text variant="small" className="font-medium text-destructive">
Sign out of all devices
</Text>
</View>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
contentContainerClassName="px-6"
>
{groups.map((group, gi) => (
<View key={group.label}>
{/* Day waypoint — bold date label pinned to the spine. */}
<Mount delay={gi * BLOCK_STAGGER}>
<View className="flex-row items-center gap-4 pb-3 pt-6">
<View
className="h-2.5 w-2.5 rounded-full bg-foreground"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<Text variant="small" className="font-semibold uppercase tracking-widest">
{group.label}
</Text>
</View>
</Mount>
<View className="ml-[4.5px] border-l-2 border-border pl-[33px]">
{group.entries.map((entry, ei) => (
<Mount key={entry.id} delay={gi * BLOCK_STAGGER + ei * 50}>
<View className="relative flex-row items-center gap-3.5 py-2.5">
{/* Icon bead hanging on the spine — centers on the rail. */}
<View
className="absolute -left-[51px]"
accessibilityElementsHidden
importantForAccessibility="no"
>
<TintIcon name={entry.icon} hex={entry.hex} />
</View>
<View className="flex-1">
<Text className="text-[15px] font-medium">{entry.action}</Text>
{entry.detail ? (
<Text variant="muted" className="text-xs">
{entry.detail}
</Text>
) : null}
</View>
<Text
variant="small"
className="text-muted-foreground"
style={{ fontVariant: ["tabular-nums"] }}
>
{entry.time}
</Text>
</View>
</Mount>
))}
</View>
</View>
))}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="ml-[4.5px] mt-4 border-l-2 border-dashed border-border pl-[33px]">
<Text variant="small" className="py-2 text-muted-foreground">
Activity is kept for 90 days. If something looks unfamiliar,
secure your account from Sign-in & security.
</Text>
</View>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
ActivityLogScreen.displayName = "ActivityLogScreen";
Recreate the "Activity log Screen" screen in React Native using LumioUI.
Goal: Security-relevant account events grouped by day. 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 core-activity-log
```
Or pull just the components: `npx lumioui add button icon list 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>` ×2
### `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
### `text` — Themed type scale from caption to display.
- `<Text>` ×10
## 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/core/activity-log.tsx` exporting ActivityLogScreen. 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 { Button, Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { Mount, BLOCK_STAGGER, TintIcon } from "../shared";
import { useHaptic } from "@lumioui/core";
export interface ActivityEntry {
id: string;
/** e.g. "Signed in on a new device" */
action: string;
/** e.g. "MacBook Pro · San Francisco" */
detail?: string;
/** e.g. "2:41 PM" */
time: string;
icon: IconName;
hex: string;
}
export interface ActivityLogScreenProps {
/** Entries grouped by day label, newest first. */
groups?: { label: string; entries: ActivityEntry[] }[];
onBack?: () => void;
}
const DEFAULT_GROUPS: NonNullable<ActivityLogScreenProps["groups"]> = [
{
label: "Today",
entries: [
{ id: "a1", action: "Signed in on a new device", detail: "MacBook Pro · San Francisco", time: "2:41 PM", icon: "settings", hex: "#1E9E63" },
{ id: "a2", action: "Changed profile photo", time: "11:08 AM", icon: "image", hex: "#4A7FD4" },
{ id: "a3", action: "Exported data archive", detail: "2.1 GB · Download expires in 7 days", time: "9:12 AM", icon: "download", hex: "#7C5CFC" },
],
},
{
label: "Yesterday",
entries: [
{ id: "a4", action: "Enabled two-factor authentication", time: "6:24 PM", icon: "shield", hex: "#1E9E63" },
{ id: "a5", action: "Updated payment method", detail: "Visa •••• 4821", time: "4:03 PM", icon: "credit-card", hex: "#4A7FD4" },
{ id: "a6", action: "Signed out of iPad Air", time: "8:47 AM", icon: "log-out", hex: "#8B8FA3" },
],
},
{
label: "This week",
entries: [
{ id: "a7", action: "Password changed", time: "Tue · 9:14 PM", icon: "lock", hex: "#E8862D" },
{ id: "a8", action: "New login alert dismissed", detail: "Chrome on Windows · flagged safe", time: "Mon · 7:52 AM", icon: "check-circle", hex: "#1E9E63" },
{ id: "a9", action: "Privacy settings reviewed", time: "Sun · 5:30 PM", icon: "eye", hex: "#7C5CFC" },
],
},
];
/** Activity log — a real vertical timeline: pastel icon beads wired by a
* spine down the left rail, day labels as waypoints. Reads like history,
* not a settings list. */
export function ActivityLogScreen({
groups = DEFAULT_GROUPS,
onBack,
}: ActivityLogScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back pill + hug-label title pill + Filter pill. */}
<View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
<View className="flex-row items-center justify-between gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-4"
>
<Button
variant="ghost"
size="sm"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Filter activity"
>
Filter
</Button>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-5"
>
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Activity
</Text>
</Glass>
</View>
</View>
{/* Security status banner — the dark ink card flagship account
pages lead with: state at a glance before the timeline. */}
<Mount delay={40} className="px-6" style={{ paddingTop: insets.top + 60 }}>
<View className="mb-2 mt-3 flex-row items-center gap-3.5 overflow-hidden rounded-3xl bg-[#1B1B26] p-4">
<Glass interactive effect="regular" sheen={0.35} tintColor="#FFFFFF14" className="absolute inset-0 rounded-3xl" pointerEvents="none" />
<View className="h-11 w-11 items-center justify-center rounded-2xl bg-[#BEF04C]/20">
<Icon name="shield" size="md" color="#BEF04C" />
</View>
<View className="flex-1">
<Text className="text-[15px] font-semibold text-white">All devices verified</Text>
<Text className="text-xs text-white/60">{groups.reduce((n, g) => n + g.entries.length, 0)} events · last sign-in {groups[0]?.entries[0]?.time}</Text>
</View>
<View className="rounded-full bg-[#BEF04C]/20 px-2.5 py-1">
<Text className="text-[11px] font-bold text-[#BEF04C]">SECURE</Text>
</View>
</View>
{/* Nuclear option — activity logs always offer it when things look off. */}
<View className="mb-2 mt-2 flex-row justify-end">
<Text variant="small" className="font-medium text-destructive">
Sign out of all devices
</Text>
</View>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
contentContainerClassName="px-6"
>
{groups.map((group, gi) => (
<View key={group.label}>
{/* Day waypoint — bold date label pinned to the spine. */}
<Mount delay={gi * BLOCK_STAGGER}>
<View className="flex-row items-center gap-4 pb-3 pt-6">
<View
className="h-2.5 w-2.5 rounded-full bg-foreground"
accessibilityElementsHidden
importantForAccessibility="no"
/>
<Text variant="small" className="font-semibold uppercase tracking-widest">
{group.label}
</Text>
</View>
</Mount>
<View className="ml-[4.5px] border-l-2 border-border pl-[33px]">
{group.entries.map((entry, ei) => (
<Mount key={entry.id} delay={gi * BLOCK_STAGGER + ei * 50}>
<View className="relative flex-row items-center gap-3.5 py-2.5">
{/* Icon bead hanging on the spine — centers on the rail. */}
<View
className="absolute -left-[51px]"
accessibilityElementsHidden
importantForAccessibility="no"
>
<TintIcon name={entry.icon} hex={entry.hex} />
</View>
<View className="flex-1">
<Text className="text-[15px] font-medium">{entry.action}</Text>
{entry.detail ? (
<Text variant="muted" className="text-xs">
{entry.detail}
</Text>
) : null}
</View>
<Text
variant="small"
className="text-muted-foreground"
style={{ fontVariant: ["tabular-nums"] }}
>
{entry.time}
</Text>
</View>
</Mount>
))}
</View>
</View>
))}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="ml-[4.5px] mt-4 border-l-2 border-dashed border-border pl-[33px]">
<Text variant="small" className="py-2 text-muted-foreground">
Activity is kept for 90 days. If something looks unfamiliar,
secure your account from Sign-in & security.
</Text>
</View>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
ActivityLogScreen.displayName = "ActivityLogScreen";
```
Screen: https://lumioui.dev/screens/core-activity-log