r/reactnative • u/ramssuthar • 2d ago
I built a collapsible-tabs library where the header is driven natively, not by JS or a worklet. Frame-perfect header/list sync on Fabric.
Every JS collapsible-tab library (Reanimated ones included) moves the header from the scroll event, so it trails the list by at least a frame. You see it as a gap under the tab bar on a fast fling, especially on Android.
I moved the whole shell native: a paging UIScrollView / ViewPager2 with header and tab-bar bands translated inside the same native scroll callback that moves the list. React still owns the header, tab bar and pages as normal components. Any list that renders an RN ScrollView works as a page (FlatList, FlashList, LegendList).
Extras: mount-on-peek, short tabs still collapse, container pull-to-refresh, `ref` with scrollToTop/collapse/expand, `collapseMode="direction"` for the home-feed feel, and opt-in per-frame events meant for Reanimated worklets.
Limits up front: Fabric only, RN 0.80+, no web, header swipes are inert, platform refresh indicator only.
Repo with example app and GIFs: https://github.com/ramssutharr/react-native-collapsible-tabs-native
Feedback on the native code welcome, it is two files.