Headers

The collapsing header

Pass your content through renderHeader. The container measures it and uses that height to coordinate collapsing and list spacing.

<Tabs.Container
  renderHeader={() => <ProfileHeader />}
  estimatedHeaderHeight={240}
  containerStyle={{ backgroundColor: '#fff' }}
>
  {/* Your Tabs.Tab pages */}
</Tabs.Container>

estimatedHeaderHeight is an optional first-frame hint. The measured height wins after layout. Use a realistic estimate when you want to reduce initial spacer movement.

Keep a bar pinned

Use renderPinnedHeader for content that should remain visible:

renderPinnedHeader={({ topInset }) => (
  <View style={{ paddingTop: topInset, backgroundColor: '#fff' }}>
    <View style={{ height: 48, justifyContent: 'center', paddingHorizontal: 16 }}>
      <Text>Profile</Text>
    </View>
  </View>
)}

The example above uses React Native's View and Text. Apply the supplied topInset as padding inside your pinned header. The container reserves the space but does not pad that content for you.

pinnedHeaderHeight excludes the safe-area inset. Omit it to measure automatically; provide a known value, such as 48, to avoid that initial measurement.

The container reserves the device's top safe-area inset by default, even without a pinned header. Set topInset={0} when an ancestor already provides that space. This changes the reserved top space; it does not change the bottom safe-area padding in the list adapters.

Animate the header content

Both header render callbacks receive scrollY, headerHeight, topInset, and pinnedHeaderHeight. Use those values inside your own component's Reanimated hooks. Do not call hooks directly inside a render callback.

For overlays inside a tab, useCollapsibleHeader exposes collapseProgress and contentTop. contentTop is the fixed chrome height when collapsed; it excludes the collapsing header.

Header gestures

headerScrollEnabled controls vertical dragging on the header and tab bar. swipeGestureTopInset controls where a horizontal pager gesture can begin. The automatic inset follows the currently visible chrome; 0 allows paging from the full page height.

Header dragging drives the active list programmatically and respects its scrollEnabled setting. The pinned header remains fixed and does not start a vertical header drag. With reduced motion enabled, releasing a header drag does not start a momentum glide.

See Tabs.Container for the current prop definitions.