Camera viewfinder with mode rail and shutter
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, Press, World } from "../shared";
export interface CameraScreenProps {
/** Viewfinder stand-in — a real photo where the sensor feed would be. */
frameUrl?: string;
modes?: string[];
/** Last shot, shown in the bottom-left thumbnail. */
lastShotUrl?: string;
onCapture?: () => void;
onModeChange?: (mode: string) => void;
onFlip?: () => void;
onLibrary?: () => void;
onBack?: () => void;
}
/** Camera — viewfinder frame, mode rail, shutter, library + flip. */
export function CameraScreen({
frameUrl = "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&h=1400&fit=crop&q=70&auto=format",
modes = ["SLO-MO", "VIDEO", "PHOTO", "PORTRAIT", "PANO"],
lastShotUrl = "https://images.unsplash.com/photo-1544441893-675973e31985?w=200&h=200&fit=crop&q=60&auto=format",
onCapture,
onModeChange,
onFlip,
onLibrary,
onBack,
}: CameraScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [mode, setMode] = React.useState("PHOTO");
return (
<World primary="#BEF04C">
<SafeAreaView className="flex-1 bg-black" edges={["top", "bottom"]}>
<GlowSpot color="#FFFFFF" size={240} className="-top-20 right-[-60px] opacity-20" />
<GlowSpot color="#BEF04C" size={200} className="bottom-[15%] left-[-90px] opacity-25" />
{/* Viewfinder. */}
<Image
source={{ uri: frameUrl }}
className="absolute inset-0 h-full w-full"
accessibilityLabel="Camera viewfinder"
/>
{/* Top chrome — liquid-glass discs over the viewfinder (iOS 26
camera chrome; frosted fallback elsewhere). */}
<View className="flex-row items-center justify-between px-4 pt-2">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Close camera"
className="h-10 w-10"
>
<Icon name="x" size="md" color="primaryForeground" />
</Button>
</Glass>
{/* Format pill — real camera chrome carries capture settings. */}
<Glass interactive effect="regular" className="rounded-full">
<View className="flex-row items-center gap-1 px-3 py-1.5">
<Text className="text-[10px] font-semibold text-white">
RAW · MAX
</Text>
</View>
</Glass>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Flash"
className="h-10 w-10"
>
<Icon name="zap" size="sm" color="primaryForeground" />
</Button>
</Glass>
</View>
{/* Bottom stack — mode rail, then shutter row. */}
<View
className="absolute inset-x-0 bottom-0"
style={{ paddingBottom: insets.bottom + 16 }}
>
{/* Mode rail — active mode yellow like iOS Camera. */}
<Mount className="flex-row items-center justify-center gap-6 pb-5">
{modes.map((m) => (
<Button
key={m}
variant="ghost"
haptic="light"
onPress={() => {
haptics.selection();
setMode(m);
onModeChange?.(m);
}}
accessibilityLabel={`${m} mode`}
accessibilityState={{ selected: m === mode }}
className="h-8 px-1"
>
<Text
className={`text-xs font-semibold tracking-wide ${
m === mode ? "text-warning" : "text-white/70"
}`}
>
{m}
</Text>
</Button>
))}
</Mount>
{/* Shutter row — library thumb / shutter ring / flip. */}
<Mount delay={60} className="flex-row items-center justify-between px-8">
<Press
haptic="light"
onPress={() => onLibrary?.()}
accessibilityLabel="Open photo library"
className="h-12 w-12 overflow-hidden rounded-lg p-0"
>
<Image
source={{ uri: lastShotUrl }}
className="h-12 w-12 rounded-lg"
accessibilityLabel="Last photo"
/>
</Press>
{/* Shutter — white ring with inner disc. */}
<Button
variant="ghost"
haptic="medium"
onPress={() => {
haptics.medium();
onCapture?.();
}}
accessibilityLabel="Take photo"
className="h-20 w-20 items-center justify-center rounded-full border-4 border-white bg-transparent p-0"
>
<View className="h-16 w-16 rounded-full bg-white" />
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onFlip?.()}
accessibilityLabel="Flip camera"
className="h-12 w-12"
>
<Icon name="refresh" size="md" color="primaryForeground" />
</Button>
</Glass>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
CameraScreen.displayName = "CameraScreen";
Recreate the "Camera Screen" screen in React Native using LumioUI.
Goal: Camera viewfinder with mode rail and shutter 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 media-camera-screen
```
Or pull just the components: `npx lumioui add button glass icon image 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>` ×5
### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- `<Glass>` ×4
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×3
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×2 — Viewfinder.
### `text` — Themed type scale from caption to display.
- `<Text>` ×2
## 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/media/camera-screen.tsx` exporting CameraScreen. 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 } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, Press, World } from "../shared";
export interface CameraScreenProps {
/** Viewfinder stand-in — a real photo where the sensor feed would be. */
frameUrl?: string;
modes?: string[];
/** Last shot, shown in the bottom-left thumbnail. */
lastShotUrl?: string;
onCapture?: () => void;
onModeChange?: (mode: string) => void;
onFlip?: () => void;
onLibrary?: () => void;
onBack?: () => void;
}
/** Camera — viewfinder frame, mode rail, shutter, library + flip. */
export function CameraScreen({
frameUrl = "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&h=1400&fit=crop&q=70&auto=format",
modes = ["SLO-MO", "VIDEO", "PHOTO", "PORTRAIT", "PANO"],
lastShotUrl = "https://images.unsplash.com/photo-1544441893-675973e31985?w=200&h=200&fit=crop&q=60&auto=format",
onCapture,
onModeChange,
onFlip,
onLibrary,
onBack,
}: CameraScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [mode, setMode] = React.useState("PHOTO");
return (
<World primary="#BEF04C">
<SafeAreaView className="flex-1 bg-black" edges={["top", "bottom"]}>
<GlowSpot color="#FFFFFF" size={240} className="-top-20 right-[-60px] opacity-20" />
<GlowSpot color="#BEF04C" size={200} className="bottom-[15%] left-[-90px] opacity-25" />
{/* Viewfinder. */}
<Image
source={{ uri: frameUrl }}
className="absolute inset-0 h-full w-full"
accessibilityLabel="Camera viewfinder"
/>
{/* Top chrome — liquid-glass discs over the viewfinder (iOS 26
camera chrome; frosted fallback elsewhere). */}
<View className="flex-row items-center justify-between px-4 pt-2">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Close camera"
className="h-10 w-10"
>
<Icon name="x" size="md" color="primaryForeground" />
</Button>
</Glass>
{/* Format pill — real camera chrome carries capture settings. */}
<Glass interactive effect="regular" className="rounded-full">
<View className="flex-row items-center gap-1 px-3 py-1.5">
<Text className="text-[10px] font-semibold text-white">
RAW · MAX
</Text>
</View>
</Glass>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Flash"
className="h-10 w-10"
>
<Icon name="zap" size="sm" color="primaryForeground" />
</Button>
</Glass>
</View>
{/* Bottom stack — mode rail, then shutter row. */}
<View
className="absolute inset-x-0 bottom-0"
style={{ paddingBottom: insets.bottom + 16 }}
>
{/* Mode rail — active mode yellow like iOS Camera. */}
<Mount className="flex-row items-center justify-center gap-6 pb-5">
{modes.map((m) => (
<Button
key={m}
variant="ghost"
haptic="light"
onPress={() => {
haptics.selection();
setMode(m);
onModeChange?.(m);
}}
accessibilityLabel={`${m} mode`}
accessibilityState={{ selected: m === mode }}
className="h-8 px-1"
>
<Text
className={`text-xs font-semibold tracking-wide ${
m === mode ? "text-warning" : "text-white/70"
}`}
>
{m}
</Text>
</Button>
))}
</Mount>
{/* Shutter row — library thumb / shutter ring / flip. */}
<Mount delay={60} className="flex-row items-center justify-between px-8">
<Press
haptic="light"
onPress={() => onLibrary?.()}
accessibilityLabel="Open photo library"
className="h-12 w-12 overflow-hidden rounded-lg p-0"
>
<Image
source={{ uri: lastShotUrl }}
className="h-12 w-12 rounded-lg"
accessibilityLabel="Last photo"
/>
</Press>
{/* Shutter — white ring with inner disc. */}
<Button
variant="ghost"
haptic="medium"
onPress={() => {
haptics.medium();
onCapture?.();
}}
accessibilityLabel="Take photo"
className="h-20 w-20 items-center justify-center rounded-full border-4 border-white bg-transparent p-0"
>
<View className="h-16 w-16 rounded-full bg-white" />
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onFlip?.()}
accessibilityLabel="Flip camera"
className="h-12 w-12"
>
<Icon name="refresh" size="md" color="primaryForeground" />
</Button>
</Glass>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
CameraScreen.displayName = "CameraScreen";
```
Screen: https://lumioui.dev/screens/media-camera-screen