Travel Home Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Card, Glass, Icon, Image, SearchInput, Text, } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, SERIF, SectionHead, StoryScrim, World } from "../shared";

export interface Destination {
  id: string;
  name: string;
  detail: string;
  price: string;
  imageUrl: string;
}

export interface TravelHomeScreenProps {
  name?: string;
  avatarUrl?: string;
  destinations?: Destination[];
  onDestinationPress?: (id: string) => void;
  onSearch?: (query: string) => void;
  onNotifications?: () => void;
}

const DEFAULT_DESTINATIONS: Destination[] = [
  {
    id: "d1",
    name: "Lisbon",
    detail: "Portugal · 4 nights",
    price: "from $640",
    imageUrl: "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=600&h=800&fit=crop&q=70&auto=format",
  },
  {
    id: "d2",
    name: "Kyoto",
    detail: "Japan · 7 nights",
    price: "from $1,240",
    imageUrl: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=600&h=800&fit=crop&q=70&auto=format",
  },
  {
    id: "d3",
    name: "Marrakech",
    detail: "Morocco · 5 nights",
    price: "from $720",
    imageUrl: "https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=600&h=800&fit=crop&q=70&auto=format",
  },
];

/** Travel home — search bar, upcoming trip, destination cards. */
export function TravelHomeScreen({
  name = "Amara",
  avatarUrl = "https://i.pravatar.cc/150?img=9",
  destinations = DEFAULT_DESTINATIONS,
  onDestinationPress,
  onSearch,
  onNotifications,
}: TravelHomeScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  return (
    <World primary="#65A30D">
    <View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
      >
        {/* Immersive hero — destination photo behind the greeting and the
            search field, the travel-app signature (Airbnb / Kayak idiom). */}
        <View className="h-72 overflow-hidden">
          <Image
            source={{ uri: destinations[0]?.imageUrl }}
            className="absolute inset-0 h-full w-full"
            accessibilityElementsHidden
          />
          <View className="absolute inset-x-0 bottom-0 h-56">
            <StoryScrim edge="bottom" />
          </View>
          <View
            className="flex-1 justify-between px-4 pb-5"
            style={{ paddingTop: insets.top + 8 }}
          >
            {/* Top row — avatar + bell sit on the photo. */}
            <View className="flex-row items-center justify-between">
              <View className="rounded-full border-2 border-white/60">
                <Avatar size="md" source={{ uri: avatarUrl }} fallback={name} alt={name} />
              </View>
              <Glass interactive effect="clear" className="rounded-full">
              <Button
                variant="ghost"
                size="icon"
                haptic="light"
                onPress={() => onNotifications?.()}
                accessibilityLabel="Notifications"
                className="h-10 w-10 rounded-full"
              >
                <Icon name="bell" size="sm" color="#FFFFFF" />
              </Button>
              </Glass>
            </View>
            {/* Greeting + search — white display type over the scrim, then
                the field the whole screen exists for. */}
            <View className="gap-3">
              <View>
                <Text className="text-2xl font-bold text-white" style={{ fontFamily: SERIF }}>
                  Where to, <Text className="italic text-[#BEF04C]">{name}?</Text>
                </Text>
                <Text className="text-sm text-white/75">
                  143 destinations this season
                </Text>
                {/* Next-trip line — travel homes lead with what you booked. */}
                <Text className="pt-1 text-[11px] font-medium text-white/85">
                  Kyoto in 12 days — itinerary ready
                </Text>
              </View>
              <Glass interactive effect="regular" className="rounded-2xl p-1">
                <SearchInput
                  glass
                  value={query}
                  onChangeText={setQuery}
                  placeholder="Flights, stays, cities"
                  accessibilityLabel="Search trips"
                  onSubmitEditing={() => onSearch?.(query)}
                />
              </Glass>
            </View>
          </View>
        </View>

        {/* Upcoming trip — the card people open this screen for. */}
        <Mount delay={60}>
        <Card haptic="light" className="mx-4 mb-4 mt-4 rounded-3xl">
          <Card.Content className="gap-2 p-4">
            <View className="flex-row items-center gap-2">
              <Icon name="plane" size="sm" color="#65A30D" />
              <Text className="text-sm font-medium text-[#65A30D]">
                Upcoming trip
              </Text>
            </View>
            <Text className="text-base font-semibold">
              San Francisco → Lisbon
            </Text>
            <Text variant="small" className="text-muted-foreground">
              Oct 3 · 8:15 PM · Seat 14A · 4 travelers
            </Text>
            <Button
              variant="secondary"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="View boarding pass"
              className="mt-1 h-9 self-start px-4"
            >
              Boarding pass
            </Button>
          </Card.Content>
        </Card>
        </Mount>

        {/* Destination cards — photo-forward, like Airbnb picks. */}
        <Mount delay={120}>
        <SectionHead title="Trending" action="See all" className="px-4 pb-2" />
        {destinations.map((d) => (
          <Press
            key={d.id}
            haptic="light"
            onPress={() => onDestinationPress?.(d.id)}
            accessibilityLabel={`${d.name}, ${d.price}`}
            className="mx-4 mb-3 h-36 overflow-hidden rounded-3xl p-0"
          >
            <Image
              source={{ uri: d.imageUrl }}
              className="absolute inset-0 h-full w-full"
              accessibilityLabel={d.name}
            />
            {/* Bottom scrim + copy — destination name + price on the photo. */}
            <View className="absolute inset-x-0 bottom-0 h-16">
              <StoryScrim edge="bottom" />
            </View>
            <View className="absolute inset-x-0 bottom-0 gap-0.5 p-4">
              <Text className="text-base font-semibold text-white">
                {d.name}
              </Text>
              <Text className="text-xs text-white/80">
                {d.detail} · {d.price}
              </Text>
            </View>
          </Press>
        ))}
        </Mount>
      </ScrollView>
    </View>
    </World>
  );
}
TravelHomeScreen.displayName = "TravelHomeScreen";

Recreate the "Travel Home Screen" screen in React Native using LumioUI.

Goal: Trip search and destination cards 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-travel-home
```

Or pull just the components: `npx lumioui add avatar button card glass icon image search-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>` ×1

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×2

### `card` — Compound surface — header, title, content and footer slots.
- `<Card>` ×1

### `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>` ×2

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2

### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×2

### `search-input` — Search field with clear button, debounce, focus halo — plus a glass capsule mode that floats over content like iOS 26
- `<SearchInput>` ×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/travel/travel-home.tsx` exporting TravelHomeScreen. 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 { useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Card, Glass, Icon, Image, SearchInput, Text, } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, SERIF, SectionHead, StoryScrim, World } from "../shared";

export interface Destination {
  id: string;
  name: string;
  detail: string;
  price: string;
  imageUrl: string;
}

export interface TravelHomeScreenProps {
  name?: string;
  avatarUrl?: string;
  destinations?: Destination[];
  onDestinationPress?: (id: string) => void;
  onSearch?: (query: string) => void;
  onNotifications?: () => void;
}

const DEFAULT_DESTINATIONS: Destination[] = [
  {
    id: "d1",
    name: "Lisbon",
    detail: "Portugal · 4 nights",
    price: "from $640",
    imageUrl: "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=600&h=800&fit=crop&q=70&auto=format",
  },
  {
    id: "d2",
    name: "Kyoto",
    detail: "Japan · 7 nights",
    price: "from $1,240",
    imageUrl: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=600&h=800&fit=crop&q=70&auto=format",
  },
  {
    id: "d3",
    name: "Marrakech",
    detail: "Morocco · 5 nights",
    price: "from $720",
    imageUrl: "https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=600&h=800&fit=crop&q=70&auto=format",
  },
];

/** Travel home — search bar, upcoming trip, destination cards. */
export function TravelHomeScreen({
  name = "Amara",
  avatarUrl = "https://i.pravatar.cc/150?img=9",
  destinations = DEFAULT_DESTINATIONS,
  onDestinationPress,
  onSearch,
  onNotifications,
}: TravelHomeScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  return (
    <World primary="#65A30D">
    <View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]">
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
      >
        {/* Immersive hero — destination photo behind the greeting and the
            search field, the travel-app signature (Airbnb / Kayak idiom). */}
        <View className="h-72 overflow-hidden">
          <Image
            source={{ uri: destinations[0]?.imageUrl }}
            className="absolute inset-0 h-full w-full"
            accessibilityElementsHidden
          />
          <View className="absolute inset-x-0 bottom-0 h-56">
            <StoryScrim edge="bottom" />
          </View>
          <View
            className="flex-1 justify-between px-4 pb-5"
            style={{ paddingTop: insets.top + 8 }}
          >
            {/* Top row — avatar + bell sit on the photo. */}
            <View className="flex-row items-center justify-between">
              <View className="rounded-full border-2 border-white/60">
                <Avatar size="md" source={{ uri: avatarUrl }} fallback={name} alt={name} />
              </View>
              <Glass interactive effect="clear" className="rounded-full">
              <Button
                variant="ghost"
                size="icon"
                haptic="light"
                onPress={() => onNotifications?.()}
                accessibilityLabel="Notifications"
                className="h-10 w-10 rounded-full"
              >
                <Icon name="bell" size="sm" color="#FFFFFF" />
              </Button>
              </Glass>
            </View>
            {/* Greeting + search — white display type over the scrim, then
                the field the whole screen exists for. */}
            <View className="gap-3">
              <View>
                <Text className="text-2xl font-bold text-white" style={{ fontFamily: SERIF }}>
                  Where to, <Text className="italic text-[#BEF04C]">{name}?</Text>
                </Text>
                <Text className="text-sm text-white/75">
                  143 destinations this season
                </Text>
                {/* Next-trip line — travel homes lead with what you booked. */}
                <Text className="pt-1 text-[11px] font-medium text-white/85">
                  Kyoto in 12 days — itinerary ready
                </Text>
              </View>
              <Glass interactive effect="regular" className="rounded-2xl p-1">
                <SearchInput
                  glass
                  value={query}
                  onChangeText={setQuery}
                  placeholder="Flights, stays, cities"
                  accessibilityLabel="Search trips"
                  onSubmitEditing={() => onSearch?.(query)}
                />
              </Glass>
            </View>
          </View>
        </View>

        {/* Upcoming trip — the card people open this screen for. */}
        <Mount delay={60}>
        <Card haptic="light" className="mx-4 mb-4 mt-4 rounded-3xl">
          <Card.Content className="gap-2 p-4">
            <View className="flex-row items-center gap-2">
              <Icon name="plane" size="sm" color="#65A30D" />
              <Text className="text-sm font-medium text-[#65A30D]">
                Upcoming trip
              </Text>
            </View>
            <Text className="text-base font-semibold">
              San Francisco → Lisbon
            </Text>
            <Text variant="small" className="text-muted-foreground">
              Oct 3 · 8:15 PM · Seat 14A · 4 travelers
            </Text>
            <Button
              variant="secondary"
              haptic="light"
              onPress={() => haptics.light()}
              accessibilityLabel="View boarding pass"
              className="mt-1 h-9 self-start px-4"
            >
              Boarding pass
            </Button>
          </Card.Content>
        </Card>
        </Mount>

        {/* Destination cards — photo-forward, like Airbnb picks. */}
        <Mount delay={120}>
        <SectionHead title="Trending" action="See all" className="px-4 pb-2" />
        {destinations.map((d) => (
          <Press
            key={d.id}
            haptic="light"
            onPress={() => onDestinationPress?.(d.id)}
            accessibilityLabel={`${d.name}, ${d.price}`}
            className="mx-4 mb-3 h-36 overflow-hidden rounded-3xl p-0"
          >
            <Image
              source={{ uri: d.imageUrl }}
              className="absolute inset-0 h-full w-full"
              accessibilityLabel={d.name}
            />
            {/* Bottom scrim + copy — destination name + price on the photo. */}
            <View className="absolute inset-x-0 bottom-0 h-16">
              <StoryScrim edge="bottom" />
            </View>
            <View className="absolute inset-x-0 bottom-0 gap-0.5 p-4">
              <Text className="text-base font-semibold text-white">
                {d.name}
              </Text>
              <Text className="text-xs text-white/80">
                {d.detail} · {d.price}
              </Text>
            </View>
          </Press>
        ))}
        </Mount>
      </ScrollView>
    </View>
    </World>
  );
}
TravelHomeScreen.displayName = "TravelHomeScreen";
```

Screen: https://lumioui.dev/screens/travel-travel-home