Question 266868 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Child Flatlist Scrolls Parent Flatlist when it reaches the end

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    You can use the nestedScrollEnabled prop of the parent FlatList. Setting nestedScrollEnabled to true will allow the inner FlatList to handle its own scrolling behavior without affecting the parent’s scroll.

    const renderItem = ({ item }: { item: any }) => {
  return (
    <View style={{ width: screen.width }}>
      <FlatList
        horizontal
        data={item.data} // Assuming you have a 'data' property in each item
        renderItem={({ item }) => (
          // Render your individual items here
        )}
        keyExtractor={(item) => item.id.toString()}
        style={{ width: screen.width }}
      />
      {/* OtherComponents */}
    </View>
  );
};

<FlatList
  pagingEnabled
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={(item) => item.id.toString()}
  nestedScrollEnabled={true} // Enable nested scrolling
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search