This is only an implementation of tabview with collapsible header.
This is just a simple example implementing a tabview with collapsible header. Here we use react-native-tab-view in our implemetation.
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
.0.62.2
in this example, some breaking changes may lead to crashes.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:
CollapsibleTabView
: provides the most basic workable example without scrollable header and pull-to-refresh.HeaderScrollableTabView
: provides scrollable header without pull-to-refresh.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 Android