Offline error page: icon, message, and a retry that recovers
import * as React from "react";
import { useState } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Loader, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, PulseRing, RowIcon } from "../shared";
/** What still works while the connection is down — a real error screen
* doesn't dead-end (District's offline state keeps the next event
* visible under the retry). */
const OFFLINE_ITEMS = [
{ icon: "download", title: "Saved for offline", sub: "12 items — reading-ready" },
{ icon: "clock", title: "Last synced", sub: "Today at 9:41 AM" },
] as const;
export interface ErrorStateScreenProps {
icon?: IconName;
title?: string;
message?: string;
/** What retry does — real apps retry; the demo flips to a success state. */
onRetry?: () => void;
onBack?: () => void;
}
/** Error state — connection/server error page (PageFlows "Error" idiom):
* bare accent glyph, one sentence, and a working Retry that spins then
* lands on a recovered state. Keep it to one element + one action. */
export function ErrorStateScreen({
icon = "wifi",
title = "You're offline",
message = "Check your connection and we'll pick up right where you left off.",
onRetry,
onBack,
}: ErrorStateScreenProps) {
const haptics = useHaptic();
const [phase, setPhase] = useState<"error" | "retrying" | "recovered">("error");
const retry = () => {
haptics.light();
setPhase("retrying");
onRetry?.();
// Fake reconnect beat — enough time to feel the spinner work.
setTimeout(() => setPhase("recovered"), 1200);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
{/* Error block sits high — the bottom third carries what still works
offline instead of dead space. */}
<View className="flex-1 items-center justify-center gap-4 px-10 pt-8">
{phase === "recovered" ? (
<>
<Mount className="items-center">
<View className="h-24 w-24 items-center justify-center rounded-full bg-success">
<Icon name="check" size="xl" color="primaryForeground" />
</View>
</Mount>
<Mount delay={60} className="items-center gap-4">
<Text variant="h2" className="text-center">
Back online
</Text>
<Text variant="muted" className="text-center">
Everything's synced — you're all caught up.
</Text>
<Button
variant="secondary"
onPress={() => setPhase("error")}
accessibilityLabel="Show error state again"
>
Show error again
</Button>
</Mount>
</>
) : (
<>
<Mount className="items-center">
{/* Dead-signal motif — concentric rings collapsing into the
muted glyph, like a broadcast that stopped. */}
<View className="h-32 w-32 items-center justify-center rounded-full border border-dashed border-muted-foreground/30">
<PulseRing color="#BEF04C" size={120} />
<View className="h-24 w-24 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]">
<Icon name={icon} size="xl" color="#E8862D" />
</View>
</View>
</Mount>
<Mount delay={60} className="items-center gap-4">
<Text variant="h2" className="text-center">
{title}
</Text>
<Text variant="muted" className="text-center leading-6">
{message}
</Text>
<Button
size="lg"
disabled={phase === "retrying"}
onPress={retry}
accessibilityLabel="Try again"
className="mt-2 min-w-40 bg-[#BEF04C]"
textClassName="text-[#1B1B26]"
>
{phase === "retrying" ? (
<View className="flex-row items-center gap-2">
<Loader variant="spinner" />
<Text className="font-semibold text-[#1B1B26]">Retrying…</Text>
</View>
) : (
"Try again"
)}
</Button>
{onBack ? (
<Button variant="ghost" onPress={onBack} accessibilityLabel="Go back">
Go back
</Button>
) : null}
{/* Support handle — real error pages carry a reference code so
support can find the failure. */}
<Text variant="muted" className="pt-3 font-mono text-[10px] tracking-wider">
REF NET-8841 · {new Date().toISOString().slice(0, 16).replace("T", " ")}Z
</Text>
</Mount>
{/* Offline shelf — what the app still has while disconnected. */}
<Mount delay={140} className="w-full gap-2 pt-4">
<Text className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
Still here
</Text>
{OFFLINE_ITEMS.map((it) => (
<View
key={it.title}
className="flex-row items-center gap-3 rounded-2xl bg-white p-3 dark:bg-[#1A1A20]"
>
<RowIcon name={it.icon} tone="gray" />
<View className="flex-1">
<Text className="text-sm font-semibold">{it.title}</Text>
<Text className="text-xs text-muted-foreground">{it.sub}</Text>
</View>
</View>
))}
</Mount>
</>
)}
</View>
</SafeAreaView>
);
}
ErrorStateScreen.displayName = "ErrorStateScreen";
Recreate the "Error State Screen" screen in React Native using LumioUI.
Goal: Offline error page: icon, message, and a retry that recovers 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-error-state
```
Or pull just the components: `npx lumioui add button icon loader 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>` ×3
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `loader` — Spinner, dots, bars, pulse, ring and metaball loaders that respect reduced motion.
- `<Loader>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×9
## 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/error-state.tsx` exporting ErrorStateScreen. 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 { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Loader, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, PulseRing, RowIcon } from "../shared";
/** What still works while the connection is down — a real error screen
* doesn't dead-end (District's offline state keeps the next event
* visible under the retry). */
const OFFLINE_ITEMS = [
{ icon: "download", title: "Saved for offline", sub: "12 items — reading-ready" },
{ icon: "clock", title: "Last synced", sub: "Today at 9:41 AM" },
] as const;
export interface ErrorStateScreenProps {
icon?: IconName;
title?: string;
message?: string;
/** What retry does — real apps retry; the demo flips to a success state. */
onRetry?: () => void;
onBack?: () => void;
}
/** Error state — connection/server error page (PageFlows "Error" idiom):
* bare accent glyph, one sentence, and a working Retry that spins then
* lands on a recovered state. Keep it to one element + one action. */
export function ErrorStateScreen({
icon = "wifi",
title = "You're offline",
message = "Check your connection and we'll pick up right where you left off.",
onRetry,
onBack,
}: ErrorStateScreenProps) {
const haptics = useHaptic();
const [phase, setPhase] = useState<"error" | "retrying" | "recovered">("error");
const retry = () => {
haptics.light();
setPhase("retrying");
onRetry?.();
// Fake reconnect beat — enough time to feel the spinner work.
setTimeout(() => setPhase("recovered"), 1200);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
{/* Error block sits high — the bottom third carries what still works
offline instead of dead space. */}
<View className="flex-1 items-center justify-center gap-4 px-10 pt-8">
{phase === "recovered" ? (
<>
<Mount className="items-center">
<View className="h-24 w-24 items-center justify-center rounded-full bg-success">
<Icon name="check" size="xl" color="primaryForeground" />
</View>
</Mount>
<Mount delay={60} className="items-center gap-4">
<Text variant="h2" className="text-center">
Back online
</Text>
<Text variant="muted" className="text-center">
Everything's synced — you're all caught up.
</Text>
<Button
variant="secondary"
onPress={() => setPhase("error")}
accessibilityLabel="Show error state again"
>
Show error again
</Button>
</Mount>
</>
) : (
<>
<Mount className="items-center">
{/* Dead-signal motif — concentric rings collapsing into the
muted glyph, like a broadcast that stopped. */}
<View className="h-32 w-32 items-center justify-center rounded-full border border-dashed border-muted-foreground/30">
<PulseRing color="#BEF04C" size={120} />
<View className="h-24 w-24 items-center justify-center rounded-full bg-white dark:bg-[#1A1A20]">
<Icon name={icon} size="xl" color="#E8862D" />
</View>
</View>
</Mount>
<Mount delay={60} className="items-center gap-4">
<Text variant="h2" className="text-center">
{title}
</Text>
<Text variant="muted" className="text-center leading-6">
{message}
</Text>
<Button
size="lg"
disabled={phase === "retrying"}
onPress={retry}
accessibilityLabel="Try again"
className="mt-2 min-w-40 bg-[#BEF04C]"
textClassName="text-[#1B1B26]"
>
{phase === "retrying" ? (
<View className="flex-row items-center gap-2">
<Loader variant="spinner" />
<Text className="font-semibold text-[#1B1B26]">Retrying…</Text>
</View>
) : (
"Try again"
)}
</Button>
{onBack ? (
<Button variant="ghost" onPress={onBack} accessibilityLabel="Go back">
Go back
</Button>
) : null}
{/* Support handle — real error pages carry a reference code so
support can find the failure. */}
<Text variant="muted" className="pt-3 font-mono text-[10px] tracking-wider">
REF NET-8841 · {new Date().toISOString().slice(0, 16).replace("T", " ")}Z
</Text>
</Mount>
{/* Offline shelf — what the app still has while disconnected. */}
<Mount delay={140} className="w-full gap-2 pt-4">
<Text className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
Still here
</Text>
{OFFLINE_ITEMS.map((it) => (
<View
key={it.title}
className="flex-row items-center gap-3 rounded-2xl bg-white p-3 dark:bg-[#1A1A20]"
>
<RowIcon name={it.icon} tone="gray" />
<View className="flex-1">
<Text className="text-sm font-semibold">{it.title}</Text>
<Text className="text-xs text-muted-foreground">{it.sub}</Text>
</View>
</View>
))}
</Mount>
</>
)}
</View>
</SafeAreaView>
);
}
ErrorStateScreen.displayName = "ErrorStateScreen";
```
Screen: https://lumioui.dev/screens/core-error-state