Language radio list plus region, temperature, and calendar preferences.
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, RowIcon } from "../shared";
export interface Language {
code: string;
label: string;
/** Endonym — the language written in itself, e.g. "Español". */
nativeName: string;
}
export interface LanguageRegionScreenProps {
languages?: Language[];
selected?: string;
onSelect?: (code: string) => void;
region?: string;
onRegionPress?: () => void;
onBack?: () => void;
}
/** Script glyph discs — each language carries its own letterform as identity. */
const LANG_GLYPH: Record<string, { glyph: string; bg: string; fg: string }> = {
en: { glyph: "Aa", bg: "bg-blue-500/15", fg: "#3B82F6" },
es: { glyph: "Ñ", bg: "bg-orange-500/15", fg: "#F97316" },
fr: { glyph: "Ç", bg: "bg-indigo-500/15", fg: "#6366F1" },
de: { glyph: "Ä", bg: "bg-amber-500/15", fg: "#D97706" },
ja: { glyph: "あ", bg: "bg-rose-500/15", fg: "#F43F5E" },
pt: { glyph: "Ã", bg: "bg-emerald-500/15", fg: "#10B981" },
hi: { glyph: "अ", bg: "bg-violet-500/15", fg: "#8B5CF6" },
};
/** Greeting in each language's own voice — the hero's personality. */
const LANG_GREETING: Record<string, string> = {
en: "Hello",
es: "¡Hola!",
fr: "Bonjour",
de: "Hallo",
ja: "こんにちは",
pt: "Olá",
hi: "नमस्ते",
};
const DEFAULT_LANGUAGES: Language[] = [
{ code: "en", label: "English", nativeName: "English" },
{ code: "es", label: "Spanish", nativeName: "Español" },
{ code: "fr", label: "French", nativeName: "Français" },
{ code: "de", label: "German", nativeName: "Deutsch" },
{ code: "ja", label: "Japanese", nativeName: "日本語" },
{ code: "pt", label: "Portuguese", nativeName: "Português" },
{ code: "hi", label: "Hindi", nativeName: "हिन्दी" },
];
/** Language & region — radio list with check indicator (iOS language picker). */
export function LanguageRegionScreen({
languages = DEFAULT_LANGUAGES,
selected = "en",
onSelect,
region = "United States",
onRegionPress,
onBack,
}: LanguageRegionScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [active, setActive] = React.useState(selected);
React.useEffect(() => setActive(selected), [selected]);
const pick = (code: string) => () => {
haptics.selection();
setActive(code);
onSelect?.(code);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back pill + hug-label title pill. */}
<View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
<View className="flex-row items-center gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-5"
>
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Language
</Text>
</Glass>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
>
{/* Current locale hero — the active language in its own script at
display size, so the choice is visible before the picker. */}
<Mount>
{(() => {
const current =
languages.find((l) => l.code === active) ?? languages[0];
const glyph = current ? LANG_GLYPH[current.code] : undefined;
return current ? (
<View className="mx-6 mb-4 gap-4 rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center gap-4">
<View
className={`h-14 w-14 items-center justify-center rounded-2xl ${glyph?.bg ?? "bg-secondary"}`}
>
<Text
className="text-2xl font-bold"
style={{ color: glyph?.fg }}
>
{glyph?.glyph ?? current.code.slice(0, 2).toUpperCase()}
</Text>
</View>
<View className="flex-1">
<Text className="text-lg font-semibold tracking-tight">
{current.nativeName}
</Text>
<Text variant="muted" className="text-sm">
{current.label === current.nativeName ? region : `${current.label} · ${region}`}
</Text>
</View>
</View>
{/* Greeting marquee — every language says hello in its own
voice; tap one to switch. The active one sits in lime. */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
className="grow-0"
contentContainerClassName="gap-2"
>
{languages.map((l) => {
const g = LANG_GLYPH[l.code];
const isActive = l.code === active;
return (
<Press
key={l.code}
haptic="light"
pressedScale={0.94}
onPress={pick(l.code)}
accessibilityRole="button"
accessibilityLabel={`Switch to ${l.nativeName}`}
accessibilityState={{ selected: isActive }}
className={`flex-row items-center gap-1.5 rounded-full px-3.5 py-2 ${
isActive ? "bg-[#BEF04C]" : (g?.bg ?? "bg-secondary")
}`}
>
<Text
className={`text-sm font-bold ${isActive ? "text-[#1B1B26]" : ""}`}
style={isActive ? undefined : { color: g?.fg }}
>
{LANG_GREETING[l.code] ?? l.nativeName}
</Text>
</Press>
);
})}
</ScrollView>
</View>
) : null;
})()}
</Mount>
<Mount delay={60}>
<List inset glass>
<List.Section title="App language">
{languages.map((lang, ii) => (
<React.Fragment key={lang.code}>
{ii > 0 && <List.Separator inset="icon" />}
<List.Item
title={lang.nativeName}
subtitle={lang.label === lang.nativeName ? undefined : lang.label}
leading={
<View
className={`h-9 w-9 items-center justify-center rounded-xl ${LANG_GLYPH[lang.code]?.bg ?? "bg-secondary"}`}
>
<Text
className="text-[13px] font-bold"
style={{ color: LANG_GLYPH[lang.code]?.fg }}
>
{LANG_GLYPH[lang.code]?.glyph ??
lang.code.slice(0, 2).toUpperCase()}
</Text>
</View>
}
haptic="selection"
onPress={pick(lang.code)}
accessibilityRole="radio"
accessibilityState={{ selected: active === lang.code }}
trailing={
active === lang.code ? (
<View className="h-5 w-5 items-center justify-center rounded-full bg-[#BEF04C]">
<Icon name="check" size="sm" color="#1B1B26" />
</View>
) : undefined
}
/>
</React.Fragment>
))}
</List.Section>
<List.Section title="Region">
<List.Item
title="Region"
leading={<RowIcon name="globe" tone="blue" />}
trailing={
<View className="flex-row items-center gap-1">
<Text variant="small" className="text-muted-foreground">
{region}
</Text>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</View>
}
haptic="light"
onPress={onRegionPress}
/>
<List.Separator inset="icon" />
<List.Item
title="Temperature"
leading={<RowIcon name="flame" tone="orange" />}
trailing={
<Text variant="small" className="text-muted-foreground">
Fahrenheit
</Text>
}
haptic="light"
onPress={onRegionPress}
/>
<List.Separator inset="icon" />
<List.Item
title="Calendar"
leading={<RowIcon name="calendar" tone="teal" />}
trailing={
<Text variant="small" className="text-muted-foreground">
Gregorian
</Text>
}
haptic="light"
onPress={onRegionPress}
/>
</List.Section>
</List>
{/* Format preview — region picks change real output; show it. */}
<View className="mx-6 mt-2 overflow-hidden rounded-2xl px-4 py-3">
<Glass interactive effect="clear" sheen={0.45} className="absolute inset-0 rounded-2xl" pointerEvents="none" />
<Text variant="small" className="font-medium uppercase tracking-widest text-muted-foreground">
Preview
</Text>
<Text className="pt-1 text-sm tabular-nums">
Friday, Sep 26, 2026 · 1,234.56 · 14:30
</Text>
</View>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
LanguageRegionScreen.displayName = "LanguageRegionScreen";
Recreate the "Language & region Screen" screen in React Native using LumioUI.
Goal: Language radio list plus region, temperature, and calendar preferences. 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 core-language-region
```
Or pull just the components: `npx lumioui add button icon list 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>` ×3
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×11
## 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/core/language-region.tsx` exporting LanguageRegionScreen. 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, List, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, RowIcon } from "../shared";
export interface Language {
code: string;
label: string;
/** Endonym — the language written in itself, e.g. "Español". */
nativeName: string;
}
export interface LanguageRegionScreenProps {
languages?: Language[];
selected?: string;
onSelect?: (code: string) => void;
region?: string;
onRegionPress?: () => void;
onBack?: () => void;
}
/** Script glyph discs — each language carries its own letterform as identity. */
const LANG_GLYPH: Record<string, { glyph: string; bg: string; fg: string }> = {
en: { glyph: "Aa", bg: "bg-blue-500/15", fg: "#3B82F6" },
es: { glyph: "Ñ", bg: "bg-orange-500/15", fg: "#F97316" },
fr: { glyph: "Ç", bg: "bg-indigo-500/15", fg: "#6366F1" },
de: { glyph: "Ä", bg: "bg-amber-500/15", fg: "#D97706" },
ja: { glyph: "あ", bg: "bg-rose-500/15", fg: "#F43F5E" },
pt: { glyph: "Ã", bg: "bg-emerald-500/15", fg: "#10B981" },
hi: { glyph: "अ", bg: "bg-violet-500/15", fg: "#8B5CF6" },
};
/** Greeting in each language's own voice — the hero's personality. */
const LANG_GREETING: Record<string, string> = {
en: "Hello",
es: "¡Hola!",
fr: "Bonjour",
de: "Hallo",
ja: "こんにちは",
pt: "Olá",
hi: "नमस्ते",
};
const DEFAULT_LANGUAGES: Language[] = [
{ code: "en", label: "English", nativeName: "English" },
{ code: "es", label: "Spanish", nativeName: "Español" },
{ code: "fr", label: "French", nativeName: "Français" },
{ code: "de", label: "German", nativeName: "Deutsch" },
{ code: "ja", label: "Japanese", nativeName: "日本語" },
{ code: "pt", label: "Portuguese", nativeName: "Português" },
{ code: "hi", label: "Hindi", nativeName: "हिन्दी" },
];
/** Language & region — radio list with check indicator (iOS language picker). */
export function LanguageRegionScreen({
languages = DEFAULT_LANGUAGES,
selected = "en",
onSelect,
region = "United States",
onRegionPress,
onBack,
}: LanguageRegionScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [active, setActive] = React.useState(selected);
React.useEffect(() => setActive(selected), [selected]);
const pick = (code: string) => () => {
haptics.selection();
setActive(code);
onSelect?.(code);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back pill + hug-label title pill. */}
<View className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }} pointerEvents="box-none">
<View className="flex-row items-center gap-2">
<Glass
effect="regular"
className="h-11 w-11 items-center justify-center rounded-full"
>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-9 w-9"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<Glass
effect="regular"
className="h-11 flex-row items-center justify-center rounded-full px-5"
>
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Language
</Text>
</Glass>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 32 }}
>
{/* Current locale hero — the active language in its own script at
display size, so the choice is visible before the picker. */}
<Mount>
{(() => {
const current =
languages.find((l) => l.code === active) ?? languages[0];
const glyph = current ? LANG_GLYPH[current.code] : undefined;
return current ? (
<View className="mx-6 mb-4 gap-4 rounded-3xl bg-white p-5 dark:bg-[#1A1A20]">
<View className="flex-row items-center gap-4">
<View
className={`h-14 w-14 items-center justify-center rounded-2xl ${glyph?.bg ?? "bg-secondary"}`}
>
<Text
className="text-2xl font-bold"
style={{ color: glyph?.fg }}
>
{glyph?.glyph ?? current.code.slice(0, 2).toUpperCase()}
</Text>
</View>
<View className="flex-1">
<Text className="text-lg font-semibold tracking-tight">
{current.nativeName}
</Text>
<Text variant="muted" className="text-sm">
{current.label === current.nativeName ? region : `${current.label} · ${region}`}
</Text>
</View>
</View>
{/* Greeting marquee — every language says hello in its own
voice; tap one to switch. The active one sits in lime. */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
className="grow-0"
contentContainerClassName="gap-2"
>
{languages.map((l) => {
const g = LANG_GLYPH[l.code];
const isActive = l.code === active;
return (
<Press
key={l.code}
haptic="light"
pressedScale={0.94}
onPress={pick(l.code)}
accessibilityRole="button"
accessibilityLabel={`Switch to ${l.nativeName}`}
accessibilityState={{ selected: isActive }}
className={`flex-row items-center gap-1.5 rounded-full px-3.5 py-2 ${
isActive ? "bg-[#BEF04C]" : (g?.bg ?? "bg-secondary")
}`}
>
<Text
className={`text-sm font-bold ${isActive ? "text-[#1B1B26]" : ""}`}
style={isActive ? undefined : { color: g?.fg }}
>
{LANG_GREETING[l.code] ?? l.nativeName}
</Text>
</Press>
);
})}
</ScrollView>
</View>
) : null;
})()}
</Mount>
<Mount delay={60}>
<List inset glass>
<List.Section title="App language">
{languages.map((lang, ii) => (
<React.Fragment key={lang.code}>
{ii > 0 && <List.Separator inset="icon" />}
<List.Item
title={lang.nativeName}
subtitle={lang.label === lang.nativeName ? undefined : lang.label}
leading={
<View
className={`h-9 w-9 items-center justify-center rounded-xl ${LANG_GLYPH[lang.code]?.bg ?? "bg-secondary"}`}
>
<Text
className="text-[13px] font-bold"
style={{ color: LANG_GLYPH[lang.code]?.fg }}
>
{LANG_GLYPH[lang.code]?.glyph ??
lang.code.slice(0, 2).toUpperCase()}
</Text>
</View>
}
haptic="selection"
onPress={pick(lang.code)}
accessibilityRole="radio"
accessibilityState={{ selected: active === lang.code }}
trailing={
active === lang.code ? (
<View className="h-5 w-5 items-center justify-center rounded-full bg-[#BEF04C]">
<Icon name="check" size="sm" color="#1B1B26" />
</View>
) : undefined
}
/>
</React.Fragment>
))}
</List.Section>
<List.Section title="Region">
<List.Item
title="Region"
leading={<RowIcon name="globe" tone="blue" />}
trailing={
<View className="flex-row items-center gap-1">
<Text variant="small" className="text-muted-foreground">
{region}
</Text>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</View>
}
haptic="light"
onPress={onRegionPress}
/>
<List.Separator inset="icon" />
<List.Item
title="Temperature"
leading={<RowIcon name="flame" tone="orange" />}
trailing={
<Text variant="small" className="text-muted-foreground">
Fahrenheit
</Text>
}
haptic="light"
onPress={onRegionPress}
/>
<List.Separator inset="icon" />
<List.Item
title="Calendar"
leading={<RowIcon name="calendar" tone="teal" />}
trailing={
<Text variant="small" className="text-muted-foreground">
Gregorian
</Text>
}
haptic="light"
onPress={onRegionPress}
/>
</List.Section>
</List>
{/* Format preview — region picks change real output; show it. */}
<View className="mx-6 mt-2 overflow-hidden rounded-2xl px-4 py-3">
<Glass interactive effect="clear" sheen={0.45} className="absolute inset-0 rounded-2xl" pointerEvents="none" />
<Text variant="small" className="font-medium uppercase tracking-widest text-muted-foreground">
Preview
</Text>
<Text className="pt-1 text-sm tabular-nums">
Friday, Sep 26, 2026 · 1,234.56 · 14:30
</Text>
</View>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
LanguageRegionScreen.displayName = "LanguageRegionScreen";
```
Screen: https://lumioui.dev/screens/core-language-region