Mood check-in: Apple State-of-Mind idiom — graded mood scale, feeling chips, log action
import * as React from "react";
import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
interpolate,
} from "react-native-reanimated";
import { spring } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, Press, StickyBottomBar, World } from "../shared";
interface Mood {
key: string;
label: string;
/** Mood hue — data color on the wellbeing scale, not a theme token. */
color: string;
}
const MOODS: Mood[] = [
{ key: "rough", label: "Rough", color: "#F87171" },
{ key: "low", label: "Low", color: "#FB923C" },
{ key: "ok", label: "Okay", color: "#A8A29E" },
{ key: "good", label: "Good", color: "#4ADE80" },
{ key: "great", label: "Great", color: "#38BDF8" },
];
const FEELINGS = ["Calm", "Focused", "Hopeful", "Tired", "Anxious", "Grateful", "Irritated", "Energized"];
/** This week's entries — Daylio's trend strip: one dot per day on the same
* hue scale as the picker, so the check-in sits in context of the week. */
const WEEK = [
{ day: "S", mood: "good", color: "#4ADE80" },
{ day: "M", mood: "ok", color: "#A8A29E" },
{ day: "T", mood: "low", color: "#FB923C" },
{ day: "W", mood: "good", color: "#4ADE80" },
{ day: "T", mood: "great", color: "#38BDF8" },
{ day: "F", mood: "good", color: "#4ADE80" },
{ day: "S", mood: "today", color: null },
];
export interface MoodCheckinScreenProps {
moods?: Mood[];
feelings?: string[];
onLog?: (mood: string, feelings: string[]) => void;
onBack?: () => void;
}
/** One capsule on the mood scale — springs taller and fills with its hue
* when picked (the Moods app idiom); the label sits under it. */
function MoodPill({
mood: m,
active,
onPick,
}: {
mood: Mood;
active: boolean;
onPick: () => void;
}) {
const reduce = useReducedMotion();
const t = useSharedValue(active ? 1 : 0);
React.useEffect(() => {
t.value = reduce ? (active ? 1 : 0) : withSpring(active ? 1 : 0, spring.bouncy);
}, [active, t, reduce]);
const pillStyle = useAnimatedStyle(() => ({
height: interpolate(t.value, [0, 1], [72, 96]),
opacity: interpolate(t.value, [0, 1], [0.3, 1]),
}));
return (
<Press
onPress={onPick}
accessibilityRole="radio"
accessibilityState={{ selected: active }}
accessibilityLabel={m.label}
className="items-center gap-2"
>
<Animated.View
style={[pillStyle, { backgroundColor: m.color }]}
className="w-11 rounded-full"
/>
<Text
variant="small"
className={cn("text-xs", active ? "font-semibold text-foreground" : "text-muted-foreground")}
>
{m.label}
</Text>
</Press>
);
}
MoodPill.displayName = "MoodPill";
/** Mood check-in — Apple Health "State of Mind" idiom: a graded mood scale
* (unpleasant → pleasant hues), feelings as multi-select chips, and a
* single log action. Selecting a mood arms the CTA; logging confirms. */
export function MoodCheckinScreen({
moods = MOODS,
feelings = FEELINGS,
onLog,
onBack,
}: MoodCheckinScreenProps) {
const haptics = useHaptic();
const [mood, setMood] = useState<string | null>("ok");
const [picked, setPicked] = useState<string[]>(["Calm", "Focused"]);
const [logged, setLogged] = useState(false);
const toggle = (f: string) =>
setPicked((p) => (p.includes(f) ? p.filter((x) => x !== f) : [...p, f]));
const log = () => {
if (!mood) return;
haptics.light();
setLogged(true);
onLog?.(mood, picked);
};
const selected = moods.find((m) => m.key === mood);
return (
<World primary="#16A34A">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<View className="flex-row items-center justify-between px-6 pb-2 pt-3">
<Text variant="muted">Check in</Text>
<Glass interactive effect="regular" className="h-10 w-10 items-center justify-center rounded-full">
<Press
onPress={onBack}
haptic="light"
accessibilityRole="button"
accessibilityLabel="Close"
className="h-8 w-8 items-center justify-center"
>
<Icon name="x" size="sm" color="foreground" />
</Press>
</Glass>
</View>
<ScrollView
className="flex-1"
contentContainerClassName="gap-6 px-6 pb-32"
showsVerticalScrollIndicator={false}
>
<Text variant="h1" className="pt-2">
How are you feeling?
</Text>
{/* Streak context — check-ins reward showing up. */}
<Text variant="muted" className="-mt-4 text-xs">
5-day check-in streak · evening entry
</Text>
{/* Moods-style scale — vertical capsules that spring taller when
picked; the active hue fills its capsule end to end. */}
<Mount className="flex-row items-end justify-between px-1">
{moods.map((m) => (
<MoodPill
key={m.key}
mood={m}
active={mood === m.key}
onPick={() => {
haptics.selection();
setLogged(false);
setMood(m.key);
}}
/>
))}
</Mount>
<Mount delay={BLOCK_STAGGER} className="gap-3">
<Text variant="muted">What is contributing to it?</Text>
<View className="flex-row flex-wrap gap-2">
{feelings.map((f) => {
const on = picked.includes(f);
return (
<Chip
key={f}
variant="assist"
selected={on}
onSelectedChange={() => toggle(f)}
className="px-4 py-2"
>
{f}
</Chip>
);
})}
</View>
</Mount>
{/* Week in moods — the dots reuse the picker's hue scale, and
today's slot is an outlined placeholder waiting for this log. */}
<Mount delay={BLOCK_STAGGER * 2} className="gap-3">
<Text variant="muted">This week</Text>
<View className="flex-row items-center justify-between overflow-hidden rounded-3xl bg-white px-5 py-4 dark:bg-[#1A1A20]">
{WEEK.map((d, i) => (
<View key={i} className="items-center gap-1.5">
{d.color ? (
<View className="h-7 w-7 rounded-full" style={{ backgroundColor: d.color }} />
) : (
<View
className="h-7 w-7 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/40"
>
<Text className="text-[9px] font-bold text-muted-foreground">?</Text>
</View>
)}
<Text variant="muted" className="text-[10px]">{d.day}</Text>
</View>
))}
</View>
</Mount>
{logged && selected ? (
<View className="flex-row items-center gap-3 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
<View
className="h-10 w-10 items-center justify-center rounded-full"
style={{ backgroundColor: selected.color }}
>
<Icon name="check" size="sm" color="#FFFFFF" />
</View>
<View className="flex-1">
<Text variant="large">Logged — feeling {selected.label.toLowerCase()}</Text>
<Text variant="muted">Added to your wellbeing journal</Text>
</View>
</View>
) : null}
</ScrollView>
<StickyBottomBar>
<View className="rounded-3xl bg-white p-3 shadow-sm dark:bg-[#1A1A20]">
<Button tone="inverse" onPress={log} disabled={!mood} className="w-full bg-[#1B1B26]">
{mood ? "Log mood" : "Pick a mood to log"}
</Button>
</View>
</StickyBottomBar>
</SafeAreaView>
</World>
);
}
MoodCheckinScreen.displayName = "MoodCheckinScreen";
Recreate the "Mood Checkin" screen in React Native using LumioUI.
Goal: Mood check-in: Apple State-of-Mind idiom — graded mood scale, feeling chips, log action 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 health-mood-checkin
```
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>` ×1
### `chip` — Compact selectable pill with press scale and ink overlay.
- `<Chip>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `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/health/mood-checkin.tsx` exporting MoodCheckinScreen. 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 { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic, useReducedMotion } from "@lumioui/core";
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
interpolate,
} from "react-native-reanimated";
import { spring } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, Press, StickyBottomBar, World } from "../shared";
interface Mood {
key: string;
label: string;
/** Mood hue — data color on the wellbeing scale, not a theme token. */
color: string;
}
const MOODS: Mood[] = [
{ key: "rough", label: "Rough", color: "#F87171" },
{ key: "low", label: "Low", color: "#FB923C" },
{ key: "ok", label: "Okay", color: "#A8A29E" },
{ key: "good", label: "Good", color: "#4ADE80" },
{ key: "great", label: "Great", color: "#38BDF8" },
];
const FEELINGS = ["Calm", "Focused", "Hopeful", "Tired", "Anxious", "Grateful", "Irritated", "Energized"];
/** This week's entries — Daylio's trend strip: one dot per day on the same
* hue scale as the picker, so the check-in sits in context of the week. */
const WEEK = [
{ day: "S", mood: "good", color: "#4ADE80" },
{ day: "M", mood: "ok", color: "#A8A29E" },
{ day: "T", mood: "low", color: "#FB923C" },
{ day: "W", mood: "good", color: "#4ADE80" },
{ day: "T", mood: "great", color: "#38BDF8" },
{ day: "F", mood: "good", color: "#4ADE80" },
{ day: "S", mood: "today", color: null },
];
export interface MoodCheckinScreenProps {
moods?: Mood[];
feelings?: string[];
onLog?: (mood: string, feelings: string[]) => void;
onBack?: () => void;
}
/** One capsule on the mood scale — springs taller and fills with its hue
* when picked (the Moods app idiom); the label sits under it. */
function MoodPill({
mood: m,
active,
onPick,
}: {
mood: Mood;
active: boolean;
onPick: () => void;
}) {
const reduce = useReducedMotion();
const t = useSharedValue(active ? 1 : 0);
React.useEffect(() => {
t.value = reduce ? (active ? 1 : 0) : withSpring(active ? 1 : 0, spring.bouncy);
}, [active, t, reduce]);
const pillStyle = useAnimatedStyle(() => ({
height: interpolate(t.value, [0, 1], [72, 96]),
opacity: interpolate(t.value, [0, 1], [0.3, 1]),
}));
return (
<Press
onPress={onPick}
accessibilityRole="radio"
accessibilityState={{ selected: active }}
accessibilityLabel={m.label}
className="items-center gap-2"
>
<Animated.View
style={[pillStyle, { backgroundColor: m.color }]}
className="w-11 rounded-full"
/>
<Text
variant="small"
className={cn("text-xs", active ? "font-semibold text-foreground" : "text-muted-foreground")}
>
{m.label}
</Text>
</Press>
);
}
MoodPill.displayName = "MoodPill";
/** Mood check-in — Apple Health "State of Mind" idiom: a graded mood scale
* (unpleasant → pleasant hues), feelings as multi-select chips, and a
* single log action. Selecting a mood arms the CTA; logging confirms. */
export function MoodCheckinScreen({
moods = MOODS,
feelings = FEELINGS,
onLog,
onBack,
}: MoodCheckinScreenProps) {
const haptics = useHaptic();
const [mood, setMood] = useState<string | null>("ok");
const [picked, setPicked] = useState<string[]>(["Calm", "Focused"]);
const [logged, setLogged] = useState(false);
const toggle = (f: string) =>
setPicked((p) => (p.includes(f) ? p.filter((x) => x !== f) : [...p, f]));
const log = () => {
if (!mood) return;
haptics.light();
setLogged(true);
onLog?.(mood, picked);
};
const selected = moods.find((m) => m.key === mood);
return (
<World primary="#16A34A">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
<View className="flex-row items-center justify-between px-6 pb-2 pt-3">
<Text variant="muted">Check in</Text>
<Glass interactive effect="regular" className="h-10 w-10 items-center justify-center rounded-full">
<Press
onPress={onBack}
haptic="light"
accessibilityRole="button"
accessibilityLabel="Close"
className="h-8 w-8 items-center justify-center"
>
<Icon name="x" size="sm" color="foreground" />
</Press>
</Glass>
</View>
<ScrollView
className="flex-1"
contentContainerClassName="gap-6 px-6 pb-32"
showsVerticalScrollIndicator={false}
>
<Text variant="h1" className="pt-2">
How are you feeling?
</Text>
{/* Streak context — check-ins reward showing up. */}
<Text variant="muted" className="-mt-4 text-xs">
5-day check-in streak · evening entry
</Text>
{/* Moods-style scale — vertical capsules that spring taller when
picked; the active hue fills its capsule end to end. */}
<Mount className="flex-row items-end justify-between px-1">
{moods.map((m) => (
<MoodPill
key={m.key}
mood={m}
active={mood === m.key}
onPick={() => {
haptics.selection();
setLogged(false);
setMood(m.key);
}}
/>
))}
</Mount>
<Mount delay={BLOCK_STAGGER} className="gap-3">
<Text variant="muted">What is contributing to it?</Text>
<View className="flex-row flex-wrap gap-2">
{feelings.map((f) => {
const on = picked.includes(f);
return (
<Chip
key={f}
variant="assist"
selected={on}
onSelectedChange={() => toggle(f)}
className="px-4 py-2"
>
{f}
</Chip>
);
})}
</View>
</Mount>
{/* Week in moods — the dots reuse the picker's hue scale, and
today's slot is an outlined placeholder waiting for this log. */}
<Mount delay={BLOCK_STAGGER * 2} className="gap-3">
<Text variant="muted">This week</Text>
<View className="flex-row items-center justify-between overflow-hidden rounded-3xl bg-white px-5 py-4 dark:bg-[#1A1A20]">
{WEEK.map((d, i) => (
<View key={i} className="items-center gap-1.5">
{d.color ? (
<View className="h-7 w-7 rounded-full" style={{ backgroundColor: d.color }} />
) : (
<View
className="h-7 w-7 items-center justify-center rounded-full border-2 border-dashed border-muted-foreground/40"
>
<Text className="text-[9px] font-bold text-muted-foreground">?</Text>
</View>
)}
<Text variant="muted" className="text-[10px]">{d.day}</Text>
</View>
))}
</View>
</Mount>
{logged && selected ? (
<View className="flex-row items-center gap-3 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
<View
className="h-10 w-10 items-center justify-center rounded-full"
style={{ backgroundColor: selected.color }}
>
<Icon name="check" size="sm" color="#FFFFFF" />
</View>
<View className="flex-1">
<Text variant="large">Logged — feeling {selected.label.toLowerCase()}</Text>
<Text variant="muted">Added to your wellbeing journal</Text>
</View>
</View>
) : null}
</ScrollView>
<StickyBottomBar>
<View className="rounded-3xl bg-white p-3 shadow-sm dark:bg-[#1A1A20]">
<Button tone="inverse" onPress={log} disabled={!mood} className="w-full bg-[#1B1B26]">
{mood ? "Log mood" : "Pick a mood to log"}
</Button>
</View>
</StickyBottomBar>
</SafeAreaView>
</World>
);
}
MoodCheckinScreen.displayName = "MoodCheckinScreen";
```
Screen: https://lumioui.dev/screens/health-mood-checkin