Search Results
A clean, monochrome search screen: a compact pinned search field, one scrolling row of filter chips (Filters sheet, sort, price, rating, free delivery, open now), tight list rows with neutral thumbnails, rating, distance and price, Recent and Trending while the field is empty, skeleton rows while searching and a compact “No results” state — with a subtle staggered entrance that respects Reduce Motion.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| results Results for the current query. Filtered and sorted locally. | { id, title, subtitle?, rating, reviews?, price, distance?, freeDelivery?, open?, color?, icon? }[] | 6 coffee results (₹) |
| defaultQuery Initial query in the field and the result count. Empty shows Recent and Trending. | string | 'coffee' |
| totalCount Backend total shown while no filter is active. | number | 128 |
| loading Skeleton rows and a spinning search icon. | boolean | false |
| filters Controlled quick filters. | ('price' | 'rating' | 'free-delivery' | 'open')[] | — |
| defaultFilters Initial filters when uncontrolled. | SearchFilter[] | [] |
| onFiltersChange Chips or the sheet changed the filters. | (filters) => void | — |
| recentSearches / trendingSearches Shown while the field is empty (recent as rows with Clear, trending as chips). Submitted searches join Recent. | string[] | 3 / 4 samples |
| onSearch Submitted from the keyboard, a recent / trending search or a no-results chip. | (query: string) => void | — |
| onSelect A result row was tapped. | (result) => void | — |
| onClearRecent Clear next to Recent was tapped. | () => void | — |
| autoFocus Focus the field on mount. | boolean | false |
| currency Symbol placed before prices by the default formatter (Indian digit grouping, decimals only when non-zero). | string | '₹' |
| formatPrice Money formatter for rows, chips and the slider. Overrides currency — use for Intl, other grouping or suffix symbols like '12,50 €'. | (amount) => string | '₹1,23,456' |
| maxPrice Top of the price-range slider; the top value reads as "and up". | number | 2000 |
| tintedThumbnails Tint thumbnails with each result's color instead of the neutral default. | boolean | false |
| accent Active chip, slider and button colour (black in light, white in dark by default). | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?