Join-card: accent head with member cluster + day count + tag chips, photo band, nested dark task rows, Join pill
import * as React from "react";
import { Image, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { catalogImg, Mount, Press, SERIF, StickyBottomBar } from "../shared";
interface ArcTask {
title: string;
detail: string;
}
export interface ArcDetailScreenProps {
name?: string;
members?: string;
days?: number;
tags?: string[];
description?: string;
tasks?: ArcTask[];
onJoin?: () => void;
onSkip?: () => void;
onBack?: () => void;
}
const TASKS: ArcTask[] = [
{ title: "Morning greens", detail: "One serving before 9 AM" },
{ title: "No processed sugar", detail: "Whole foods only today" },
{ title: "2L of water", detail: "Four bottles by bedtime" },
{ title: "Evening walk", detail: "20 minutes, no phone" },
];
const ARC_TAGS = ["Gut health", "Fresh mind"];
/** Arc detail — the join-card idiom: a full-bleed accent card (title, member
* cluster, day count, tag chips, blurb) with dark task rows nested inside,
* then a white Join pill over near-black. */
export function ArcDetailScreen({
name = "Gut Health",
members = "294,294",
days = 33,
tags = ARC_TAGS,
description = "A brighter gut boosts energy, skin, and mood. Over a few weeks you'll rebuild daily habits around real food.",
tasks = TASKS,
onJoin,
onSkip,
onBack,
}: ArcDetailScreenProps) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#0B0B0F]">
<SafeAreaView className="flex-1" edges={["top"]}>
{/* Back + step progress — onboarding chrome. */}
<View className="flex-row items-center gap-4 px-4 pt-1">
<Press
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={12}
className="h-9 w-9 items-center justify-center rounded-full bg-white/10"
>
<Icon name="chevron-left" size="sm" color="primaryForeground" />
</Press>
<View className="flex-1 flex-row gap-1.5">
{[0, 1, 2, 3].map((i) => (
<View key={i} className={cn("h-1 flex-1 rounded-full", i < 2 ? "bg-white" : "bg-white/15")} />
))}
</View>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="px-5 pb-32 pt-4">
{/* The arc card — accent head + photo + dark task nest. */}
<Mount className="overflow-hidden rounded-3xl bg-[#17935B]">
<View className="p-5 pb-4">
<View className="flex-row items-start justify-between">
<Text className="text-[26px] font-bold leading-tight tracking-tight text-white">
{name} <Text style={{ fontFamily: SERIF, fontStyle: "italic" }} className="text-[26px] font-bold text-white">Arc</Text>
</Text>
<View className="items-center rounded-2xl bg-white/20 px-3 py-1.5">
<Text className="text-lg font-bold leading-5 tabular-nums text-white">{days}</Text>
<Text className="text-[10px] font-medium text-white/80">Days</Text>
</View>
</View>
<View className="mt-2.5 flex-row items-center gap-2">
<View className="flex-row">
{["AK", "MR", "JT"].map((f, i) => (
<Avatar key={f} fallback={f} size="sm" className={cn("border-2 border-[#17935B]", i > 0 && "-ml-2.5")} />
))}
</View>
<Text className="text-[13px] font-medium tabular-nums text-white/90">{members} Members</Text>
</View>
<View className="mt-3.5 flex-row gap-2">
{tags.map((t) => (
<View key={t} className="flex-row items-center gap-1 rounded-full bg-white/15 px-2.5 py-1">
<Icon name="check" size="sm" color="primaryForeground" />
<Text className="text-[12px] font-medium text-white">{t}</Text>
</View>
))}
</View>
<Text className="mt-3.5 text-[14px] leading-5 text-white/85" numberOfLines={3}>
{description} <Text className="font-semibold text-white">more</Text>
</Text>
</View>
<Image
source={{ uri: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=700&h=300&fit=crop&q=80" }}
className="h-36 w-full"
/>
{/* Daily tasks — dark rows nested inside the card. */}
<View className="gap-2 bg-[#111116] p-4">
{tasks.map((t) => (
<View key={t.title} className="flex-row items-center gap-3 rounded-2xl bg-white/[0.07] p-3.5">
<View className="flex-1">
<Text className="text-[15px] font-semibold text-white">{t.title}</Text>
<Text className="mt-0.5 text-[12px] text-white/50">{t.detail}</Text>
</View>
<View className="h-6 w-6 rounded-full border-2 border-white/25" />
</View>
))}
</View>
</Mount>
</ScrollView>
<StickyBottomBar className="px-6">
<Button
size="lg"
className="w-full bg-white"
textClassName="text-[#0B0B0F]"
onPress={() => {
haptics.medium();
onJoin?.();
}}
accessibilityLabel="Join this arc"
>
Join Arc ›
</Button>
<Press onPress={onSkip} className="mt-3 items-center py-1" accessibilityRole="button" accessibilityLabel="Skip and start fresh">
<Text className="text-[14px] font-medium text-white/70">Skip and start fresh</Text>
</Press>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
ArcDetailScreen.displayName = "ArcDetailScreen";
Recreate the "Arc Detail Screen" screen in React Native using LumioUI.
Goal: Join-card: accent head with member cluster + day count + tag chips, photo band, nested dark task rows, Join pill 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 social-arc-detail
```
Or pull just the components: `npx lumioui add avatar button 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
### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `text` — Themed type scale from caption to display.
- `<Text>` ×11
## 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/social/arc-detail.tsx` exporting ArcDetailScreen. 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 { Avatar, Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { catalogImg, Mount, Press, SERIF, StickyBottomBar } from "../shared";
interface ArcTask {
title: string;
detail: string;
}
export interface ArcDetailScreenProps {
name?: string;
members?: string;
days?: number;
tags?: string[];
description?: string;
tasks?: ArcTask[];
onJoin?: () => void;
onSkip?: () => void;
onBack?: () => void;
}
const TASKS: ArcTask[] = [
{ title: "Morning greens", detail: "One serving before 9 AM" },
{ title: "No processed sugar", detail: "Whole foods only today" },
{ title: "2L of water", detail: "Four bottles by bedtime" },
{ title: "Evening walk", detail: "20 minutes, no phone" },
];
const ARC_TAGS = ["Gut health", "Fresh mind"];
/** Arc detail — the join-card idiom: a full-bleed accent card (title, member
* cluster, day count, tag chips, blurb) with dark task rows nested inside,
* then a white Join pill over near-black. */
export function ArcDetailScreen({
name = "Gut Health",
members = "294,294",
days = 33,
tags = ARC_TAGS,
description = "A brighter gut boosts energy, skin, and mood. Over a few weeks you'll rebuild daily habits around real food.",
tasks = TASKS,
onJoin,
onSkip,
onBack,
}: ArcDetailScreenProps) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#0B0B0F]">
<SafeAreaView className="flex-1" edges={["top"]}>
{/* Back + step progress — onboarding chrome. */}
<View className="flex-row items-center gap-4 px-4 pt-1">
<Press
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={12}
className="h-9 w-9 items-center justify-center rounded-full bg-white/10"
>
<Icon name="chevron-left" size="sm" color="primaryForeground" />
</Press>
<View className="flex-1 flex-row gap-1.5">
{[0, 1, 2, 3].map((i) => (
<View key={i} className={cn("h-1 flex-1 rounded-full", i < 2 ? "bg-white" : "bg-white/15")} />
))}
</View>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="px-5 pb-32 pt-4">
{/* The arc card — accent head + photo + dark task nest. */}
<Mount className="overflow-hidden rounded-3xl bg-[#17935B]">
<View className="p-5 pb-4">
<View className="flex-row items-start justify-between">
<Text className="text-[26px] font-bold leading-tight tracking-tight text-white">
{name} <Text style={{ fontFamily: SERIF, fontStyle: "italic" }} className="text-[26px] font-bold text-white">Arc</Text>
</Text>
<View className="items-center rounded-2xl bg-white/20 px-3 py-1.5">
<Text className="text-lg font-bold leading-5 tabular-nums text-white">{days}</Text>
<Text className="text-[10px] font-medium text-white/80">Days</Text>
</View>
</View>
<View className="mt-2.5 flex-row items-center gap-2">
<View className="flex-row">
{["AK", "MR", "JT"].map((f, i) => (
<Avatar key={f} fallback={f} size="sm" className={cn("border-2 border-[#17935B]", i > 0 && "-ml-2.5")} />
))}
</View>
<Text className="text-[13px] font-medium tabular-nums text-white/90">{members} Members</Text>
</View>
<View className="mt-3.5 flex-row gap-2">
{tags.map((t) => (
<View key={t} className="flex-row items-center gap-1 rounded-full bg-white/15 px-2.5 py-1">
<Icon name="check" size="sm" color="primaryForeground" />
<Text className="text-[12px] font-medium text-white">{t}</Text>
</View>
))}
</View>
<Text className="mt-3.5 text-[14px] leading-5 text-white/85" numberOfLines={3}>
{description} <Text className="font-semibold text-white">more</Text>
</Text>
</View>
<Image
source={{ uri: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=700&h=300&fit=crop&q=80" }}
className="h-36 w-full"
/>
{/* Daily tasks — dark rows nested inside the card. */}
<View className="gap-2 bg-[#111116] p-4">
{tasks.map((t) => (
<View key={t.title} className="flex-row items-center gap-3 rounded-2xl bg-white/[0.07] p-3.5">
<View className="flex-1">
<Text className="text-[15px] font-semibold text-white">{t.title}</Text>
<Text className="mt-0.5 text-[12px] text-white/50">{t.detail}</Text>
</View>
<View className="h-6 w-6 rounded-full border-2 border-white/25" />
</View>
))}
</View>
</Mount>
</ScrollView>
<StickyBottomBar className="px-6">
<Button
size="lg"
className="w-full bg-white"
textClassName="text-[#0B0B0F]"
onPress={() => {
haptics.medium();
onJoin?.();
}}
accessibilityLabel="Join this arc"
>
Join Arc ›
</Button>
<Press onPress={onSkip} className="mt-3 items-center py-1" accessibilityRole="button" accessibilityLabel="Skip and start fresh">
<Text className="text-[14px] font-medium text-white/70">Skip and start fresh</Text>
</Press>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
ArcDetailScreen.displayName = "ArcDetailScreen";
```
Screen: https://lumioui.dev/screens/social-arc-detail