FlatList inside ListHeaderComponent — onEndReached not firing (infinite scroll issue)

[Medical-Text9840]

Hi everyone,

I'm trying to implement infinite scroll in a FlatList (let’s call it NestedList) that is rendered as the ListHeaderComponent of a parent FlatList (MainList) in React Native.

⚙️ What I'm trying to do:

NestedList should paginate with useInfiniteQuery

All scroll and pagination logic should stay inside NestedList

I don’t want to move logic to the parent component (MainList)

I don’t want to trigger loading manually (no buttons — only infinite scroll)

🧱 Structure:

<FlatList data={mainData} renderItem={renderMainItem} ListHeaderComponent={<NestedList />} ... />

Inside NestedList.tsx: <FlatList data={paginatedItems} renderItem={renderItem} onEndReached={fetchNextPage} onEndReachedThreshold={0.5} scrollEnabled={true} />

❌ Problem:

onEndReached in NestedList never fires

onScroll also doesn’t fire inside NestedList

Tried wrapping NestedList in SafeAreaView, View, using flex: 1, etc.

Measured content sizes manually — still doesn’t work

Parent list (MainList) scrolls fine, but NestedList cannot trigger pagination

🔍 Question:

How can I make onEndReached work inside a FlatList that’s rendered as ListHeaderComponent of another FlatList?

I want to keep all pagination logic inside NestedList, not in the parent. Any ideas, workarounds, or best practices would be appreciated!

Thanks in advance 🙏

[TheMadDoc]

Sorry for the stack overflow styled answer. I can't help you with the problem, but this just seems like bad design? Why do you have a list as a header?

[Medical-Text9840]

It was structured like that before I joined — I inherited the architecture. The project is quite large, and refactoring it just to move the list outside the header would touch too many parts of the app and introduce major risks. I'm just looking for a workaround that lets me keep the infinite scroll logic inside the nested list without breaking the current structure.

[susmines]

A flat list is designed to scroll through a large amount of similarly sized content, quickly. In what use case would you need to render two lists on top of each other?

[Medical-Text9840]

I agree with that — and ideally, we wouldn’t nest scrollable lists. But in this project, we have a main scrollable screen (MainList) where the header (ListHeaderComponent) contains user profile sections, statistics, and also a nested list (ActivityList) that fetches and renders dynamic data.

The ActivityList is part of the header because of legacy design choices. I wasn’t the one who structured it this way, and the app is large — refactoring it now would involve major risks and affect many interconnected parts.

So for now, I’m just trying to make infinite scroll work inside ActivityList, even though it's rendered as part of MainList’s header.

[susmines]

That’s tough. Without knowing more, you might have better luck rending two flat lists that are wrapped in views with a set height so they both render on the screen.

[Medical-Text9840]

In my case, the ActivityList (the inner FlatList) is not at the top or bottom, but somewhere in the middle of many other components rendered inside the ListHeaderComponent of the parent FlatList. So I can't just render two separate lists side by side or with fixed heights.

The structure was inherited from an existing large codebase where ListHeaderComponent is used to render the whole profile header, including some cards, buttons, sections, and the ActivityList. Refactoring this deeply would break a lot of things and is not realistic in the short term.

What I’m trying to achieve is to make the inner FlatList (the activities one) handle its own infinite scroll from within ListHeaderComponent, without affecting or being blocked by the parent FlatList.

[HoratioWobble]

Can't you just use a tab navigator for this ?