This is just a simple example implementing a tabview with collapsible header. Here we use react-native-tab-view in our implemetation.

• Here I've upgraded react-native to 0.68.2 ,and react-native-tab-view to 3.1.1.
• react-native-reanimated and react-native-gesture-handler have been removed by react-native-tab-view.
• hermes is default enabled on both iOS and Android.
• No changes to example code.
• No furthur updates for old version.

• Be noticed that we are using react-native 0.62.2 in this example, some breaking changes may lead to crashes.
• Accroding to this post, getNode() is deprecated. As a result, before 0.62.0 you should use ref.getNode() in order to get correct ref for the Animated component.

There are three examples under src folder:

1. CollapsibleTabView: provides the most basic workable example without scrollable header and pull-to-refresh.
2. HeaderScrollableTabView: provides scrollable header without pull-to-refresh.
3. PullRefreshTabView: provides both scrollable header and pull-to-refresh.

It is critical to give the correct paddingTop and minHeight of contentContainerStyle of the FlatList

 contentContainerStyle={{
 ...
 paddingTop: HeaderHeight + TabBarHeight,
 minHeight: windowHeight - SafeStatusBar + HeaderHeight,
 }}

iOS ios Android Android