React Native - Disable nested scrolling

Question

I have a parent FlatList which, in its footer, can render another flatlist or a simple scroll view.

const renderFooter1 = () => {
   return <ScrollView> ... </ScrollView>;
}

const renderFooter2 = () => {
   return <FlatList ... />;
}

// Note: I am not doing this in real life, just an example for handling both possible footers
return (
   <FlatList 
      refreshControl={renderRefreshControl()}
      ListHeaderComponent={renderHeader()}
      ListFooterComponent={Math.random() * 10 > 0.5 ? renderFooter1() : renderFooter2()}
      showsVerticalScrollIndicator={false}
   />
);

The problem I am experiencing is that, sometimes, when scrolling down, the component which scrolls is the footer, and not the parent list.

How can I avoid that behavior?

man517 · Accepted Answer · 2021-10-16 02:48:40Z

1

You can add the prop scrollEnabled={false} to whichever FlatList you don't want to scroll.

answered Oct 16, 2021 at 2:48

man517

5696 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native - Disable nested scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related