Interest chip grid
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, type IconName, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, World } from "../shared";
export interface Topic {
id: string;
label: string;
followed?: boolean;
}
export interface TopicsFollowScreenProps {
title?: string;
topics?: Topic[];
onDone?: (followed: string[]) => void;
onBack?: () => void;
}
const TOPIC_ICON: Record<string, { icon: IconName; bg: string; fg: string }> = {
world: { icon: "globe", bg: "bg-blue-500/15", fg: "#3B82F6" },
tech: { icon: "zap", bg: "bg-amber-500/15", fg: "#F59E0B" },
business: { icon: "briefcase", bg: "bg-slate-500/15", fg: "#64748B" },
markets: { icon: "arrow-up", bg: "bg-emerald-500/15", fg: "#10B981" },
startups: { icon: "rocket", bg: "bg-orange-500/15", fg: "#F97316" },
ai: { icon: "sparkles", bg: "bg-violet-500/15", fg: "#8B5CF6" },
design: { icon: "palette", bg: "bg-pink-500/15", fg: "#EC4899" },
dev: { icon: "code", bg: "bg-indigo-500/15", fg: "#6366F1" },
space: { icon: "rocket", bg: "bg-sky-500/15", fg: "#0EA5E9" },
science: { icon: "flask", bg: "bg-teal-500/15", fg: "#14B8A6" },
climate: { icon: "leaf", bg: "bg-green-500/15", fg: "#16A34A" },
health: { icon: "heart", bg: "bg-rose-500/15", fg: "#F43F5E" },
sport: { icon: "trophy", bg: "bg-yellow-500/15", fg: "#CA8A04" },
football: { icon: "medal", bg: "bg-lime-500/15", fg: "#65A30D" },
nba: { icon: "trophy", bg: "bg-orange-500/15", fg: "#EA580C" },
f1: { icon: "car", bg: "bg-red-500/15", fg: "#EF4444" },
culture: { icon: "landmark", bg: "bg-stone-500/15", fg: "#78716C" },
film: { icon: "film", bg: "bg-purple-500/15", fg: "#A855F7" },
music: { icon: "music", bg: "bg-fuchsia-500/15", fg: "#D946EF" },
books: { icon: "book-open", bg: "bg-amber-600/15", fg: "#D97706" },
gaming: { icon: "gamepad", bg: "bg-indigo-500/15", fg: "#6366F1" },
food: { icon: "utensils", bg: "bg-orange-500/15", fg: "#F97316" },
travel: { icon: "plane", bg: "bg-cyan-500/15", fg: "#0891B2" },
fashion: { icon: "shirt", bg: "bg-pink-400/15", fg: "#F472B6" },
home: { icon: "home", bg: "bg-emerald-500/15", fg: "#059669" },
politics: { icon: "landmark", bg: "bg-red-500/15", fg: "#DC2626" },
history: { icon: "clock", bg: "bg-stone-500/15", fg: "#78716C" },
photography: { icon: "camera", bg: "bg-slate-500/15", fg: "#475569" },
};
const DEFAULT_TOPICS: Topic[] = [
{ id: "world", label: "World", followed: true },
{ id: "tech", label: "Technology", followed: true },
{ id: "business", label: "Business" },
{ id: "markets", label: "Markets" },
{ id: "startups", label: "Startups" },
{ id: "ai", label: "AI" },
{ id: "design", label: "Design", followed: true },
{ id: "dev", label: "Developer" },
{ id: "space", label: "Space" },
{ id: "science", label: "Science" },
{ id: "climate", label: "Climate" },
{ id: "health", label: "Health" },
{ id: "sport", label: "Sport" },
{ id: "football", label: "Football" },
{ id: "nba", label: "Basketball" },
{ id: "f1", label: "Formula 1" },
{ id: "culture", label: "Culture" },
{ id: "film", label: "Film" },
{ id: "music", label: "Music" },
{ id: "books", label: "Books" },
{ id: "gaming", label: "Gaming" },
{ id: "food", label: "Food & drink" },
{ id: "travel", label: "Travel", followed: true },
{ id: "fashion", label: "Fashion" },
{ id: "home", label: "Home & garden" },
{ id: "politics", label: "Politics" },
{ id: "history", label: "History" },
{ id: "photography", label: "Photography" },
];
/** Topics follow — chip grid for picking interests. */
export function TopicsFollowScreen({
title = "Follow topics",
topics = DEFAULT_TOPICS,
onDone,
onBack,
}: TopicsFollowScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [picked, setPicked] = React.useState<Set<string>>(
() => new Set(topics.filter((t) => t.followed).map((t) => t.id)),
);
const toggle = (id: string) => {
haptics.selection();
setPicked((s) => {
const ns = new Set(s);
if (ns.has(id)) ns.delete(id);
else ns.add(id);
return ns;
});
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Button
variant="ghost"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Back"
className="-ml-2"
>
<Text className="font-medium text-primary">Back</Text>
</Button>
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.light();
onDone?.([...picked]);
}}
accessibilityLabel="Done"
>
<Text className="font-medium text-primary">Done</Text>
</Button>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
<Mount className="px-4 pt-1">
<Text variant="h2" accessibilityRole="header">
{title}
</Text>
<Text className="pt-1 text-sm text-muted-foreground">
Stories from your topics appear in Today.
</Text>
{/* Personalization promise — picks pay off in the feed. */}
<Text variant="muted" className="pt-1 text-xs">
Pick at least 3 — we'll tune Today to them
</Text>
</Mount>
{/* Topic mosaic — solid tonal tiles, Pinterest interest-picker idiom.
Picked topics fill with the topic's color; unpicked stay tinted. */}
<Mount delay={60} className="flex-row flex-wrap justify-between gap-y-2.5 px-4 pt-4">
{topics.map((t, i) => {
const on = picked.has(t.id);
const meta = TOPIC_ICON[t.id] ?? { icon: "tag" as const, bg: "bg-muted", fg: "#71717A" };
// Every 7th tile spans full width so the grid doesn't read as one
// flat checkerboard — the eye needs a rhythm break.
const wide = i % 7 === 3;
return (
<Press
key={t.id}
haptic="light"
onPress={() => toggle(t.id)}
accessibilityRole="checkbox"
accessibilityState={{ checked: on }}
accessibilityLabel={t.label}
className={`${wide ? "w-full" : "w-[48.5%]"} flex-row items-center gap-3 rounded-2xl p-3.5 ${
on ? "" : meta.bg
}`}
style={on ? { backgroundColor: meta.fg } : undefined}
>
<View
className={`h-9 w-9 items-center justify-center rounded-full ${on ? "bg-white/25" : "bg-white/70 dark:bg-black/20"}`}
>
<Icon name={meta.icon} size="sm" color={on ? "#FFFFFF" : meta.fg} />
</View>
<Text
className={`flex-1 text-[14px] font-semibold ${on ? "text-white" : ""}`}
style={on ? undefined : { color: meta.fg }}
numberOfLines={1}
>
{t.label}
</Text>
{on && <Icon name="check" size="sm" color="#FFFFFF" />}
</Press>
);
})}
</Mount>
{/* Count line — feedback that selection matters. */}
<Mount delay={120} className="mx-4 mt-4 overflow-hidden rounded-full bg-white px-4 py-3 dark:bg-[#1A1A20]">
<Text className="text-center text-xs font-medium text-muted-foreground">
{picked.size} topic{picked.size === 1 ? "" : "s"} followed
</Text>
</Mount>
</ScrollView>
</SafeAreaView>
</World>
);
}
TopicsFollowScreen.displayName = "TopicsFollowScreen";
Recreate the "Topics Follow Screen" screen in React Native using LumioUI.
Goal: Interest chip grid 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-topics-follow
```
Or pull just the components: `npx lumioui add button chip 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>` ×2
### `chip` — Compact selectable pill with press scale and ink overlay.
- 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>` ×7
## 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/topics-follow.tsx` exporting TopicsFollowScreen. 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, type IconName, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, World } from "../shared";
export interface Topic {
id: string;
label: string;
followed?: boolean;
}
export interface TopicsFollowScreenProps {
title?: string;
topics?: Topic[];
onDone?: (followed: string[]) => void;
onBack?: () => void;
}
const TOPIC_ICON: Record<string, { icon: IconName; bg: string; fg: string }> = {
world: { icon: "globe", bg: "bg-blue-500/15", fg: "#3B82F6" },
tech: { icon: "zap", bg: "bg-amber-500/15", fg: "#F59E0B" },
business: { icon: "briefcase", bg: "bg-slate-500/15", fg: "#64748B" },
markets: { icon: "arrow-up", bg: "bg-emerald-500/15", fg: "#10B981" },
startups: { icon: "rocket", bg: "bg-orange-500/15", fg: "#F97316" },
ai: { icon: "sparkles", bg: "bg-violet-500/15", fg: "#8B5CF6" },
design: { icon: "palette", bg: "bg-pink-500/15", fg: "#EC4899" },
dev: { icon: "code", bg: "bg-indigo-500/15", fg: "#6366F1" },
space: { icon: "rocket", bg: "bg-sky-500/15", fg: "#0EA5E9" },
science: { icon: "flask", bg: "bg-teal-500/15", fg: "#14B8A6" },
climate: { icon: "leaf", bg: "bg-green-500/15", fg: "#16A34A" },
health: { icon: "heart", bg: "bg-rose-500/15", fg: "#F43F5E" },
sport: { icon: "trophy", bg: "bg-yellow-500/15", fg: "#CA8A04" },
football: { icon: "medal", bg: "bg-lime-500/15", fg: "#65A30D" },
nba: { icon: "trophy", bg: "bg-orange-500/15", fg: "#EA580C" },
f1: { icon: "car", bg: "bg-red-500/15", fg: "#EF4444" },
culture: { icon: "landmark", bg: "bg-stone-500/15", fg: "#78716C" },
film: { icon: "film", bg: "bg-purple-500/15", fg: "#A855F7" },
music: { icon: "music", bg: "bg-fuchsia-500/15", fg: "#D946EF" },
books: { icon: "book-open", bg: "bg-amber-600/15", fg: "#D97706" },
gaming: { icon: "gamepad", bg: "bg-indigo-500/15", fg: "#6366F1" },
food: { icon: "utensils", bg: "bg-orange-500/15", fg: "#F97316" },
travel: { icon: "plane", bg: "bg-cyan-500/15", fg: "#0891B2" },
fashion: { icon: "shirt", bg: "bg-pink-400/15", fg: "#F472B6" },
home: { icon: "home", bg: "bg-emerald-500/15", fg: "#059669" },
politics: { icon: "landmark", bg: "bg-red-500/15", fg: "#DC2626" },
history: { icon: "clock", bg: "bg-stone-500/15", fg: "#78716C" },
photography: { icon: "camera", bg: "bg-slate-500/15", fg: "#475569" },
};
const DEFAULT_TOPICS: Topic[] = [
{ id: "world", label: "World", followed: true },
{ id: "tech", label: "Technology", followed: true },
{ id: "business", label: "Business" },
{ id: "markets", label: "Markets" },
{ id: "startups", label: "Startups" },
{ id: "ai", label: "AI" },
{ id: "design", label: "Design", followed: true },
{ id: "dev", label: "Developer" },
{ id: "space", label: "Space" },
{ id: "science", label: "Science" },
{ id: "climate", label: "Climate" },
{ id: "health", label: "Health" },
{ id: "sport", label: "Sport" },
{ id: "football", label: "Football" },
{ id: "nba", label: "Basketball" },
{ id: "f1", label: "Formula 1" },
{ id: "culture", label: "Culture" },
{ id: "film", label: "Film" },
{ id: "music", label: "Music" },
{ id: "books", label: "Books" },
{ id: "gaming", label: "Gaming" },
{ id: "food", label: "Food & drink" },
{ id: "travel", label: "Travel", followed: true },
{ id: "fashion", label: "Fashion" },
{ id: "home", label: "Home & garden" },
{ id: "politics", label: "Politics" },
{ id: "history", label: "History" },
{ id: "photography", label: "Photography" },
];
/** Topics follow — chip grid for picking interests. */
export function TopicsFollowScreen({
title = "Follow topics",
topics = DEFAULT_TOPICS,
onDone,
onBack,
}: TopicsFollowScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [picked, setPicked] = React.useState<Set<string>>(
() => new Set(topics.filter((t) => t.followed).map((t) => t.id)),
);
const toggle = (id: string) => {
haptics.selection();
setPicked((s) => {
const ns = new Set(s);
if (ns.has(id)) ns.delete(id);
else ns.add(id);
return ns;
});
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Button
variant="ghost"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Back"
className="-ml-2"
>
<Text className="font-medium text-primary">Back</Text>
</Button>
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.light();
onDone?.([...picked]);
}}
accessibilityLabel="Done"
>
<Text className="font-medium text-primary">Done</Text>
</Button>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
<Mount className="px-4 pt-1">
<Text variant="h2" accessibilityRole="header">
{title}
</Text>
<Text className="pt-1 text-sm text-muted-foreground">
Stories from your topics appear in Today.
</Text>
{/* Personalization promise — picks pay off in the feed. */}
<Text variant="muted" className="pt-1 text-xs">
Pick at least 3 — we'll tune Today to them
</Text>
</Mount>
{/* Topic mosaic — solid tonal tiles, Pinterest interest-picker idiom.
Picked topics fill with the topic's color; unpicked stay tinted. */}
<Mount delay={60} className="flex-row flex-wrap justify-between gap-y-2.5 px-4 pt-4">
{topics.map((t, i) => {
const on = picked.has(t.id);
const meta = TOPIC_ICON[t.id] ?? { icon: "tag" as const, bg: "bg-muted", fg: "#71717A" };
// Every 7th tile spans full width so the grid doesn't read as one
// flat checkerboard — the eye needs a rhythm break.
const wide = i % 7 === 3;
return (
<Press
key={t.id}
haptic="light"
onPress={() => toggle(t.id)}
accessibilityRole="checkbox"
accessibilityState={{ checked: on }}
accessibilityLabel={t.label}
className={`${wide ? "w-full" : "w-[48.5%]"} flex-row items-center gap-3 rounded-2xl p-3.5 ${
on ? "" : meta.bg
}`}
style={on ? { backgroundColor: meta.fg } : undefined}
>
<View
className={`h-9 w-9 items-center justify-center rounded-full ${on ? "bg-white/25" : "bg-white/70 dark:bg-black/20"}`}
>
<Icon name={meta.icon} size="sm" color={on ? "#FFFFFF" : meta.fg} />
</View>
<Text
className={`flex-1 text-[14px] font-semibold ${on ? "text-white" : ""}`}
style={on ? undefined : { color: meta.fg }}
numberOfLines={1}
>
{t.label}
</Text>
{on && <Icon name="check" size="sm" color="#FFFFFF" />}
</Press>
);
})}
</Mount>
{/* Count line — feedback that selection matters. */}
<Mount delay={120} className="mx-4 mt-4 overflow-hidden rounded-full bg-white px-4 py-3 dark:bg-[#1A1A20]">
<Text className="text-center text-xs font-medium text-muted-foreground">
{picked.size} topic{picked.size === 1 ? "" : "s"} followed
</Text>
</Mount>
</ScrollView>
</SafeAreaView>
</World>
);
}
TopicsFollowScreen.displayName = "TopicsFollowScreen";
```
Screen: https://lumioui.dev/screens/misc-topics-follow