Phone-number entry with country-code picker, a numbered what-happens-next flow, and carrier-rates footnote
import * as React from "react";
import { View, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useState } from "react";
import { Button, Icon, Input, Select, Text, KeyboardAvoiding } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, BLOCK_STAGGER, World } from "../shared";
export interface PhoneVerificationScreenProps {
onSendCode?: (phone: string) => void;
onUseEmail?: () => void;
onBack?: () => void;
/** Prefilled number for demos/previews — production hosts omit it. */
defaultPhone?: string;
/** Selected country dialing code. */
defaultCountryCode?: string;
}
// Trigger shows flag + dial code; the country name rides as the row
// subtitle inside the options sheet.
const COUNTRY_CODES = [
{ value: "+1", label: "🇺🇸 +1", subtitle: "United States" },
{ value: "+44", label: "🇬🇧 +44", subtitle: "United Kingdom" },
{ value: "+49", label: "🇩🇪 +49", subtitle: "Germany" },
{ value: "+81", label: "🇯🇵 +81", subtitle: "Japan" },
{ value: "+91", label: "🇮🇳 +91", subtitle: "India" },
{ value: "+61", label: "🇦🇺 +61", subtitle: "Australia" },
];
/** NANP-style grouping — (555) 013-2098 — applied as they type. Other
* formats just get digit spacing. */
const formatPhone = (raw: string) => {
const d = raw.replace(/\D/g, "").slice(0, 10);
if (d.length > 6) return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
if (d.length > 3) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
if (d.length > 0) return `(${d}`;
return "";
};
/** What happens after they tap send — the numbered flow reads as real
* content, not decoration. */
const FLOW_STEPS = [
"We text a 6-digit code to your number",
"You enter it on the next screen",
"Your number is linked to your account",
];
/** Phone verification — country-code picker + number field, a numbered
* "what happens next" list, and carrier-rates footnote. */
export function PhoneVerificationScreen({
onSendCode,
onUseEmail,
onBack,
defaultPhone,
defaultCountryCode = "+1",
}: PhoneVerificationScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [countryCode, setCountryCode] = useState(defaultCountryCode);
const [phone, setPhone] = useState(defaultPhone ?? "555 013 2098");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>();
const digits = phone.replace(/\D/g, "");
const canSubmit = digits.length >= 6;
const submit = () => {
if (digits.length < 6) {
setError("Enter a valid phone number");
haptics.error();
return;
}
setError(undefined);
setLoading(true);
onSendCode?.(`${countryCode} ${phone.trim()}`);
setTimeout(() => setLoading(false), 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 }}>
<Press
onPress={onBack}
haptic="light"
pressedScale={0.97}
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>
</Press>
</View>
<KeyboardAvoiding>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerClassName="flex-grow px-6"
contentContainerStyle={{ paddingTop: 8, paddingBottom: insets.bottom + 24 }}
>
<Mount delay={0}>
<View className="gap-3">
<Text variant="h1" className="tracking-tight">
What's your number?
</Text>
<Text variant="muted" className="max-w-xs text-base leading-relaxed">
We'll text you a code to verify it's really you.
</Text>
</View>
</Mount>
{/* Number entry — country select and field share one visual row */}
<Mount delay={BLOCK_STAGGER}>
<View className="mt-8 flex-row items-end gap-3">
<View className="w-36 gap-1.5">
{/* Field-variant Select has no built-in label — match Input's. */}
<Text className="text-sm font-medium text-foreground">Country</Text>
<Select
options={COUNTRY_CODES}
value={countryCode}
onValueChange={(v) => {
haptics.selection();
setCountryCode(v);
}}
title="Choose your country"
/>
</View>
<View className="flex-1">
<Input
label="Phone number"
placeholder="(555) 013-2098"
value={phone}
onChangeText={(v) => {
setPhone(formatPhone(v));
if (error) setError(undefined);
}}
keyboardType="phone-pad"
autoComplete="tel"
textContentType="telephoneNumber"
returnKeyType="send"
onSubmitEditing={submit}
error={error}
glass
/>
</View>
</View>
</Mount>
{/* Where the code lands — the assembled number as confirmation. */}
{canSubmit ? (
<Text variant="muted" className="mt-3 text-center text-xs">
Texting {countryCode} {phone}
</Text>
) : null}
{/* Incoming-SMS preview — the signature moment: the code they're
about to get, rendered as the text message itself. */}
<Mount delay={BLOCK_STAGGER * 1.5}>
<View className="mt-7 self-start overflow-hidden rounded-2xl rounded-bl-md bg-white px-4 py-3 dark:bg-[#1A1A20]">
<View className="flex-row items-center gap-1.5 pb-1">
<Icon name="message-circle" size="sm" color="mutedForeground" />
<Text variant="small" className="text-xs font-medium text-muted-foreground">
LUMIO · now
</Text>
</View>
<Text className="text-sm">
Your code is <Text className="font-semibold tracking-widest">481 923</Text>
</Text>
</View>
</Mount>
{/* The flow — numbered dots are step indices, not decoration */}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="mt-9 gap-4 overflow-hidden rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
{FLOW_STEPS.map((step, i) => (
<View key={step} className="flex-row items-center gap-3.5">
<View
className="h-6 w-6 items-center justify-center rounded-full bg-[#EDF8C4]"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Text className="text-xs font-semibold text-[#65A30D]">{i + 1}</Text>
</View>
<Text variant="small" className="flex-1">
{step}
</Text>
</View>
))}
</View>
</Mount>
<Mount delay={BLOCK_STAGGER * 3} className="mt-auto">
<View className="gap-2 pt-10">
<Button
size="lg"
loading={loading}
disabled={!canSubmit}
onPress={submit}
haptic="medium"
className="bg-[#65A30D] w-full"
>
Text me a code
</Button>
<Text variant="muted" className="text-center text-xs leading-relaxed">
Message and data rates may apply.
</Text>
{onUseEmail ? (
<Press
onPress={onUseEmail}
haptic="light"
pressedScale={0.97}
accessibilityRole="link"
accessibilityLabel="Verify with email instead"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text className="text-[#65A30D] font-semibold">Use email instead</Text>
</Press>
) : null}
</View>
</Mount>
</ScrollView>
</KeyboardAvoiding>
</View>
</World>
);
}
PhoneVerificationScreen.displayName = "PhoneVerificationScreen";
Recreate the "Phone Verification Screen" screen in React Native using LumioUI.
Goal: Phone-number entry with country-code picker, a numbered what-happens-next flow, and carrier-rates footnote 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-phone-verification
```
Or pull just the components: `npx lumioui add button icon input keyboard-avoiding select 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
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `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
### `select` — Bottom-sheet picker with staggered options.
- `<Select>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×12
## 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/phone-verification.tsx` exporting PhoneVerificationScreen. 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, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useState } from "react";
import { Button, Icon, Input, Select, Text, KeyboardAvoiding } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, BLOCK_STAGGER, World } from "../shared";
export interface PhoneVerificationScreenProps {
onSendCode?: (phone: string) => void;
onUseEmail?: () => void;
onBack?: () => void;
/** Prefilled number for demos/previews — production hosts omit it. */
defaultPhone?: string;
/** Selected country dialing code. */
defaultCountryCode?: string;
}
// Trigger shows flag + dial code; the country name rides as the row
// subtitle inside the options sheet.
const COUNTRY_CODES = [
{ value: "+1", label: "🇺🇸 +1", subtitle: "United States" },
{ value: "+44", label: "🇬🇧 +44", subtitle: "United Kingdom" },
{ value: "+49", label: "🇩🇪 +49", subtitle: "Germany" },
{ value: "+81", label: "🇯🇵 +81", subtitle: "Japan" },
{ value: "+91", label: "🇮🇳 +91", subtitle: "India" },
{ value: "+61", label: "🇦🇺 +61", subtitle: "Australia" },
];
/** NANP-style grouping — (555) 013-2098 — applied as they type. Other
* formats just get digit spacing. */
const formatPhone = (raw: string) => {
const d = raw.replace(/\D/g, "").slice(0, 10);
if (d.length > 6) return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`;
if (d.length > 3) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
if (d.length > 0) return `(${d}`;
return "";
};
/** What happens after they tap send — the numbered flow reads as real
* content, not decoration. */
const FLOW_STEPS = [
"We text a 6-digit code to your number",
"You enter it on the next screen",
"Your number is linked to your account",
];
/** Phone verification — country-code picker + number field, a numbered
* "what happens next" list, and carrier-rates footnote. */
export function PhoneVerificationScreen({
onSendCode,
onUseEmail,
onBack,
defaultPhone,
defaultCountryCode = "+1",
}: PhoneVerificationScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [countryCode, setCountryCode] = useState(defaultCountryCode);
const [phone, setPhone] = useState(defaultPhone ?? "555 013 2098");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | undefined>();
const digits = phone.replace(/\D/g, "");
const canSubmit = digits.length >= 6;
const submit = () => {
if (digits.length < 6) {
setError("Enter a valid phone number");
haptics.error();
return;
}
setError(undefined);
setLoading(true);
onSendCode?.(`${countryCode} ${phone.trim()}`);
setTimeout(() => setLoading(false), 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 }}>
<Press
onPress={onBack}
haptic="light"
pressedScale={0.97}
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>
</Press>
</View>
<KeyboardAvoiding>
<ScrollView
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
contentContainerClassName="flex-grow px-6"
contentContainerStyle={{ paddingTop: 8, paddingBottom: insets.bottom + 24 }}
>
<Mount delay={0}>
<View className="gap-3">
<Text variant="h1" className="tracking-tight">
What's your number?
</Text>
<Text variant="muted" className="max-w-xs text-base leading-relaxed">
We'll text you a code to verify it's really you.
</Text>
</View>
</Mount>
{/* Number entry — country select and field share one visual row */}
<Mount delay={BLOCK_STAGGER}>
<View className="mt-8 flex-row items-end gap-3">
<View className="w-36 gap-1.5">
{/* Field-variant Select has no built-in label — match Input's. */}
<Text className="text-sm font-medium text-foreground">Country</Text>
<Select
options={COUNTRY_CODES}
value={countryCode}
onValueChange={(v) => {
haptics.selection();
setCountryCode(v);
}}
title="Choose your country"
/>
</View>
<View className="flex-1">
<Input
label="Phone number"
placeholder="(555) 013-2098"
value={phone}
onChangeText={(v) => {
setPhone(formatPhone(v));
if (error) setError(undefined);
}}
keyboardType="phone-pad"
autoComplete="tel"
textContentType="telephoneNumber"
returnKeyType="send"
onSubmitEditing={submit}
error={error}
glass
/>
</View>
</View>
</Mount>
{/* Where the code lands — the assembled number as confirmation. */}
{canSubmit ? (
<Text variant="muted" className="mt-3 text-center text-xs">
Texting {countryCode} {phone}
</Text>
) : null}
{/* Incoming-SMS preview — the signature moment: the code they're
about to get, rendered as the text message itself. */}
<Mount delay={BLOCK_STAGGER * 1.5}>
<View className="mt-7 self-start overflow-hidden rounded-2xl rounded-bl-md bg-white px-4 py-3 dark:bg-[#1A1A20]">
<View className="flex-row items-center gap-1.5 pb-1">
<Icon name="message-circle" size="sm" color="mutedForeground" />
<Text variant="small" className="text-xs font-medium text-muted-foreground">
LUMIO · now
</Text>
</View>
<Text className="text-sm">
Your code is <Text className="font-semibold tracking-widest">481 923</Text>
</Text>
</View>
</Mount>
{/* The flow — numbered dots are step indices, not decoration */}
<Mount delay={BLOCK_STAGGER * 2}>
<View className="mt-9 gap-4 overflow-hidden rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
{FLOW_STEPS.map((step, i) => (
<View key={step} className="flex-row items-center gap-3.5">
<View
className="h-6 w-6 items-center justify-center rounded-full bg-[#EDF8C4]"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Text className="text-xs font-semibold text-[#65A30D]">{i + 1}</Text>
</View>
<Text variant="small" className="flex-1">
{step}
</Text>
</View>
))}
</View>
</Mount>
<Mount delay={BLOCK_STAGGER * 3} className="mt-auto">
<View className="gap-2 pt-10">
<Button
size="lg"
loading={loading}
disabled={!canSubmit}
onPress={submit}
haptic="medium"
className="bg-[#65A30D] w-full"
>
Text me a code
</Button>
<Text variant="muted" className="text-center text-xs leading-relaxed">
Message and data rates may apply.
</Text>
{onUseEmail ? (
<Press
onPress={onUseEmail}
haptic="light"
pressedScale={0.97}
accessibilityRole="link"
accessibilityLabel="Verify with email instead"
hitSlop={8}
className="min-h-11 items-center justify-center px-2"
>
<Text className="text-[#65A30D] font-semibold">Use email instead</Text>
</Press>
) : null}
</View>
</Mount>
</ScrollView>
</KeyboardAvoiding>
</View>
</World>
);
}
PhoneVerificationScreen.displayName = "PhoneVerificationScreen";
```
Screen: https://lumioui.dev/screens/auth-phone-verification