Child Flatlist Scrolls Parent Flatlist when it reaches the end

Question

I have following implementation in my RN component:

const renderItem = ({item}:{item: any}) => {
  return (
   <>
    <FlatList 
      horizontal
      renderItem={renderItem}
      data={data}
      keyExtractor={item => item.id.toString()}
      style={{width: screen.width}}
    />
    <...OtherComponents/>
   </>
  )
}

<FlatList 
  pagingEnabled
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
/>

The thing is that each child in the parent Flatlist is styled to take full width of the screen so when i scroll the data from parent i can see the other lists (getItemLayout and viewability configs are ignored here).

The problem arises when I get to the end of the child flatlist: it starts to scroll the parent too. How to prevent it? Using states on callbacks like onBeginDrag and others does not work.

here is the sample snack: https://snack.expo.dev/C_F6ci0g3?platform=ios

similar question: Nested ScrollView block parent scroll when started scrolling in child

Answer 1

I was able to solve it by adding a horizontal (nested) list as <ListHeaderComponent />. It does not scroll the parent list even when it reaches the end.