Search Results

Recreate the "Search Results" screen in React Native using LumioUI.

Goal: Results appear in reading order as a search loads, with a filter rail that narrows and re-sorts the grid, a live result count, wishlist hearts and related searches to try next. 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/cli add pro/ecommerce-search-results
```

Or pull just the components: `npx @lumioui/cli add action-swap button chip pro/filter-bar glass icon image search-input separator text`

Native packages:
- react-native-reanimated@*
- react-native-safe-area-context@*
- react-native-svg@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `action-swap` — Building blocks for swapping a label or icon in place: the old one fades as the new one appears, plainly, with a small lift or letter by letter. Includes button, text, icon and multi-state versions.
- `<ActionSwapText>` ×1

### `button` — Pill button that presses down under your finger, in eight styles from solid to glass, with a built-in loading state that swaps in place while an action runs.
- `<Button>` ×1

### `chip` — Compact pill for filters, suggestions, tags and inputs, in solid, outline and glass styles. Selecting a chip fills it quickly and it settles into place without a bounce.
- `<Chip>` ×2

### `filter-bar` — Horizontal filter row with a Filters button and count badge, toggle chips, and dropdown chips that open a sheet. Sheets show a live result count, and a Clear chip appears once a filter is on.
- `<FilterBar>` ×1

### `glass` — Glass surface for cards and controls: system glass on newer iOS, real refraction on the web and a frosted look elsewhere. Light can gather under your finger, and panes merge on newer iOS and the web.
- imported but not rendered directly — likely used through a sibling or as a utility

### `icon` — Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.
- `<Icon>` ×3

### `image` — Image with a placeholder while it loads, a fallback when it fails, and aspect-ratio handling so your layout doesn’t jump when the picture arrives.
- `<Image>` ×2

### `search-input` — Search field with a clear button and a busy indicator while results load. Focus brightens the field, matching text in results can be highlighted, and a frosted glass style is included.
- `<SearchInput>` ×1

### `separator` — Thin divider line, horizontal or vertical. It can draw itself in as a page builds, or show a perforated tear line for tickets and receipts.
- `<Separator>` ×1

### `text` — Themed type scale from caption to display that follows light and dark mode. Includes a pull-quote style with an accent rule and a quieter dimmed tone for secondary text.
- `<Text>` ×11

## 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/ecommerce/search-results.tsx` exporting SearchProductsScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

This is a LumioUI Pro item: its source is not published in the docs. Install it with a Pro license key
(set `LUMIO_LICENSE_KEY`; keys are on lumioui.com/account) and read the installed file as the reference:

```bash
npx @lumioui/cli add pro/ecommerce-search-results
```

The source lands at `screens/ecommerce/search-results.tsx`.

Screen: https://lumioui.com/screens/ecommerce-search-results