How to implement Instagram-style Profile Layout (header + horizontal scroll of vertical lists)

[rafaelderolez]

Implementing Instagram-style Profile Layout (Header + Horizontal Scroll of Vertical List)

Overview

I'm trying to recreate the layout from Instagram's profile view:

• A header at the top
• Multiple vertical lists that each scroll independently
• Ability to swipe/scroll horizontally between these lists

It should work like Instagram's profile tabs: swipe between different content views (Posts, Reels, etc) with the header on top.

Visual Reference

What I've tried

I tried using a FlashList with a ScrollView wrapper for horizontal scrolling:

<FlashList
  data={['dummyHorizontalItem']}
  renderItem={HorizontalScroller}
  keyExtractor={(_, i) => i.toString()}
  ListHeaderComponent={<HeaderComponent />}
  contentContainerStyle={{
    flexGrow: 1,
  }}
/>

function HorizontalScroller() {
  return (
    <ScrollView width="100%" horizontal flex={1} height={device_height_here}>
      <View width={device_width_here}>
        {placeholder}
      </View>
      <View width={device_width_here}>
        {placeholder}
      </View>
    </ScrollView>
  );
}

I feel like I'm missing something obvious here, so any help is most welcome at this point.

Thanks! ✌️