VirtualizedList should never be nested inside plain scroll view in React native

Question

I know this question is asked many times, I have searched and read all the solutions. Most of them suggest to not nest it inside ScrollView rather to use SafeAreaView or some alternative. But my question is a bit different.

I have a Home page in my react native app. Which consists of a header, search bar below that and a hero image or carousel. Below that a FlatList component which shows two columns of rendered items basically cards.

Sample Image

In the above image, the orange rectangle is the area i want to make scrollable and the red one is the FlatList.

The code is like:

<Header>
<SearchBar>
<ScrollView>
  <Hero>
  <FlatList>
</ScrollView> 

What i have done. I have wrapped the Hero Carousel and FlatList components inside the ScrollView so that all them are scorllable, becuase I want everything other than Header and search-bar to be scrollable. And unlike web development, when the height of the view increases such that it overflows, there is no scrolling, if i don't use ScrollView. And since, I am new to React native. I don't know any other way.

Hence, I am getting this VirtualizedList should never be nested inside plain ScrollView error. I have tried:

<ScrollView>
  ...
  ...
  <View> or <SafeAreView>
    <FlatList>
  </View> or </SafeAreView>
</ScrollView>

I have even tried nestedScrollEnabled props in FlatList, but nothing works. The error is still there. I am new to React native. So, please try to describe your answer a bit if possible.

Answer 1

I was having a same issue until I came across an almost complete solution in a very helpful comment on one of the GitHub issues for the react-native project:

found solution here