Photo post with comments
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Button, Glass, Icon, Image, Input, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, CanvasFade, Mount, Press, StickyBottomBar, World } from "../shared";
export interface PostComment {
id: string;
author: string;
avatarUrl: string;
text: string;
likes: string;
time: string;
}
export interface PostDetailScreenProps {
author?: string;
handle?: string;
avatarUrl?: string;
time?: string;
photoUrl?: string;
caption?: string;
likes?: string;
comments?: PostComment[];
onProfile?: () => void;
onBack?: () => void;
}
const DEFAULT_COMMENTS: PostComment[] = [
{
id: "c1",
author: "Noah Reyes",
avatarUrl: "https://i.pravatar.cc/150?img=13",
text: "The light in this is unreal. What film?",
likes: "12",
time: "1h",
},
{
id: "c2",
author: "Priya Nair",
avatarUrl: "https://i.pravatar.cc/150?img=32",
text: "Tagged this to my Lisbon folder",
likes: "4",
time: "3h",
},
{
id: "c3",
author: "Milo Park",
avatarUrl: "https://i.pravatar.cc/150?img=15",
text: "Same spot, same hour — you got the better sky",
likes: "8",
time: "4h",
},
{
id: "c4",
author: "Elena Ruiz",
avatarUrl: "https://i.pravatar.cc/150?img=24",
text: "Post the carousel — the second frame is even better",
likes: "2",
time: "6h",
},
{
id: "c5",
author: "Diego Ruiz",
avatarUrl: "https://i.pravatar.cc/150?img=53",
text: "Save me a seat on the next shoot",
likes: "1",
time: "8h",
},
];
/** Post detail — author row, full photo, action rail, caption, comments. */
export function PostDetailScreen({
author = "Amara Chen",
handle = "@amara.makes",
avatarUrl = "https://i.pravatar.cc/300?img=47",
time = "2h",
photoUrl = "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=800&fit=crop&q=75&auto=format",
caption = "Golden hour on the Douro — Porto keeps winning.",
likes = "2,314",
comments = DEFAULT_COMMENTS,
onProfile,
onBack,
}: PostDetailScreenProps) {
const haptics = useHaptic();
const [liked, setLiked] = React.useState(false);
const [saved, setSaved] = React.useState(false);
const [draft, setDraft] = React.useState("");
const [composerH, setComposerH] = React.useState(0);
const likeCount = React.useMemo(() => {
const n = parseInt(likes.replace(",", ""), 10);
return (n + (liked ? 1 : 0)).toLocaleString();
}, [likes, liked]);
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<Mount>
<View className="flex-row items-center gap-1 px-4 pb-1 pt-2">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="-ml-2 h-10 w-10"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
<View className="flex-1 items-start">
<Text variant="h3" accessibilityRole="header" className="tracking-tight">
Post
</Text>
{/* Reach line — post views are the metric creators check. */}
<Text variant="muted" className="text-xs">
1,204 views · 89 likes
</Text>
</View>
</View>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: composerH + 12 }}
>
{/* Author row — tappable to profile. */}
<Press
onPress={() => onProfile?.()}
haptic="light"
pressedScale={0.97}
accessibilityRole="button"
accessibilityLabel={`${author}'s profile`}
className="flex-row items-center gap-2.5 px-4 py-2"
>
<Avatar size="sm" source={{ uri: avatarUrl }} fallback={author} alt={author} />
<View className="flex-1 items-start">
<Text className="text-sm font-semibold">{author}</Text>
<Text className="text-xs text-muted-foreground">
{handle} · {time}
</Text>
</View>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Post options"
className="h-8 w-8"
>
<Icon name="ellipsis" size="sm" color="mutedForeground" />
</Button>
</Press>
{/* The photo — rounded card, the content itself. */}
<View className="mx-4 overflow-hidden rounded-3xl">
<Image
source={{ uri: photoUrl }}
className="w-full aspect-square bg-muted"
accessibilityLabel="Post photo"
/>
</View>
{/* Action rail — like/comment/share left, save right. */}
<View className="flex-row items-center justify-between px-4 pt-3">
<View className="flex-row items-center gap-1">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.light();
setLiked((l) => !l);
}}
accessibilityLabel={liked ? "Unlike" : "Like"}
accessibilityState={{ checked: liked }}
className="h-10 w-10"
>
<Icon
name="heart"
size="md"
color={liked ? "destructive" : "foreground"}
/>
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Comment"
className="h-10 w-10"
>
<Icon name="message-circle" size="md" color="foreground" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Share"
className="h-10 w-10"
>
<Icon name="send" size="md" color="foreground" />
</Button>
</View>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.light();
setSaved((s) => !s);
}}
accessibilityLabel={saved ? "Unsave" : "Save"}
accessibilityState={{ checked: saved }}
className="h-10 w-10"
>
<Icon
name="bookmark"
size="md"
color={saved ? "primary" : "foreground"}
/>
</Button>
</View>
{/* Counts + caption. */}
<View className="gap-1.5 px-4 pt-2.5">
<Text className="text-sm font-semibold">{likeCount} likes</Text>
<Text className="text-sm">
<Text className="font-semibold">{handle}</Text> {caption}
</Text>
</View>
{/* Comments — glass container, avatar + text + like count. */}
<Mount delay={BLOCK_STAGGER} className="mx-4 mt-3">
<View className="overflow-hidden rounded-3xl border border-white/50 px-4 py-4 dark:border-white/10">
<Glass
effect="clear"
sheen={0.3}
className="absolute inset-0 pointer-events-none"
/>
<View className="gap-4">
{comments.map((c) => (
<View key={c.id} className="flex-row gap-2.5">
<Avatar
size="sm"
source={{ uri: c.avatarUrl }}
fallback={c.author}
alt={c.author}
/>
<View className="flex-1">
<Text className="text-sm">
<Text className="font-semibold">{c.author}</Text> {c.text}
</Text>
<View className="flex-row gap-4 pt-1">
<Text className="text-xs text-muted-foreground">{c.time}</Text>
<Button
variant="ghost"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel={`Reply to ${c.author}`}
className="h-6 px-1"
>
<Text className="text-xs font-medium text-muted-foreground">
Reply
</Text>
</Button>
</View>
</View>
<View className="items-center">
<Icon name="heart" size="sm" color="mutedForeground" />
<Text className="text-[10px] text-muted-foreground">
{c.likes}
</Text>
</View>
</View>
))}
</View>
</View>
</Mount>
</ScrollView>
{/* Comment composer — floating capsule over a soft canvas fade:
comments dim out beneath it instead of a hard band seam. */}
<View
pointerEvents="none"
className="absolute inset-x-0 bottom-0"
style={{ height: Math.max(composerH + 28, 112) }}
>
<CanvasFade light="#F4F5F9" dark="#111114" />
</View>
<StickyBottomBar onLayout={(e) => setComposerH(e.nativeEvent.layout.height)} className="px-4">
<View className="flex-row items-center gap-2">
<Avatar
source={{ uri: avatarUrl }}
fallback="You"
alt="You"
/>
<View className="flex-1">
<Input
glass
value={draft}
onChangeText={setDraft}
placeholder="Add a comment..."
accessibilityLabel="Comment input"
style={{ height: 56 }}
/>
</View>
<Press
haptic="light"
disabled={!draft.trim()}
onPress={() => {
haptics.light();
setDraft("");
}}
accessibilityRole="button"
accessibilityLabel="Post comment"
className={`h-[52px] items-center justify-center rounded-full px-6 overflow-hidden ${draft.trim() ? "" : "opacity-50"}`}
>
<Glass
effect="regular"
tintColor="rgba(101, 163, 13, 0.62)"
sheen={0.7}
interactive
className="absolute inset-0 rounded-full"
pointerEvents="none"
/>
<Text className="text-base font-bold text-white">Post</Text>
</Press>
</View>
</StickyBottomBar>
</SafeAreaView>
</World>
);
}
PostDetailScreen.displayName = "PostDetailScreen";
Recreate the "Post Detail Screen" screen in React Native using LumioUI.
Goal: Photo post with comments 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 social-post-detail
```
Or pull just the components: `npx lumioui add avatar button icon image input 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
### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×3
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×7
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×7
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×13
## 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/social/post-detail.tsx` exporting PostDetailScreen. 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 } from "react-native-safe-area-context";
import { Avatar, Button, Glass, Icon, Image, Input, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, CanvasFade, Mount, Press, StickyBottomBar, World } from "../shared";
export interface PostComment {
id: string;
author: string;
avatarUrl: string;
text: string;
likes: string;
time: string;
}
export interface PostDetailScreenProps {
author?: string;
handle?: string;
avatarUrl?: string;
time?: string;
photoUrl?: string;
caption?: string;
likes?: string;
comments?: PostComment[];
onProfile?: () => void;
onBack?: () => void;
}
const DEFAULT_COMMENTS: PostComment[] = [
{
id: "c1",
author: "Noah Reyes",
avatarUrl: "https://i.pravatar.cc/150?img=13",
text: "The light in this is unreal. What film?",
likes: "12",
time: "1h",
},
{
id: "c2",
author: "Priya Nair",
avatarUrl: "https://i.pravatar.cc/150?img=32",
text: "Tagged this to my Lisbon folder",
likes: "4",
time: "3h",
},
{
id: "c3",
author: "Milo Park",
avatarUrl: "https://i.pravatar.cc/150?img=15",
text: "Same spot, same hour — you got the better sky",
likes: "8",
time: "4h",
},
{
id: "c4",
author: "Elena Ruiz",
avatarUrl: "https://i.pravatar.cc/150?img=24",
text: "Post the carousel — the second frame is even better",
likes: "2",
time: "6h",
},
{
id: "c5",
author: "Diego Ruiz",
avatarUrl: "https://i.pravatar.cc/150?img=53",
text: "Save me a seat on the next shoot",
likes: "1",
time: "8h",
},
];
/** Post detail — author row, full photo, action rail, caption, comments. */
export function PostDetailScreen({
author = "Amara Chen",
handle = "@amara.makes",
avatarUrl = "https://i.pravatar.cc/300?img=47",
time = "2h",
photoUrl = "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=800&fit=crop&q=75&auto=format",
caption = "Golden hour on the Douro — Porto keeps winning.",
likes = "2,314",
comments = DEFAULT_COMMENTS,
onProfile,
onBack,
}: PostDetailScreenProps) {
const haptics = useHaptic();
const [liked, setLiked] = React.useState(false);
const [saved, setSaved] = React.useState(false);
const [draft, setDraft] = React.useState("");
const [composerH, setComposerH] = React.useState(0);
const likeCount = React.useMemo(() => {
const n = parseInt(likes.replace(",", ""), 10);
return (n + (liked ? 1 : 0)).toLocaleString();
}, [likes, liked]);
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<Mount>
<View className="flex-row items-center gap-1 px-4 pb-1 pt-2">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="-ml-2 h-10 w-10"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
<View className="flex-1 items-start">
<Text variant="h3" accessibilityRole="header" className="tracking-tight">
Post
</Text>
{/* Reach line — post views are the metric creators check. */}
<Text variant="muted" className="text-xs">
1,204 views · 89 likes
</Text>
</View>
</View>
</Mount>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: composerH + 12 }}
>
{/* Author row — tappable to profile. */}
<Press
onPress={() => onProfile?.()}
haptic="light"
pressedScale={0.97}
accessibilityRole="button"
accessibilityLabel={`${author}'s profile`}
className="flex-row items-center gap-2.5 px-4 py-2"
>
<Avatar size="sm" source={{ uri: avatarUrl }} fallback={author} alt={author} />
<View className="flex-1 items-start">
<Text className="text-sm font-semibold">{author}</Text>
<Text className="text-xs text-muted-foreground">
{handle} · {time}
</Text>
</View>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Post options"
className="h-8 w-8"
>
<Icon name="ellipsis" size="sm" color="mutedForeground" />
</Button>
</Press>
{/* The photo — rounded card, the content itself. */}
<View className="mx-4 overflow-hidden rounded-3xl">
<Image
source={{ uri: photoUrl }}
className="w-full aspect-square bg-muted"
accessibilityLabel="Post photo"
/>
</View>
{/* Action rail — like/comment/share left, save right. */}
<View className="flex-row items-center justify-between px-4 pt-3">
<View className="flex-row items-center gap-1">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.light();
setLiked((l) => !l);
}}
accessibilityLabel={liked ? "Unlike" : "Like"}
accessibilityState={{ checked: liked }}
className="h-10 w-10"
>
<Icon
name="heart"
size="md"
color={liked ? "destructive" : "foreground"}
/>
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Comment"
className="h-10 w-10"
>
<Icon name="message-circle" size="md" color="foreground" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Share"
className="h-10 w-10"
>
<Icon name="send" size="md" color="foreground" />
</Button>
</View>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.light();
setSaved((s) => !s);
}}
accessibilityLabel={saved ? "Unsave" : "Save"}
accessibilityState={{ checked: saved }}
className="h-10 w-10"
>
<Icon
name="bookmark"
size="md"
color={saved ? "primary" : "foreground"}
/>
</Button>
</View>
{/* Counts + caption. */}
<View className="gap-1.5 px-4 pt-2.5">
<Text className="text-sm font-semibold">{likeCount} likes</Text>
<Text className="text-sm">
<Text className="font-semibold">{handle}</Text> {caption}
</Text>
</View>
{/* Comments — glass container, avatar + text + like count. */}
<Mount delay={BLOCK_STAGGER} className="mx-4 mt-3">
<View className="overflow-hidden rounded-3xl border border-white/50 px-4 py-4 dark:border-white/10">
<Glass
effect="clear"
sheen={0.3}
className="absolute inset-0 pointer-events-none"
/>
<View className="gap-4">
{comments.map((c) => (
<View key={c.id} className="flex-row gap-2.5">
<Avatar
size="sm"
source={{ uri: c.avatarUrl }}
fallback={c.author}
alt={c.author}
/>
<View className="flex-1">
<Text className="text-sm">
<Text className="font-semibold">{c.author}</Text> {c.text}
</Text>
<View className="flex-row gap-4 pt-1">
<Text className="text-xs text-muted-foreground">{c.time}</Text>
<Button
variant="ghost"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel={`Reply to ${c.author}`}
className="h-6 px-1"
>
<Text className="text-xs font-medium text-muted-foreground">
Reply
</Text>
</Button>
</View>
</View>
<View className="items-center">
<Icon name="heart" size="sm" color="mutedForeground" />
<Text className="text-[10px] text-muted-foreground">
{c.likes}
</Text>
</View>
</View>
))}
</View>
</View>
</Mount>
</ScrollView>
{/* Comment composer — floating capsule over a soft canvas fade:
comments dim out beneath it instead of a hard band seam. */}
<View
pointerEvents="none"
className="absolute inset-x-0 bottom-0"
style={{ height: Math.max(composerH + 28, 112) }}
>
<CanvasFade light="#F4F5F9" dark="#111114" />
</View>
<StickyBottomBar onLayout={(e) => setComposerH(e.nativeEvent.layout.height)} className="px-4">
<View className="flex-row items-center gap-2">
<Avatar
source={{ uri: avatarUrl }}
fallback="You"
alt="You"
/>
<View className="flex-1">
<Input
glass
value={draft}
onChangeText={setDraft}
placeholder="Add a comment..."
accessibilityLabel="Comment input"
style={{ height: 56 }}
/>
</View>
<Press
haptic="light"
disabled={!draft.trim()}
onPress={() => {
haptics.light();
setDraft("");
}}
accessibilityRole="button"
accessibilityLabel="Post comment"
className={`h-[52px] items-center justify-center rounded-full px-6 overflow-hidden ${draft.trim() ? "" : "opacity-50"}`}
>
<Glass
effect="regular"
tintColor="rgba(101, 163, 13, 0.62)"
sheen={0.7}
interactive
className="absolute inset-0 rounded-full"
pointerEvents="none"
/>
<Text className="text-base font-bold text-white">Post</Text>
</Press>
</View>
</StickyBottomBar>
</SafeAreaView>
</World>
);
}
PostDetailScreen.displayName = "PostDetailScreen";
```
Screen: https://lumioui.dev/screens/social-post-detail