Introduction

A collapsible header tab view for React Native with per-tab scroll memory and a jump-free header.

Demo · example/Basic

react-native-collapsible-tab gives you a collapsing header above a set of swipeable tabs. Each tab owns its scroll position, and the header never jumps when you switch tabs — because the header position is decoupled from tab scroll offsets.

Built on react-native-reanimated, react-native-gesture-handler and react-native-pager-view. All animation runs on the UI thread. Works with Reanimated 3 and 4, old and New Architecture (the FlashList adapter requires New Architecture), and Expo (including Expo Go).

import { Tabs } from 'react-native-collapsible-tab';

function Profile() {
  return (
    <Tabs.Container
      renderHeader={() => <ProfileHeader />}  // measured automatically
      minHeaderHeight={insets.top}            // stays visible when collapsed
      lazy                                    // mount tabs on first focus
      snapThreshold={0.5}                     // optional: snap open/closed
    >
      <Tabs.Tab name="posts" label="Posts">
        <Tabs.FlatList
          data={posts}
          renderItem={({ item }) => <Post post={item} />}
          keyExtractor={(item) => item.id}
        />
      </Tabs.Tab>
      <Tabs.Tab name="media" label="Media">
        <Tabs.ScrollView>
          <MediaGrid />
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>
  );
}

The header is measured automatically — there is no headerHeight prop. Omit renderHeader entirely for a plain pinned tab bar.