Native Collapsible Tabs for React Native

Frame-perfect by construction

The header is translated inside the same native scroll callback that moved the list. There is no second update path to fall behind.

Ordinary React children

Your header, tab bar and pages are plain components. Native owns only geometry and gestures. Any list that renders an RN ScrollView works as a page, FlashList and LegendList included.

Per-frame events for worklets

Swipe position, band offset and list offset are opt-in events meant for Reanimated useEvent, read on the UI thread. Nothing per frame reaches the JS thread unless you ask for it.

The long tail handled

Pages pre-aligned during swipes, mount-on-peek, short tabs that still collapse, container pull-to-refresh, an imperative ref, presses that survive a scroll.

Measured, not asserted

0 % janky frames on a mid-range 120 Hz Android phone with the JS thread 60 % busy. The method and the device are in the benchmarks.

Fabric only, MIT

React Native 0.80 and up with the New Architecture. iOS and Android. In production on the Currently iOS app.

Why this library uses a native implementation

In implementations where the list moves natively while the header is updated through a separate animation path, fed by the scroll event, the two updates can become visibly unsynchronised during fast flings, particularly under JS-thread load. It shows as a gap opening between the tab bar and the content, most often on Android and on iOS whenever the JS thread is busy.

This library removes the second update path instead of trying to keep up with it: the header is moved inside the same native scroll callback that moved the list, so there is nothing to fall behind. Read how it works for the mechanism, the comparison with JS and Reanimated approaches, the FlashList guide, the benchmarks, and what it does not do before choosing it.

yarn add react-native-collapsible-tabs-native
cd ios && pod install

React Native Collapsible TabsNative scrolling that moves the header and list in the same frame.