Introduction · Fluid Tabs

Fluid Tabs brings your header, tab bar, and scrollable pages into one coordinated experience. Use it to build profiles, feeds, galleries, and any screen where content should keep moving naturally.

The package is called react-native-collapsible-fluid-tabs. It works on iOS, Android, and React Native Web.

Get set up →Install the library and connect its native dependencies.Build your first screen →Start with a complete, minimal two-tab example.Try the example →Scroll and switch tabs in an interactive web preview.Explore the API →Every public prop, taken from the library types.

How the pieces fit

A Tabs.Container coordinates the header, pager, and scroll positions. Each Tabs.Tab identifies a page. Inside that page, render one of the library's scrollable adapters.

<Tabs.Container renderHeader={() => <ProfileHeader />}>
  <Tabs.Tab name="posts" label="Posts">
    <Tabs.FlatList data={posts} renderItem={renderPost} />
  </Tabs.Tab>
  <Tabs.Tab name="about" label="About">
    <Tabs.ScrollView>
      <About />
    </Tabs.ScrollView>
  </Tabs.Tab>
</Tabs.Container>

This illustrates the composition. The quick start defines all the components and data.

What comes with it

Collapsing and pinned headers that make room for content.
A gesture-driven pager with horizontal swipes and programmatic navigation.
Synchronized scroll state across pages.
An adaptive pill tab bar that can switch to a scrollable layout.
FlatList, ScrollView, LegendList, and FlashList adapters.
Animation values and hooks for your own tab bar and header effects.

Make it your own

Start with the defaults. When your screen needs more, customize the headers, style the tab bar, or choose a different list.

Fluid Tabs is open source under the MIT license. Contributions and issue reports are welcome on GitHub.