Search Result Item
Image or icon, title with the match in bold, subtitle, metadata and an action.
The first match of the query in each title is bold. A row with an action ends with a tinted button; the others end with a chevron.
Installation
npx axiom add search-result-itempnpm dlx axiom add search-result-itemyarn dlx axiom add search-result-itembun x axiom add search-result-itemAlso copies: item, icon, icon-button, text and their dependencies. The file lands in components/compositions/search-result-item.tsx. It brings no tokens of its own.
Requires the chevron-right icon in your icon registry.
Usage
import { SearchResultItem } from "@/components/compositions/search-result-item";
<FlatList
data={results}
keyExtractor={(result) => result.id}
keyboardShouldPersistTaps="handled"
renderItem={({ item }) => (
<SearchResultItem
title={item.title}
query={query}
subtitle={item.kind}
meta={item.meta}
image={item.imageUrl ? { uri: item.imageUrl } : undefined}
imageShape={item.kind === "Artist" ? "circle" : "square"}
action={{ icon: "add", label: "Add to library", onPress: () => save(item.id) }}
onPress={() => open(item)}
/>
)}
/>;The match is case-insensitive and only the first one is bold. The split is exported as splitMatch(text, query) if you need it elsewhere, for a subtitle for example.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | One line. |
query | string | — | What the user typed. Its first match in the title is bold. |
subtitle | string | — | Second line, muted. |
meta | string | — | Third line in caption size: "Playlist · 42 songs". Makes the row 64pt tall. |
image | ImageSourcePropType | — | A 44pt thumbnail. |
imageShape | 'square' | 'circle' | 'square' | circle for people and artists. |
icon | IconName | — | On a subtle tile, when there is no image: a page, a setting, a recent search. |
action | SearchResultAction | — | { icon, label, onPress }: a tinted IconButton at the end. |
onPress | () => void | — | Opens the result. Without action, adds a chevron. |
disabled | boolean | false | Disabled colors, no press. |
Accessibility
The row reads as one element: “Late Night Tales, Playlist, 42 songs · 2 h 51 min”. The bold match is visual only. The action is a separate element, labelled with the title: “Add to library, Nightcall”.
Built with
- Item: the row and its slots.
- Icon: the tile icon and the chevron.
- IconButton: the action.
- Text: the title with its bold match, subtitle and metadata.
Used in
No block uses Search Result Item yet.
Related
- Search App Bar: the field above the results.
- Empty: for a search with no results.
- SearchBar
- Compositions