suiss/uim · Interaction

Search Reveal

A search field hidden above a scrolling list that appears when the user pulls the list down.

Search Reveal is an open-source mobile interaction from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Search Reveal on iOS in light mode

SearchReveal is a scroll view that starts scrolled just past its SearchRevealField, so the list shows first and the field is out of view. Pulling down reveals the field, which fades in as it appears, and the scroll snaps either fully open or fully hidden.

Focusing the field scrolls it into view. While there is a query, snapping is turned off so the field stays visible. Use it for notes, mail or settings lists where search should be close but not take space.

Installation

$ pnpm dlx @esuiss/uim@latest add search-reveal

The CLI also adds what it builds on: Icon.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets

  1. Add the pieces it builds on: Icon.

  2. Copy the source into components/interactions/search-reveal.tsx:

uniwind/components/interactions/search-reveal.tsx
import { cn } from "cn"
import { MagnifyingGlassIcon, XCircleIcon } from "phosphor-react-native"
import * as React from "react"
import {
  type LayoutChangeEvent,
  Pressable,
  type ScrollView,
  type ScrollViewProps,
  TextInput,
  View,
  type ViewProps,
} from "react-native"
import Animated, {
  type SharedValue,
  useAnimatedRef,
  useAnimatedScrollHandler,
  1. Update the import paths to match your project.

Usage

import { SearchReveal, SearchRevealField, SearchRevealContent } from "@/components/interactions/search-reveal"
<NotesExample count={12} />

Put a SearchRevealField first, then the list inside a SearchRevealContent, all inside SearchReveal. The field is controlled: pass value and update it in onValueChange, then filter your list with it.

SearchRevealContent is at least as tall as the scroll view, so the field can be hidden even when the list is short. Other ScrollView props, except onScroll, pass through to SearchReveal, and other TextInput props pass through to the field.

Examples

Short list

A three-item list that still hides the field.

iOS
Search Reveal (short list) on iOS in light mode

With query

Starts with a query, so the field is visible and the list is filtered.

iOS
Search Reveal (with query) on iOS in light mode

API Reference

SearchReveal

The scroll view that hides and reveals the field.

ExtendsScrollViewProps

SearchRevealField

The search input with a clear button.

ExtendsReact.ComponentProps<typeof TextInput>
PropType
About
The current query.
Type
string
Default
required
About
Called with the new query.
Type
(value: string) => void
Default
required

SearchRevealContent

The list area, at least one screen tall.

ExtendsViewProps

Accessibility

  • The input has the searchbox role and is labelled by placeholder.
  • The clear button is labelled Clear search and returns focus to the input.

Notes

  • The field uses bg-control with label-secondary placeholder and icons.
  • Autocorrect and autocapitalization are off, and the return key reads search.
  • Taps on the list work while the keyboard is open.