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?