Collapsing Glass Tab Bar

A floating navigation surface that condenses into an active-tab pill as a feed moves.

How it works

1. useCollapsingTabBarScroll exposes a UI-thread scroll handler for an Animated.ScrollView or Animated.FlatList, plus its shared scroll value.
2. The bar width, height, tab opacity, and search control derive from that value.
3. A spring-driven lens follows the selected tab.
4. A single blur target keeps Android blur efficient.

Install

npx expo install expo-blur expo-linear-gradient react-native-reanimated

Usage

const { onScroll, scrollY } = useCollapsingTabBarScroll();
<Animated.FlatList onScroll={onScroll} scrollEventThrottle={16} />
<CollapsingGlassTabBar scrollY={scrollY} onChange={setTab} />

The handler returned by useCollapsingTabBarScroll must be attached to a Reanimated Animated.ScrollView or Animated.FlatList, not the corresponding plain React Native component.

Props

Compatibility

Expo SDK 57, React Native 0.86, and Reanimated 4. iOS, Android, and web are included; native device verification is pending.

Accessibility

Tabs use the tab role and selected state. Reduced motion switches spring transitions to direct state changes.