Tabs with FlatLists inside ScrollView - like Instagram or Twitter profile pages

Question

I would like to have a set of tabs that each have a FlatList inside a ScrollView. This is similar to the layout of Instagram or Twitter.

I am

Answer 1

Probably you should work with Animated api to handle the translateY of the content of TabView and the header.

For example:

<View>
   <Header />
   <TabView /> //With lists
<View>

Your Header should have a position: 'absolute' and a fixed height, and your TabView should have a paddingTop transparent to match the Header height. Once you scroll one or other list, you should move the Header with transform: [{ translateY }] and your TabView too, so it can match the position of the Header until it clamps.

EDIT:

Sorry, didn't saw your update about the expo example.

Your expo example has some errors. For example if you scroll one list (to hide the header) your second list will have a blank space.

You should set the height of the list (TabView containing the lists) to be the window height - header size clamped. With this you can set translateY of the tabview to be the size of the header. Once you start scroll up, you should translateY both the header and the tabview until it clamps. From that point you should only scroll the list.

Another solution would be increase the height of tabView onScroll to match the translateY of header

Answer 2

This is one way to solve the issue:

<ScrollView
          showsVerticalScrollIndicator={false}
          stickyHeaderIndices={[1]} //give any view index which you wana stick
          >
          <Header1 />
          <TabBar />
          <ViewPager
            ref={viewPagerRef}
            style={{
              flexGrow: 1,
            }}
            scrollEnabled={false}
            initialPage={0}
            orientation="horizontal">
            <Page1 key="1" />
            <Page2 key="2" />
            <Page3 key="3" />
          </ViewPager>
        </ScrollView>