Make-an-arc composer: live accent preview card, name field, day-length chips, white Create pill
import * as React from "react";
import { Image, TextInput, 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 { catalogImg, Mount, Press, SERIF, StickyBottomBar } from "../shared";
const ACCENTS = ["#17935B", "#E2503B", "#F0A92E", "#2563EB", "#7C3AED"] as const;
const DURATIONS = [7, 21, 33, 75] as const;
/** Arc create — the "make your own" screen: a live preview card that takes
* the picked accent and typed name, day-length chips, then a white Create
* pill. Sibling to arc-onboarding / arc-detail. */
export function ArcCreateScreen({
name: initialName = "Morning Pages",
onBack,
onCreate,
}: {
name?: string;
onBack?: () => void;
onCreate?: (name: string, accent: string, days: number) => void;
}) {
const haptics = useHaptic();
const [name, setName] = React.useState(initialName);
const [accent, setAccent] = React.useState<string>(ACCENTS[0]);
const [days, setDays] = React.useState<number>(33);
return (
<View className="flex-1 bg-[#0B0B0F]">
<SafeAreaView className="flex-1" edges={["top", "bottom"]}>
<View className="flex-row items-center gap-3 px-4 pt-1">
<Press
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Back"
className="h-10 w-10 items-center justify-center rounded-full bg-white/[0.08]"
>
<Icon name="chevron-left" size="sm" color="#FFF" />
</Press>
<Text className="flex-1 text-center text-[15px] font-semibold text-white">New Arc</Text>
<View className="w-10" />
</View>
<View className="flex-1 gap-7 px-5 pt-6">
{/* Live preview — the card is the hero; it restyles as you pick. */}
<Mount className="items-center">
<View
className="h-52 w-44 overflow-hidden rounded-2xl p-3"
style={{ backgroundColor: accent, transform: [{ rotate: "-3deg" }] }}
>
<Text className="text-[15px] font-semibold leading-tight text-white" numberOfLines={1}>
{(name.trim() || "Your")}{" "}
<Text style={{ fontFamily: SERIF, fontStyle: "italic" }} className="text-[15px] text-white">
Arc
</Text>
</Text>
<Image source={{ uri: catalogImg("flatlay", 320, 320) }} className="mt-2 h-28 w-full rounded-xl" />
<View className="mt-2 self-start rounded-full bg-white/20 px-2 py-0.5">
<Text className="text-[11px] font-semibold text-white">Day 1 / {days}</Text>
</View>
</View>
</Mount>
{/* Name */}
<Mount delay={60}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Name</Text>
<View className="overflow-hidden rounded-2xl bg-white/[0.08]">
<View className="flex-row items-center gap-2.5 px-4 py-1">
<Icon name="edit" size="sm" color="rgba(255,255,255,0.6)" />
<TextInput
value={name}
onChangeText={setName}
placeholder="Name your arc"
placeholderTextColor="rgba(255,255,255,0.4)"
maxLength={24}
accessibilityLabel="Arc name"
className="flex-1 py-3 text-[16px] font-semibold text-white"
/>
</View>
</View>
</Mount>
{/* Accent */}
<Mount delay={120}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Accent</Text>
<View className="flex-row gap-3">
{ACCENTS.map((hex) => {
const active = hex === accent;
return (
<Press
key={hex}
onPress={() => {
haptics.selection();
setAccent(hex);
}}
accessibilityRole="button"
accessibilityLabel={`Accent ${hex}`}
className="h-11 w-11 items-center justify-center rounded-full"
style={active ? { borderWidth: 2, borderColor: "#FFF" } : undefined}
>
<View className="h-8 w-8 rounded-full" style={{ backgroundColor: hex }} />
</Press>
);
})}
</View>
</Mount>
{/* Length */}
<Mount delay={180}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Length</Text>
<View className="flex-row gap-2">
{DURATIONS.map((d) => {
const active = d === days;
return (
<Press
key={d}
onPress={() => {
haptics.selection();
setDays(d);
}}
accessibilityRole="button"
accessibilityLabel={`${d} days`}
className={cn(
"h-11 flex-1 items-center justify-center rounded-full",
active ? "bg-white" : "bg-white/[0.08]"
)}
>
<Text className={cn("text-[14px] font-semibold", active ? "text-[#0B0B0F]" : "text-white/70")}>
{d}d
</Text>
</Press>
);
})}
</View>
<Text className="mt-2 text-[12px] text-white/40">
Shorter arcs are easier to hold; 75 is the classic hard mode.
</Text>
</Mount>
</View>
<StickyBottomBar className="px-6">
<Button
size="lg"
className="w-full bg-white"
textClassName="text-[#0B0B0F]"
onPress={() => {
haptics.medium();
onCreate?.(name, accent, days);
}}
accessibilityLabel="Create arc"
>
Create Arc ›
</Button>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
ArcCreateScreen.displayName = "ArcCreateScreen";
Recreate the "Arc Create Screen" screen in React Native using LumioUI.
Goal: Make-an-arc composer: live accent preview card, name field, day-length chips, white Create 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-create
```
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>` ×2
### `text` — Themed type scale from caption to display.
- `<Text>` ×9
## 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-create.tsx` exporting ArcCreateScreen. 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, TextInput, 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 { catalogImg, Mount, Press, SERIF, StickyBottomBar } from "../shared";
const ACCENTS = ["#17935B", "#E2503B", "#F0A92E", "#2563EB", "#7C3AED"] as const;
const DURATIONS = [7, 21, 33, 75] as const;
/** Arc create — the "make your own" screen: a live preview card that takes
* the picked accent and typed name, day-length chips, then a white Create
* pill. Sibling to arc-onboarding / arc-detail. */
export function ArcCreateScreen({
name: initialName = "Morning Pages",
onBack,
onCreate,
}: {
name?: string;
onBack?: () => void;
onCreate?: (name: string, accent: string, days: number) => void;
}) {
const haptics = useHaptic();
const [name, setName] = React.useState(initialName);
const [accent, setAccent] = React.useState<string>(ACCENTS[0]);
const [days, setDays] = React.useState<number>(33);
return (
<View className="flex-1 bg-[#0B0B0F]">
<SafeAreaView className="flex-1" edges={["top", "bottom"]}>
<View className="flex-row items-center gap-3 px-4 pt-1">
<Press
onPress={onBack}
accessibilityRole="button"
accessibilityLabel="Back"
className="h-10 w-10 items-center justify-center rounded-full bg-white/[0.08]"
>
<Icon name="chevron-left" size="sm" color="#FFF" />
</Press>
<Text className="flex-1 text-center text-[15px] font-semibold text-white">New Arc</Text>
<View className="w-10" />
</View>
<View className="flex-1 gap-7 px-5 pt-6">
{/* Live preview — the card is the hero; it restyles as you pick. */}
<Mount className="items-center">
<View
className="h-52 w-44 overflow-hidden rounded-2xl p-3"
style={{ backgroundColor: accent, transform: [{ rotate: "-3deg" }] }}
>
<Text className="text-[15px] font-semibold leading-tight text-white" numberOfLines={1}>
{(name.trim() || "Your")}{" "}
<Text style={{ fontFamily: SERIF, fontStyle: "italic" }} className="text-[15px] text-white">
Arc
</Text>
</Text>
<Image source={{ uri: catalogImg("flatlay", 320, 320) }} className="mt-2 h-28 w-full rounded-xl" />
<View className="mt-2 self-start rounded-full bg-white/20 px-2 py-0.5">
<Text className="text-[11px] font-semibold text-white">Day 1 / {days}</Text>
</View>
</View>
</Mount>
{/* Name */}
<Mount delay={60}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Name</Text>
<View className="overflow-hidden rounded-2xl bg-white/[0.08]">
<View className="flex-row items-center gap-2.5 px-4 py-1">
<Icon name="edit" size="sm" color="rgba(255,255,255,0.6)" />
<TextInput
value={name}
onChangeText={setName}
placeholder="Name your arc"
placeholderTextColor="rgba(255,255,255,0.4)"
maxLength={24}
accessibilityLabel="Arc name"
className="flex-1 py-3 text-[16px] font-semibold text-white"
/>
</View>
</View>
</Mount>
{/* Accent */}
<Mount delay={120}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Accent</Text>
<View className="flex-row gap-3">
{ACCENTS.map((hex) => {
const active = hex === accent;
return (
<Press
key={hex}
onPress={() => {
haptics.selection();
setAccent(hex);
}}
accessibilityRole="button"
accessibilityLabel={`Accent ${hex}`}
className="h-11 w-11 items-center justify-center rounded-full"
style={active ? { borderWidth: 2, borderColor: "#FFF" } : undefined}
>
<View className="h-8 w-8 rounded-full" style={{ backgroundColor: hex }} />
</Press>
);
})}
</View>
</Mount>
{/* Length */}
<Mount delay={180}>
<Text className="mb-2 text-[12px] font-semibold uppercase tracking-[0.8px] text-white/50">Length</Text>
<View className="flex-row gap-2">
{DURATIONS.map((d) => {
const active = d === days;
return (
<Press
key={d}
onPress={() => {
haptics.selection();
setDays(d);
}}
accessibilityRole="button"
accessibilityLabel={`${d} days`}
className={cn(
"h-11 flex-1 items-center justify-center rounded-full",
active ? "bg-white" : "bg-white/[0.08]"
)}
>
<Text className={cn("text-[14px] font-semibold", active ? "text-[#0B0B0F]" : "text-white/70")}>
{d}d
</Text>
</Press>
);
})}
</View>
<Text className="mt-2 text-[12px] text-white/40">
Shorter arcs are easier to hold; 75 is the classic hard mode.
</Text>
</Mount>
</View>
<StickyBottomBar className="px-6">
<Button
size="lg"
className="w-full bg-white"
textClassName="text-[#0B0B0F]"
onPress={() => {
haptics.medium();
onCreate?.(name, accent, days);
}}
accessibilityLabel="Create arc"
>
Create Arc ›
</Button>
</StickyBottomBar>
</SafeAreaView>
</View>
);
}
ArcCreateScreen.displayName = "ArcCreateScreen";
```
Screen: https://lumioui.dev/screens/social-arc-create