Day-grouped trip timeline
import * as React from "react";
import { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, type IconName, Image, Text } from "@lumioui/ui";
import { Display, Mount, Press, World } from "../shared";
export interface ItineraryItem {
id: string;
time: string;
title: string;
detail: string;
icon: IconName;
}
export interface ItineraryDay {
id: string;
label: string;
items: ItineraryItem[];
}
export interface TripItineraryScreenProps {
trip?: string;
days?: ItineraryDay[];
onItemPress?: (id: string) => void;
onBack?: () => void;
}
const COVER =
"https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=420&fit=crop&q=70&auto=format";
/** Items whose detail implies a booking get a ticket chip, not a chevron. */
const TICKETED = /ticket|entry|booked|reservation/i;
const DEFAULT_DAYS: ItineraryDay[] = [
{
id: "d1",
label: "Arrival",
items: [
{ id: "i1", time: "2:40 PM", title: "Land at LIS", detail: "Terminal 1 · bag claim 4", icon: "plane" },
{ id: "i2", time: "4:00 PM", title: "Check in", detail: "Memmo Alfama", icon: "home" },
{ id: "i3", time: "7:30 PM", title: "Dinner at Taberna", detail: "Rua dos Bacalhoeiros · reservation", icon: "utensils" },
],
},
{
id: "d2",
label: "Alfama",
items: [
{ id: "i4", time: "9:00 AM", title: "São Jorge Castle", detail: "Tickets booked", icon: "map-pin" },
{ id: "i5", time: "1:00 PM", title: "Tram 28", detail: "Martim Moniz → Graça", icon: "tram-front" },
{ id: "i6", time: "8:00 PM", title: "Fado at Clube de Fado", detail: "Door opens 7:45", icon: "music" },
],
},
{
id: "d3",
label: "Belém",
items: [
{ id: "i7", time: "10:00 AM", title: "Pastéis de Belém", detail: "The original — warm with cinnamon", icon: "utensils" },
{ id: "i8", time: "11:30 AM", title: "Jerónimos Monastery", detail: "Timed entry 11:40", icon: "map-pin" },
{ id: "i9", time: "4:00 PM", title: "MAAT rooftop", detail: "Sunset over the Tagus", icon: "camera" },
],
},
{
id: "d4",
label: "Sintra day trip",
items: [
{ id: "i10", time: "8:40 AM", title: "Train from Rossio", detail: "Platform 3 · 40 min", icon: "tram-front" },
{ id: "i11", time: "10:00 AM", title: "Pena Palace", detail: "Timed entry 10:30", icon: "map-pin" },
{ id: "i12", time: "6:30 PM", title: "Back to Lisbon", detail: "Return tickets booked", icon: "tram-front" },
],
},
];
/** Trip itinerary — photo cover + day pills + spine timeline. */
export function TripItineraryScreen({
trip = "Lisbon · 4 nights",
days = DEFAULT_DAYS,
onItemPress,
onBack,
}: TripItineraryScreenProps) {
const insets = useSafeAreaInsets();
const [dayId, setDayId] = useState(days[0]?.id ?? "");
const dayIdx = Math.max(0, days.findIndex((d) => d.id === dayId));
const day = days[dayIdx] ?? days[0];
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View className="flex-row items-center gap-2 px-4 pb-2 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>
<Mount className="flex-1">
<Display className="text-3xl">
Itinerary
</Display>
<View>
<Text variant="small" className="text-muted-foreground">
{trip}
</Text>
{/* Trip totals — itineraries answer length + spend up top. */}
<Text variant="small" className="text-muted-foreground/80">
{days.length} days · $1,840 est.
</Text>
</View>
</Mount>
<Button variant="ghost" size="icon" haptic="light" accessibilityLabel="Trip map" className="h-10 w-10">
<Icon name="map-pin" size="sm" color="foreground" />
</Button>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
{/* Cover strip — the trip itself is the hero. */}
<Mount delay={60} className="mx-4 mt-2 overflow-hidden rounded-3xl">
<Image source={{ uri: COVER }} alt="Lisbon" className="h-32 w-full" />
<View className="absolute inset-x-0 bottom-0 flex-row items-end justify-between bg-black/25 px-4 pb-3 pt-10">
<View>
<Text className="text-lg font-semibold text-white">{trip}</Text>
<Text className="text-xs text-white/80">Sep 3 – 7 · {days.length} days</Text>
</View>
<View className="rounded-full bg-white/20 px-2.5 py-1">
<Text className="text-[10px] font-medium text-white">
Day {dayIdx + 1} of {days.length}
</Text>
</View>
</View>
</Mount>
{/* Day pills — one day in view at a time. */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ gap: 8, paddingHorizontal: 16, paddingTop: 12 }}
>
{days.map((d, i) => (
<Chip
key={d.id}
variant="filter"
selected={d.id === dayId}
onPress={() => setDayId(d.id)}
accessibilityLabel={`Day ${i + 1}, ${d.label}`}
>
{`Day ${i + 1}`}
</Chip>
))}
</ScrollView>
{/* Timeline — icon nodes ride a continuous spine; ticketed items get
a real affordance instead of a decorative icon. */}
{day && (
<View className="mx-4 mt-3 overflow-hidden rounded-3xl bg-white py-2 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Text className="text-sm font-semibold">
Day {dayIdx + 1} · {day.label}
</Text>
<Text className="text-xs text-muted-foreground">
{day.items.length} stops
</Text>
</View>
{day.items.map((item) => (
<Press
key={item.id}
haptic="light"
onPress={() => onItemPress?.(item.id)}
accessibilityRole="button"
accessibilityLabel={`${item.time}, ${item.title}`}
className="flex-row gap-3 px-4 py-2.5"
>
<Text className="w-14 pt-1 text-right text-[11px] font-medium text-muted-foreground">
{item.time}
</Text>
{/* Spine segment — every row draws its own full-height piece,
so the line runs unbroken under all the node discs. */}
<View className="w-7 items-center">
<View className="absolute bottom-0 top-0 w-[2px] bg-border" />
<View className="h-7 w-7 items-center justify-center overflow-hidden rounded-full">
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
<View className="h-6 w-6 items-center justify-center rounded-full bg-[#65A30D]/15">
<Icon name={item.icon} size="sm" color="#65A30D" />
</View>
</View>
</View>
<View className="flex-1 justify-center">
<Text className="text-sm font-medium">{item.title}</Text>
<Text className="text-xs text-muted-foreground">{item.detail}</Text>
</View>
{TICKETED.test(item.detail) ? (
<View className="flex-row items-center gap-1 self-center rounded-full bg-[#65A30D]/10 px-2 py-1">
<Icon name="check-circle" size="sm" color="#65A30D" />
<Text className="text-[10px] font-medium text-[#65A30D]">Booked</Text>
</View>
) : (
<Icon name="chevron-right" size="sm" color="mutedForeground" />
)}
</Press>
))}
</View>
)}
{/* Next-day teaser — itineraries preview tomorrow so the day ends
with a look ahead rather than empty canvas. */}
{(() => {
const next = days[dayIdx + 1];
if (!next) return null;
return (
<Press
haptic="light"
pressedScale={0.98}
onPress={() => setDayId(next.id)}
accessibilityRole="button"
accessibilityLabel={`Jump to day ${dayIdx + 2}, ${next.label}`}
className="mx-4 mt-3 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]"
>
<Text className="text-xs font-medium uppercase text-muted-foreground">
Up next · Day {dayIdx + 2} · {next.label}
</Text>
{next.items.slice(0, 2).map((item) => (
<View key={item.id} className="flex-row items-center gap-2.5 pt-2">
<Icon name={item.icon} size="sm" color="#65A30D" />
<Text className="flex-1 text-sm font-medium" numberOfLines={1}>
{item.title}
</Text>
<Text className="text-xs text-muted-foreground tabular-nums">
{item.time}
</Text>
</View>
))}
</Press>
);
})()}
</ScrollView>
</SafeAreaView>
</World>
);
}
TripItineraryScreen.displayName = "TripItineraryScreen";
Recreate the "Trip Itinerary Screen" screen in React Native using LumioUI.
Goal: Day-grouped trip timeline 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 travel-trip-itinerary
```
Or pull just the components: `npx lumioui add button chip icon image list text`
Native packages:
- @lumioui/ui@latest
- react-native-safe-area-context@*
- @lumioui/core@latest
- 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>` ×2
### `chip` — Compact selectable pill with press scale and ink overlay.
- `<Chip>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×6
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility
### `text` — Themed type scale from caption to display.
- `<Text>` ×14
## 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/travel/trip-itinerary.tsx` exporting TripItineraryScreen. 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 { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, type IconName, Image, Text } from "@lumioui/ui";
import { Display, Mount, Press, World } from "../shared";
export interface ItineraryItem {
id: string;
time: string;
title: string;
detail: string;
icon: IconName;
}
export interface ItineraryDay {
id: string;
label: string;
items: ItineraryItem[];
}
export interface TripItineraryScreenProps {
trip?: string;
days?: ItineraryDay[];
onItemPress?: (id: string) => void;
onBack?: () => void;
}
const COVER =
"https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=420&fit=crop&q=70&auto=format";
/** Items whose detail implies a booking get a ticket chip, not a chevron. */
const TICKETED = /ticket|entry|booked|reservation/i;
const DEFAULT_DAYS: ItineraryDay[] = [
{
id: "d1",
label: "Arrival",
items: [
{ id: "i1", time: "2:40 PM", title: "Land at LIS", detail: "Terminal 1 · bag claim 4", icon: "plane" },
{ id: "i2", time: "4:00 PM", title: "Check in", detail: "Memmo Alfama", icon: "home" },
{ id: "i3", time: "7:30 PM", title: "Dinner at Taberna", detail: "Rua dos Bacalhoeiros · reservation", icon: "utensils" },
],
},
{
id: "d2",
label: "Alfama",
items: [
{ id: "i4", time: "9:00 AM", title: "São Jorge Castle", detail: "Tickets booked", icon: "map-pin" },
{ id: "i5", time: "1:00 PM", title: "Tram 28", detail: "Martim Moniz → Graça", icon: "tram-front" },
{ id: "i6", time: "8:00 PM", title: "Fado at Clube de Fado", detail: "Door opens 7:45", icon: "music" },
],
},
{
id: "d3",
label: "Belém",
items: [
{ id: "i7", time: "10:00 AM", title: "Pastéis de Belém", detail: "The original — warm with cinnamon", icon: "utensils" },
{ id: "i8", time: "11:30 AM", title: "Jerónimos Monastery", detail: "Timed entry 11:40", icon: "map-pin" },
{ id: "i9", time: "4:00 PM", title: "MAAT rooftop", detail: "Sunset over the Tagus", icon: "camera" },
],
},
{
id: "d4",
label: "Sintra day trip",
items: [
{ id: "i10", time: "8:40 AM", title: "Train from Rossio", detail: "Platform 3 · 40 min", icon: "tram-front" },
{ id: "i11", time: "10:00 AM", title: "Pena Palace", detail: "Timed entry 10:30", icon: "map-pin" },
{ id: "i12", time: "6:30 PM", title: "Back to Lisbon", detail: "Return tickets booked", icon: "tram-front" },
],
},
];
/** Trip itinerary — photo cover + day pills + spine timeline. */
export function TripItineraryScreen({
trip = "Lisbon · 4 nights",
days = DEFAULT_DAYS,
onItemPress,
onBack,
}: TripItineraryScreenProps) {
const insets = useSafeAreaInsets();
const [dayId, setDayId] = useState(days[0]?.id ?? "");
const dayIdx = Math.max(0, days.findIndex((d) => d.id === dayId));
const day = days[dayIdx] ?? days[0];
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View className="flex-row items-center gap-2 px-4 pb-2 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>
<Mount className="flex-1">
<Display className="text-3xl">
Itinerary
</Display>
<View>
<Text variant="small" className="text-muted-foreground">
{trip}
</Text>
{/* Trip totals — itineraries answer length + spend up top. */}
<Text variant="small" className="text-muted-foreground/80">
{days.length} days · $1,840 est.
</Text>
</View>
</Mount>
<Button variant="ghost" size="icon" haptic="light" accessibilityLabel="Trip map" className="h-10 w-10">
<Icon name="map-pin" size="sm" color="foreground" />
</Button>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
{/* Cover strip — the trip itself is the hero. */}
<Mount delay={60} className="mx-4 mt-2 overflow-hidden rounded-3xl">
<Image source={{ uri: COVER }} alt="Lisbon" className="h-32 w-full" />
<View className="absolute inset-x-0 bottom-0 flex-row items-end justify-between bg-black/25 px-4 pb-3 pt-10">
<View>
<Text className="text-lg font-semibold text-white">{trip}</Text>
<Text className="text-xs text-white/80">Sep 3 – 7 · {days.length} days</Text>
</View>
<View className="rounded-full bg-white/20 px-2.5 py-1">
<Text className="text-[10px] font-medium text-white">
Day {dayIdx + 1} of {days.length}
</Text>
</View>
</View>
</Mount>
{/* Day pills — one day in view at a time. */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ gap: 8, paddingHorizontal: 16, paddingTop: 12 }}
>
{days.map((d, i) => (
<Chip
key={d.id}
variant="filter"
selected={d.id === dayId}
onPress={() => setDayId(d.id)}
accessibilityLabel={`Day ${i + 1}, ${d.label}`}
>
{`Day ${i + 1}`}
</Chip>
))}
</ScrollView>
{/* Timeline — icon nodes ride a continuous spine; ticketed items get
a real affordance instead of a decorative icon. */}
{day && (
<View className="mx-4 mt-3 overflow-hidden rounded-3xl bg-white py-2 dark:bg-[#1A1A20]">
<View className="flex-row items-center justify-between px-4 pb-1 pt-2">
<Text className="text-sm font-semibold">
Day {dayIdx + 1} · {day.label}
</Text>
<Text className="text-xs text-muted-foreground">
{day.items.length} stops
</Text>
</View>
{day.items.map((item) => (
<Press
key={item.id}
haptic="light"
onPress={() => onItemPress?.(item.id)}
accessibilityRole="button"
accessibilityLabel={`${item.time}, ${item.title}`}
className="flex-row gap-3 px-4 py-2.5"
>
<Text className="w-14 pt-1 text-right text-[11px] font-medium text-muted-foreground">
{item.time}
</Text>
{/* Spine segment — every row draws its own full-height piece,
so the line runs unbroken under all the node discs. */}
<View className="w-7 items-center">
<View className="absolute bottom-0 top-0 w-[2px] bg-border" />
<View className="h-7 w-7 items-center justify-center overflow-hidden rounded-full">
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
<View className="h-6 w-6 items-center justify-center rounded-full bg-[#65A30D]/15">
<Icon name={item.icon} size="sm" color="#65A30D" />
</View>
</View>
</View>
<View className="flex-1 justify-center">
<Text className="text-sm font-medium">{item.title}</Text>
<Text className="text-xs text-muted-foreground">{item.detail}</Text>
</View>
{TICKETED.test(item.detail) ? (
<View className="flex-row items-center gap-1 self-center rounded-full bg-[#65A30D]/10 px-2 py-1">
<Icon name="check-circle" size="sm" color="#65A30D" />
<Text className="text-[10px] font-medium text-[#65A30D]">Booked</Text>
</View>
) : (
<Icon name="chevron-right" size="sm" color="mutedForeground" />
)}
</Press>
))}
</View>
)}
{/* Next-day teaser — itineraries preview tomorrow so the day ends
with a look ahead rather than empty canvas. */}
{(() => {
const next = days[dayIdx + 1];
if (!next) return null;
return (
<Press
haptic="light"
pressedScale={0.98}
onPress={() => setDayId(next.id)}
accessibilityRole="button"
accessibilityLabel={`Jump to day ${dayIdx + 2}, ${next.label}`}
className="mx-4 mt-3 overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]"
>
<Text className="text-xs font-medium uppercase text-muted-foreground">
Up next · Day {dayIdx + 2} · {next.label}
</Text>
{next.items.slice(0, 2).map((item) => (
<View key={item.id} className="flex-row items-center gap-2.5 pt-2">
<Icon name={item.icon} size="sm" color="#65A30D" />
<Text className="flex-1 text-sm font-medium" numberOfLines={1}>
{item.title}
</Text>
<Text className="text-xs text-muted-foreground tabular-nums">
{item.time}
</Text>
</View>
))}
</Press>
);
})()}
</ScrollView>
</SafeAreaView>
</World>
);
}
TripItineraryScreen.displayName = "TripItineraryScreen";
```
Screen: https://lumioui.dev/screens/travel-trip-itinerary