Email reset-request form with validation and a success state confirming the code was sent
import * as React from "react";
import { View, Pressable, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useState } from "react";
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import { Button, Icon, Input, Text, KeyboardAvoiding } from "@lumioui/ui";
import { spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { Mount, World } from "../shared";
export interface ForgotPasswordScreenProps {
onSendCode?: (email: string) => void;
onBack?: () => void;
/** Prefilled email for demos/previews — production hosts omit it. */
defaultEmail?: string;
}
/** Forgot password — email → send reset code, then an animated success state. */
export function ForgotPasswordScreen({ onSendCode, onBack, defaultEmail }: ForgotPasswordScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [email, setEmail] = useState(defaultEmail ?? "amara.chen@lumio.dev");
const [method, setMethod] = useState(0);
const [sent, setSent] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>();
const submit = () => {
if (method === 0 && !email.includes("@")) {
setError("Enter a valid email address");
haptics.error();
return;
}
setError(undefined);
setLoading(true);
onSendCode?.(email);
setTimeout(() => {
setLoading(false);
setSent(true);
haptics.success();
}, 800);
};
return (
<World primary="#65A30D">
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
{/* Top bar — back affordance clears the status bar */}
<View className="px-2" style={{ paddingTop: insets.top + 4 }}>
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={8}
className="h-11 flex-row items-center gap-1 self-start px-2"
>
<Icon name="chevron-left" size="sm" color="#65A30D" />
<Text className="text-base text-[#65A30D]">Back</Text>
</Pressable>
</View>
<KeyboardAvoiding>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerClassName="flex-grow justify-center px-6"
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
{!sent ? (
<View className="gap-9">
{/* Centered glyph moment — nested tonal rings around a mail
disc, intentionally NOT login's top-bleed hero card: this
screen is a quick errand, not a brand moment. */}
<Mount delay={0}>
<View className="items-center gap-5">
<View className="h-36 w-36 items-center justify-center rounded-full bg-[#65A30D]/10">
<View className="h-24 w-24 items-center justify-center rounded-full bg-[#65A30D]/15">
<View className="h-16 w-16 items-center justify-center rounded-full bg-[#65A30D]">
<Icon
name={loading ? "send" : "mail"}
size="lg"
color="primaryForeground"
/>
</View>
</View>
</View>
<View className="items-center gap-2">
<Text variant="h1" className="text-center tracking-tight">
Forgot <Text className="italic text-[#65A30D]">password</Text>?
</Text>
<Text variant="muted" className="max-w-xs text-center leading-relaxed">
Pick where to send the reset code.
</Text>
</View>
</View>
</Mount>
<Mount delay={100}>
{/* Recovery-channel picker — the "choose where we send it"
idiom from real apps, not a lone input field. */}
<View className="gap-3">
{(
[
["mail", "Email", "amara.chen@lumio.dev"],
["message-circle", "Text message", "••• ••• 0148"],
] as const
).map(([icon, label, hint], i) => {
const selected = method === i;
return (
<Pressable
key={label}
onPress={() => {
haptics.selection();
setMethod(i);
}}
accessibilityRole="radio"
accessibilityState={{ selected }}
className={`flex-row items-center gap-4 overflow-hidden rounded-2xl border-2 p-4 ${
selected
? "border-[#65A30D] bg-[#EDF8C4] dark:bg-white/10"
: "border-transparent bg-white dark:bg-[#1A1A20]"
}`}
>
<View
className={`h-11 w-11 items-center justify-center rounded-full ${
selected ? "bg-[#65A30D]" : "bg-[#65A30D]/10"
}`}
>
<Icon
name={icon}
size="sm"
color={selected ? "primaryForeground" : "#65A30D"}
/>
</View>
<View className="flex-1">
<Text className="text-base font-semibold">{label}</Text>
<Text variant="muted" className="text-xs">
{i === 0 ? email : hint}
</Text>
</View>
<View
className={`h-5 w-5 items-center justify-center rounded-full border-2 ${
selected ? "border-[#65A30D]" : "border-foreground/25"
}`}
>
{selected ? (
<View className="h-2.5 w-2.5 rounded-full bg-[#65A30D]" />
) : null}
</View>
</Pressable>
);
})}
{method === 0 ? (
<Input
label="Email"
placeholder="you@example.com"
leftIcon={<Icon name="mail" size="sm" color="mutedForeground" />}
value={email}
onChangeText={(v) => {
setEmail(v);
if (error) setError(undefined);
}}
keyboardType="email-address"
autoCapitalize="none"
autoComplete="email"
textContentType="emailAddress"
returnKeyType="send"
onSubmitEditing={submit}
error={error}
glass
/>
) : null}
</View>
</Mount>
<Mount delay={180}>
<View className="gap-4">
<Button
size="lg"
loading={loading}
disabled={method === 0 && !email.trim()}
onPress={submit}
haptic="medium"
className="bg-[#65A30D] w-full"
>
Send reset code
</Button>
{/* Foreshadow the OTP step so the next screen isn't a
surprise. */}
<View className="flex-row items-center justify-center gap-1.5">
<Icon name="shield" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-xs">
We'll send a 6-digit code — arrives in ~30s, expires in 10 minutes.
</Text>
</View>
{/* Escape hatch — same sign-in link the success state shows. */}
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="link"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text variant="muted">
Remember your password?{" "}
<Text className="font-semibold text-[#65A30D]">Sign in</Text>
</Text>
</Pressable>
</View>
</Mount>
</View>
) : (
<View className="items-center gap-5">
{/* Success mark pops in on arrival — one solid disc, white check */}
<Pop>
<View className="h-16 w-16 items-center justify-center rounded-full bg-success">
<Icon name="check" size="md" color="successForeground" />
</View>
</Pop>
<Mount delay={120}>
<View className="items-center gap-3">
<Text variant="h1" className="text-center tracking-tight">
Check your <Text className="italic text-[#65A30D]">{method === 0 ? "email" : "texts"}</Text>
</Text>
<Text variant="muted" className="max-w-xs text-center text-base leading-relaxed">
We sent a reset code to{" "}
<Text className="font-semibold text-foreground">
{method === 0 ? email : "••• ••• 0148"}
</Text>
</Text>
<Text variant="muted" className="max-w-xs text-center leading-relaxed">
Didn't get it? Check your spam folder, or send a new code.
</Text>
</View>
</Mount>
<Mount delay={220} className="w-full">
<Button
variant="glass"
size="lg"
loading={loading}
onPress={() => {
// Back through the send flow so the resend is visible —
// the success mark pops again when the code lands.
setSent(false);
submit();
}}
haptic="medium"
className="mt-1 w-full"
>
Resend code
</Button>
</Mount>
<Mount delay={300}>
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="link"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text className="text-[#65A30D] font-semibold">Back to sign in</Text>
</Pressable>
</Mount>
</View>
)}
</ScrollView>
</KeyboardAvoiding>
</View>
</World>
);
}
/** Success-mark entrance — scales up with spring.bouncy for a soft overshoot.
* Reduced motion appears instantly. */
function Pop({ children }: { children: React.ReactNode }) {
const reduce = useReducedMotion();
const t = useSharedValue(reduce ? 1 : 0);
useEffect(() => {
t.value = reduce ? 1 : withSpring(1, spring.bouncy);
}, [reduce, t]);
const anim = useAnimatedStyle(() => ({
opacity: t.value,
transform: [{ scale: 0.6 + t.value * 0.4 }],
}));
return <Animated.View style={anim}>{children}</Animated.View>;
}
Pop.displayName = "Pop";
Recreate the "Forgot Password Screen" screen in React Native using LumioUI.
Goal: Email reset-request form with validation and a success state confirming the code was sent 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 auth-forgot-password
```
Or pull just the components: `npx lumioui add button icon input keyboard-avoiding 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>` ×6
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×1
### `keyboard-avoiding` — View that lifts above the keyboard on both platforms.
- `<KeyboardAvoiding>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×15
## 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/auth/forgot-password.tsx` exporting ForgotPasswordScreen. 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 { View, Pressable, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useState } from "react";
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import { Button, Icon, Input, Text, KeyboardAvoiding } from "@lumioui/ui";
import { spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { Mount, World } from "../shared";
export interface ForgotPasswordScreenProps {
onSendCode?: (email: string) => void;
onBack?: () => void;
/** Prefilled email for demos/previews — production hosts omit it. */
defaultEmail?: string;
}
/** Forgot password — email → send reset code, then an animated success state. */
export function ForgotPasswordScreen({ onSendCode, onBack, defaultEmail }: ForgotPasswordScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [email, setEmail] = useState(defaultEmail ?? "amara.chen@lumio.dev");
const [method, setMethod] = useState(0);
const [sent, setSent] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>();
const submit = () => {
if (method === 0 && !email.includes("@")) {
setError("Enter a valid email address");
haptics.error();
return;
}
setError(undefined);
setLoading(true);
onSendCode?.(email);
setTimeout(() => {
setLoading(false);
setSent(true);
haptics.success();
}, 800);
};
return (
<World primary="#65A30D">
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
{/* Top bar — back affordance clears the status bar */}
<View className="px-2" style={{ paddingTop: insets.top + 4 }}>
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="button"
accessibilityLabel="Go back"
hitSlop={8}
className="h-11 flex-row items-center gap-1 self-start px-2"
>
<Icon name="chevron-left" size="sm" color="#65A30D" />
<Text className="text-base text-[#65A30D]">Back</Text>
</Pressable>
</View>
<KeyboardAvoiding>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerClassName="flex-grow justify-center px-6"
contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
>
{!sent ? (
<View className="gap-9">
{/* Centered glyph moment — nested tonal rings around a mail
disc, intentionally NOT login's top-bleed hero card: this
screen is a quick errand, not a brand moment. */}
<Mount delay={0}>
<View className="items-center gap-5">
<View className="h-36 w-36 items-center justify-center rounded-full bg-[#65A30D]/10">
<View className="h-24 w-24 items-center justify-center rounded-full bg-[#65A30D]/15">
<View className="h-16 w-16 items-center justify-center rounded-full bg-[#65A30D]">
<Icon
name={loading ? "send" : "mail"}
size="lg"
color="primaryForeground"
/>
</View>
</View>
</View>
<View className="items-center gap-2">
<Text variant="h1" className="text-center tracking-tight">
Forgot <Text className="italic text-[#65A30D]">password</Text>?
</Text>
<Text variant="muted" className="max-w-xs text-center leading-relaxed">
Pick where to send the reset code.
</Text>
</View>
</View>
</Mount>
<Mount delay={100}>
{/* Recovery-channel picker — the "choose where we send it"
idiom from real apps, not a lone input field. */}
<View className="gap-3">
{(
[
["mail", "Email", "amara.chen@lumio.dev"],
["message-circle", "Text message", "••• ••• 0148"],
] as const
).map(([icon, label, hint], i) => {
const selected = method === i;
return (
<Pressable
key={label}
onPress={() => {
haptics.selection();
setMethod(i);
}}
accessibilityRole="radio"
accessibilityState={{ selected }}
className={`flex-row items-center gap-4 overflow-hidden rounded-2xl border-2 p-4 ${
selected
? "border-[#65A30D] bg-[#EDF8C4] dark:bg-white/10"
: "border-transparent bg-white dark:bg-[#1A1A20]"
}`}
>
<View
className={`h-11 w-11 items-center justify-center rounded-full ${
selected ? "bg-[#65A30D]" : "bg-[#65A30D]/10"
}`}
>
<Icon
name={icon}
size="sm"
color={selected ? "primaryForeground" : "#65A30D"}
/>
</View>
<View className="flex-1">
<Text className="text-base font-semibold">{label}</Text>
<Text variant="muted" className="text-xs">
{i === 0 ? email : hint}
</Text>
</View>
<View
className={`h-5 w-5 items-center justify-center rounded-full border-2 ${
selected ? "border-[#65A30D]" : "border-foreground/25"
}`}
>
{selected ? (
<View className="h-2.5 w-2.5 rounded-full bg-[#65A30D]" />
) : null}
</View>
</Pressable>
);
})}
{method === 0 ? (
<Input
label="Email"
placeholder="you@example.com"
leftIcon={<Icon name="mail" size="sm" color="mutedForeground" />}
value={email}
onChangeText={(v) => {
setEmail(v);
if (error) setError(undefined);
}}
keyboardType="email-address"
autoCapitalize="none"
autoComplete="email"
textContentType="emailAddress"
returnKeyType="send"
onSubmitEditing={submit}
error={error}
glass
/>
) : null}
</View>
</Mount>
<Mount delay={180}>
<View className="gap-4">
<Button
size="lg"
loading={loading}
disabled={method === 0 && !email.trim()}
onPress={submit}
haptic="medium"
className="bg-[#65A30D] w-full"
>
Send reset code
</Button>
{/* Foreshadow the OTP step so the next screen isn't a
surprise. */}
<View className="flex-row items-center justify-center gap-1.5">
<Icon name="shield" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-xs">
We'll send a 6-digit code — arrives in ~30s, expires in 10 minutes.
</Text>
</View>
{/* Escape hatch — same sign-in link the success state shows. */}
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="link"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text variant="muted">
Remember your password?{" "}
<Text className="font-semibold text-[#65A30D]">Sign in</Text>
</Text>
</Pressable>
</View>
</Mount>
</View>
) : (
<View className="items-center gap-5">
{/* Success mark pops in on arrival — one solid disc, white check */}
<Pop>
<View className="h-16 w-16 items-center justify-center rounded-full bg-success">
<Icon name="check" size="md" color="successForeground" />
</View>
</Pop>
<Mount delay={120}>
<View className="items-center gap-3">
<Text variant="h1" className="text-center tracking-tight">
Check your <Text className="italic text-[#65A30D]">{method === 0 ? "email" : "texts"}</Text>
</Text>
<Text variant="muted" className="max-w-xs text-center text-base leading-relaxed">
We sent a reset code to{" "}
<Text className="font-semibold text-foreground">
{method === 0 ? email : "••• ••• 0148"}
</Text>
</Text>
<Text variant="muted" className="max-w-xs text-center leading-relaxed">
Didn't get it? Check your spam folder, or send a new code.
</Text>
</View>
</Mount>
<Mount delay={220} className="w-full">
<Button
variant="glass"
size="lg"
loading={loading}
onPress={() => {
// Back through the send flow so the resend is visible —
// the success mark pops again when the code lands.
setSent(false);
submit();
}}
haptic="medium"
className="mt-1 w-full"
>
Resend code
</Button>
</Mount>
<Mount delay={300}>
<Pressable
onPress={() => {
haptics.light();
onBack?.();
}}
accessibilityRole="link"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text className="text-[#65A30D] font-semibold">Back to sign in</Text>
</Pressable>
</Mount>
</View>
)}
</ScrollView>
</KeyboardAvoiding>
</View>
</World>
);
}
/** Success-mark entrance — scales up with spring.bouncy for a soft overshoot.
* Reduced motion appears instantly. */
function Pop({ children }: { children: React.ReactNode }) {
const reduce = useReducedMotion();
const t = useSharedValue(reduce ? 1 : 0);
useEffect(() => {
t.value = reduce ? 1 : withSpring(1, spring.bouncy);
}, [reduce, t]);
const anim = useAnimatedStyle(() => ({
opacity: t.value,
transform: [{ scale: 0.6 + t.value * 0.4 }],
}));
return <Animated.View style={anim}>{children}</Animated.View>;
}
Pop.displayName = "Pop";
```
Screen: https://lumioui.dev/screens/auth-forgot-password