Hooks

Read scroll, collapse progress and focus on the UI thread.

All hooks must be used inside <Tabs.Container> (header, tab bar, and tab content all qualify). The shared-value hooks let you drive header animations — parallax, fade, progress bars — on the UI thread.

⚠ Scroll offsets go negative on overscroll

useCurrentTabScrollY() / useActiveTabScrollY() return the list’s raw contentOffset.y, which goes negative on iOS when the user bounces past the top (Android stays clamped at 0). If you map a scroll offset to a width, opacity, or progress, clamp the low end too — not just the high end. Setting bounces={false} hides the symptom, but clamping is the real fix and keeps the native bounce.

// ❌ negative offset → negative width; during bounce-back the bar can flash full
width: `${Math.min((scrollY.value / TOTAL) * 100, 100)}%`

// ✅ clamp both ends so overscroll reads as 0%
width: `${Math.max(0, Math.min((scrollY.value / TOTAL) * 100, 100))}%`

Reference

useHeaderScrollY() SharedValue<number>

Pixels the header has collapsed. For header animations (parallax, fade).

useCollapseProgress() SharedValue<number> 0..1

Normalized collapse progress. For normalized header animations.

useHeaderMeasurements() { top: SharedValue, height: number }

Header position + height. Migration-compatible with collapsible-tab-view.

useCurrentTabScrollY() SharedValue<number>

Raw offset of the tab you’re inside.

useActiveTabScrollY() SharedValue<number>

Raw offset of the focused tab, usable in the header.

useFocusedTab() SharedValue<string>

Focused tab name on the UI thread.

useAnimatedTabIndex() SharedValue<number>

Fractional pager position. For tab bar indicators.

useIsTabFocused(name) / useTabIndex() boolean / number

JS-state focus — re-renders the component on tab switch.