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! ✌️