Search (Mobile app)
The mobile search screen where the keyboard, live results and filters all compete for one small viewport.
Content & Data Views · 8 checks · 8 resources
Before you ship
8- 01Sticky search bar — the input fixed at the top of the screen as results scroll beneath it
- 02Keyboard auto-focus — the keyboard opens immediately on navigating to the search screen, with no extra tap
- 03Live results — results updating as the user types rather than requiring a submit tap
- 04Recent searches — previously searched terms shown before the user starts typing
- 05Filter bottom sheet — filtering accessed via a bottom sheet rather than a separate screen, keeping search context visible
- 06Skeleton loading — skeleton cards in the expected result shape shown while results load
- 07No results state — a helpful empty state suggesting spelling checks, removing filters, or related terms
- 08Clear query button — an action inside or near the field to clear the current query with one tap
Resources that help you build this
8- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screens
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- Algolia SiteSearch · Five drop-in Algolia search and Ask AI experiences as shadcn registry blocks
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps
- ScreensDesign · Screen-recorded iOS app flows from ~1,500 apps, with revenue and ranking data attached