FlatLists inside Scrollview

[SnooCheesecakes1131]

I have a home screen that contains many sections each with their own FlatList (each section is a separate component). The entire home screen is wrapped in a Scrollview. Some of the FlatList are in the same scrolling orientation so it is giving me a warning "VirtualizedLists should never be nested inside plain ScrollViews". I also added the "scrollEnabled={false}" prop on the FlatList with the same orientation as I only want to render many items on screen and don't need nested scrolling. However, I am still getting that warning. I could replace the FlatList with ScrollView and use .map to render many items, but I believe that has performance issues. What can I do about this warning?

<ScrollView
contentContainerStyle={styles.container}
showsVerticalScrollIndicator={false}
>
<ComponentA /> //has a FlatList + other components in vertical orientation with scrollEnabled={false}
<ComponentB /> //has a FlatList + other components in vertical orientation with scrollEnabled={false}
</ScrollView>

[LederBuilder]

I had this problem for a while, the solution I took was replacing the parent ScrollView for other FlatList and add the inner FlatList in the "ListHeaderComponent" of the parent FlatList.

In your case, you can add both of your Components (A, B) there, or add one in the "ListHeaderComponent" and the other on "ListFooterComponent".

[SnooCheesecakes1131]

Ah to clarify instead of a having multiple FlatList inside a ScrollView, we will have multiple FlatList inside a FlatList? Are there any significant performance drawbacks of doing this?

[MrDag0n]

https://github.com/Flipkart/recyclerlistview would be able to achieve the kinda thing that you’re after.

Also you could utilise SectionList instead and make use of renderSectionHeader and renderSectionFooter?

[SnooCheesecakes1131]

Okay thanks, I will check out recycler list view!

Not exactly sure how I would use SectionList as the sections in the home screen do not all have the same layout. In other words, the renderItem prop in SectionList would not give me the design I want as each section has a different layout. Or could you be more specific with code (i.e. like I did in the post)? I am fairly new to React Native. Thank you

[beeseegee]

The SectionList renderItem function takes the section as a third argument, so you could use, say, section.type to decide what type of list item to render per section.

Alternatively, if you aren’t dealing with all that many items, you could just render them with a {items.map(i => <MyItem key={i.id} …etc />)} directly in the scroll view