Pull Search

Prerequisites

This animation is built on the following libraries. expo install pins the versions that match your SDK, and the CLI tells you exactly which ones are missing when you add the component.

npx expo install react-native-reanimated expo-blur expo-glass-effect expo-haptics expo-symbols react-native-safe-area-context

Install

npx @rslab/cli add pull-search

Usage

const [query, setQuery] = useState('');

<PullSearch placeholder="Search apps" query={query} onQueryChange={setQuery}>
  <YourFilteredList query={query} />
</PullSearch>;

How it works

• Overscroll as progress. The scroll view's negative contentOffset.y maps to a 0..1 pull value. The pill's opacity, scale and translateY derive from it, so the gesture drives the reveal directly, no spring involved.
• Two-stage reveal. During the pull the pill is a compact centered loupe bubble. Crossing the threshold expands it to the full-width field, and the loupe cross-fades into the input row. One light haptic fires exactly at the threshold.
• Keyboard docking. useAnimatedKeyboard streams the keyboard height every frame and the pill rides it pixel-perfect, including the interactive drag dismiss.
• Real Liquid Glass. expo-glass-effect on iOS 26, blur fallback everywhere else. Two device-only traps: animating opacity on the pill kills UIGlassEffect on a real iPhone (fine in the simulator), so the pill hides by sliding below the screen edge. And overflow: hidden on the container rasterizes the glass, the radius lives on the GlassView itself.
• Typing stays native. The TextInput is uncontrolled, the query is lifted through onChangeText only, so fast typing never drops a character.

Tuning

• PULL_THRESHOLD (90): pull distance to arm the search
• OPEN_EASING: calm bezier (0.32, 0.72, 0, 1), no overshoot on purpose
• Pill metrics in styles.pill (height 52, radius 26, margins 16)