Media, links and docs tabs for a chat
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, List, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, SEPARATOR_INSET, Press } from "../shared";
export interface ChatMediaScreenProps {
/** Grid photo URLs for the Media tab. */
photos?: string[];
links?: { id: string; title: string; url: string }[];
docs?: { id: string; name: string; meta: string }[];
onPhotoPress?: (index: number) => void;
onBack?: () => void;
}
const DEFAULT_PHOTOS = [
"photo-1544005313-94ddf0286df2",
"photo-1544441893-675973e31985",
"photo-1445205170230-053b83016050",
"photo-1434389677669-e08b4cac3105",
"photo-1523381210434-271e8be1f52b",
"photo-1441986300917-64674bd600d8",
"photo-1506126613408-eca07ce68773",
"photo-1509042239860-f550ce710b93",
"photo-1469334031218-e382a71b716b",
"photo-1473093295043-cdd812d0e601",
"photo-1513104890138-7c749659a591",
"photo-1508700115892-45ecd05ae2ad",
].map((id) => `https://images.unsplash.com/${id}?w=300&h=300&fit=crop&q=70&auto=format`);
const DEFAULT_LINKS = [
{ id: "l1", title: "Offsite venue shortlist", url: "airbnb.com/rooms/4821" },
{ id: "l2", title: "Q4 brand guidelines", url: "figma.com/file/brand-q4" },
{ id: "l3", title: "Flight options to Lisbon", url: "kayak.com/flights/lis" },
{ id: "l4", title: "Dinner reservation — Cervo", url: "resy.com/cervo-lisbon" },
{ id: "l5", title: "Tram 28 route map", url: "carris.pt/route/28" },
{ id: "l6", title: "Rooftop bar for Friday", url: "timeout.com/lisbon/rooftops" },
];
const DEFAULT_DOCS = [
{ id: "d1", name: "Offsite budget.fig", meta: "Figma · 2.4 MB" },
{ id: "d2", name: "Menu_v3.pdf", meta: "PDF · 380 KB" },
{ id: "d3", name: "Packing list.numbers", meta: "Numbers · 96 KB" },
{ id: "d4", name: "Itinerary draft.pages", meta: "Pages · 210 KB" },
{ id: "d5", name: "Splitwise export.csv", meta: "CSV · 12 KB" },
{ id: "d6", name: "Hotel confirmation.pdf", meta: "PDF · 148 KB" },
];
const img = (uri: string) => uri;
/** Shared-link rows carry the site's real favicon — the WhatsApp/Telegram
* "Links" tab idiom — instead of tinted icon tiles. */
const favicon = (url: string) =>
`https://www.google.com/s2/favicons?domain=${url.split("/")[0]}&sz=128`;
/** Doc rows get a flat neutral file glyph keyed by extension. */
const docIcon = (name: string): IconName => {
if (/\.(pdf)$/i.test(name)) return "file-text";
if (/\.(fig|sketch|pages|key)$/i.test(name)) return "file-text";
if (/\.(csv|numbers|xlsx?)$/i.test(name)) return "grid";
return "file-text";
};
/** Chat media — Media / Links / Docs tabs for a conversation. */
export function ChatMediaScreen({
photos = DEFAULT_PHOTOS,
links = DEFAULT_LINKS,
docs = DEFAULT_DOCS,
onPhotoPress,
onBack,
}: ChatMediaScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [tab, setTab] = React.useState("media");
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Segmented control — iOS idiom: gray track, white active
segment, ink label (not the tinted-tabs look). */}
<View className="px-4 pb-2" style={{ paddingTop: insets.top + 60 }}>
<Mount>
<View className="flex-row rounded-full bg-[#E8E9EE] p-1 dark:bg-[#1C1C22]">
{(["media", "links", "docs"] as const).map((t) => {
const active = tab === t;
return (
<Press
key={t}
haptic="light"
onPress={() => {
haptics.selection();
setTab(t);
}}
className={cn(
"h-9 flex-1 items-center justify-center rounded-full",
active && "bg-white dark:bg-[#2A2A33]"
)}
>
<Text
className={cn(
"text-sm font-semibold capitalize",
active ? "text-foreground" : "text-[#6B6B78]"
)}
>
{t}
</Text>
</Press>
);
})}
</View>
</Mount>
</View>
{/* Floating chrome — back pill + 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>
{/* Title pill hugs its label and centers on the whole row. */}
<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">
Media, links & docs
</Text>
</Glass>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingBottom: insets.bottom + 32,
paddingHorizontal: 4,
}}
>
{tab === "media" && (
<View className="flex-row flex-wrap">
{photos.map((uri, i) => (
<Mount key={uri} delay={Math.min(i * 30, 180)} className="w-1/3">
<Press
haptic="light"
onPress={() => onPhotoPress?.(i)}
accessibilityLabel={`Photo ${i + 1}`}
className="p-0.5"
>
<Image
source={{ uri: img(uri) }}
className="aspect-square w-full rounded-xl bg-muted"
accessibilityLabel={`Shared photo ${i + 1}`}
/>
</Press>
</Mount>
))}
</View>
)}
{tab === "links" && (
<List inset glass>
<List.Section>
{links.map((l, ii) => (
<React.Fragment key={l.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={l.title}
subtitle={l.url}
leading={
<Image
source={{ uri: favicon(l.url) }}
rounded="md"
className="h-9 w-9 bg-muted"
accessibilityElementsHidden
importantForAccessibility="no"
/>
}
showChevron
haptic="light"
onPress={() => haptics.light()}
/>
</React.Fragment>
))}
</List.Section>
</List>
)}
{tab === "docs" && (
<List inset glass>
<List.Section>
{docs.map((d, ii) => (
<React.Fragment key={d.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={d.name}
subtitle={d.meta}
leading={
<View className="h-9 w-9 items-center justify-center rounded-lg bg-muted">
<Icon
name={docIcon(d.name)}
size="sm"
color="mutedForeground"
/>
</View>
}
haptic="light"
onPress={() => haptics.light()}
/>
</React.Fragment>
))}
</List.Section>
</List>
)}
{/* Storage footer — WhatsApp shows the running total here. */}
<Text variant="muted" className="px-6 pt-4 text-center text-xs">
342 MB of media, links and docs shared in this chat
</Text>
</ScrollView>
</SafeAreaView>
);
}
ChatMediaScreen.displayName = "ChatMediaScreen";
Recreate the "Chat Media Screen" screen in React Native using LumioUI.
Goal: Media, links and docs tabs for a chat 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 chat-chat-media
```
Or pull just the components: `npx lumioui add button icon image list tabs 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
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×2
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×2
### `tabs` — Underline tabs with gliding indicator and press ink.
- imported but not rendered directly — likely used through a sibling or as a utility
### `text` — Themed type scale from caption to display.
- `<Text>` ×3
## 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/chat/chat-media.tsx` exporting ChatMediaScreen. 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, Image, List, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, SEPARATOR_INSET, Press } from "../shared";
export interface ChatMediaScreenProps {
/** Grid photo URLs for the Media tab. */
photos?: string[];
links?: { id: string; title: string; url: string }[];
docs?: { id: string; name: string; meta: string }[];
onPhotoPress?: (index: number) => void;
onBack?: () => void;
}
const DEFAULT_PHOTOS = [
"photo-1544005313-94ddf0286df2",
"photo-1544441893-675973e31985",
"photo-1445205170230-053b83016050",
"photo-1434389677669-e08b4cac3105",
"photo-1523381210434-271e8be1f52b",
"photo-1441986300917-64674bd600d8",
"photo-1506126613408-eca07ce68773",
"photo-1509042239860-f550ce710b93",
"photo-1469334031218-e382a71b716b",
"photo-1473093295043-cdd812d0e601",
"photo-1513104890138-7c749659a591",
"photo-1508700115892-45ecd05ae2ad",
].map((id) => `https://images.unsplash.com/${id}?w=300&h=300&fit=crop&q=70&auto=format`);
const DEFAULT_LINKS = [
{ id: "l1", title: "Offsite venue shortlist", url: "airbnb.com/rooms/4821" },
{ id: "l2", title: "Q4 brand guidelines", url: "figma.com/file/brand-q4" },
{ id: "l3", title: "Flight options to Lisbon", url: "kayak.com/flights/lis" },
{ id: "l4", title: "Dinner reservation — Cervo", url: "resy.com/cervo-lisbon" },
{ id: "l5", title: "Tram 28 route map", url: "carris.pt/route/28" },
{ id: "l6", title: "Rooftop bar for Friday", url: "timeout.com/lisbon/rooftops" },
];
const DEFAULT_DOCS = [
{ id: "d1", name: "Offsite budget.fig", meta: "Figma · 2.4 MB" },
{ id: "d2", name: "Menu_v3.pdf", meta: "PDF · 380 KB" },
{ id: "d3", name: "Packing list.numbers", meta: "Numbers · 96 KB" },
{ id: "d4", name: "Itinerary draft.pages", meta: "Pages · 210 KB" },
{ id: "d5", name: "Splitwise export.csv", meta: "CSV · 12 KB" },
{ id: "d6", name: "Hotel confirmation.pdf", meta: "PDF · 148 KB" },
];
const img = (uri: string) => uri;
/** Shared-link rows carry the site's real favicon — the WhatsApp/Telegram
* "Links" tab idiom — instead of tinted icon tiles. */
const favicon = (url: string) =>
`https://www.google.com/s2/favicons?domain=${url.split("/")[0]}&sz=128`;
/** Doc rows get a flat neutral file glyph keyed by extension. */
const docIcon = (name: string): IconName => {
if (/\.(pdf)$/i.test(name)) return "file-text";
if (/\.(fig|sketch|pages|key)$/i.test(name)) return "file-text";
if (/\.(csv|numbers|xlsx?)$/i.test(name)) return "grid";
return "file-text";
};
/** Chat media — Media / Links / Docs tabs for a conversation. */
export function ChatMediaScreen({
photos = DEFAULT_PHOTOS,
links = DEFAULT_LINKS,
docs = DEFAULT_DOCS,
onPhotoPress,
onBack,
}: ChatMediaScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [tab, setTab] = React.useState("media");
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Segmented control — iOS idiom: gray track, white active
segment, ink label (not the tinted-tabs look). */}
<View className="px-4 pb-2" style={{ paddingTop: insets.top + 60 }}>
<Mount>
<View className="flex-row rounded-full bg-[#E8E9EE] p-1 dark:bg-[#1C1C22]">
{(["media", "links", "docs"] as const).map((t) => {
const active = tab === t;
return (
<Press
key={t}
haptic="light"
onPress={() => {
haptics.selection();
setTab(t);
}}
className={cn(
"h-9 flex-1 items-center justify-center rounded-full",
active && "bg-white dark:bg-[#2A2A33]"
)}
>
<Text
className={cn(
"text-sm font-semibold capitalize",
active ? "text-foreground" : "text-[#6B6B78]"
)}
>
{t}
</Text>
</Press>
);
})}
</View>
</Mount>
</View>
{/* Floating chrome — back pill + 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>
{/* Title pill hugs its label and centers on the whole row. */}
<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">
Media, links & docs
</Text>
</Glass>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{
paddingBottom: insets.bottom + 32,
paddingHorizontal: 4,
}}
>
{tab === "media" && (
<View className="flex-row flex-wrap">
{photos.map((uri, i) => (
<Mount key={uri} delay={Math.min(i * 30, 180)} className="w-1/3">
<Press
haptic="light"
onPress={() => onPhotoPress?.(i)}
accessibilityLabel={`Photo ${i + 1}`}
className="p-0.5"
>
<Image
source={{ uri: img(uri) }}
className="aspect-square w-full rounded-xl bg-muted"
accessibilityLabel={`Shared photo ${i + 1}`}
/>
</Press>
</Mount>
))}
</View>
)}
{tab === "links" && (
<List inset glass>
<List.Section>
{links.map((l, ii) => (
<React.Fragment key={l.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={l.title}
subtitle={l.url}
leading={
<Image
source={{ uri: favicon(l.url) }}
rounded="md"
className="h-9 w-9 bg-muted"
accessibilityElementsHidden
importantForAccessibility="no"
/>
}
showChevron
haptic="light"
onPress={() => haptics.light()}
/>
</React.Fragment>
))}
</List.Section>
</List>
)}
{tab === "docs" && (
<List inset glass>
<List.Section>
{docs.map((d, ii) => (
<React.Fragment key={d.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={d.name}
subtitle={d.meta}
leading={
<View className="h-9 w-9 items-center justify-center rounded-lg bg-muted">
<Icon
name={docIcon(d.name)}
size="sm"
color="mutedForeground"
/>
</View>
}
haptic="light"
onPress={() => haptics.light()}
/>
</React.Fragment>
))}
</List.Section>
</List>
)}
{/* Storage footer — WhatsApp shows the running total here. */}
<Text variant="muted" className="px-6 pt-4 text-center text-xs">
342 MB of media, links and docs shared in this chat
</Text>
</ScrollView>
</SafeAreaView>
);
}
ChatMediaScreen.displayName = "ChatMediaScreen";
```
Screen: https://lumioui.dev/screens/chat-chat-media