React-Native flatlist VirtualizedLists should never be nested inside plain ScrollViews

Question

Hy, I'm new in react-native. I'm stuck in the flatlists and scrollView. Here's the structure of my code:

<View>
    <ScollView>
        <View>
            <SafeAreaView>
                <FlatList/> -- Horizontal Scroll --
            </SafeAreaView>
        </View>
        <View>
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll --
        </View>
        <View>
            <FlatList/> -- Horizontal Scroll -- //Issue        
        </View>
    </ScollView>
</View>

So the issue flatlist mentioned above like //Issue. The issue is that when I add the flatlist which is need to scroll in vertical format its not scrolling and one more thing this flatlist is displaying at the middle of screen so to start the working I add the height and its start working but the functionality I want is that When I scroll the screen should move to down. So do this i add the scrollView as you in above structure but when I add scrollView I remove the height it start working perfectly but displaying that error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

So to solved this I try:

1. nestedScrollEnable={true}
2. scrollEnabled
3. giving height
4. When I start working on this app I also face same issue then I get the solution using ListHeaderComponent and ListFooterComponent. But now my already code in Header and Footer component.

but I can't solve. If some have some idea then share it. I would appreciate your favor

Answer 1

As per the React-Native, it is not ideal to use FlatList inside the ScrollView. What you can do instead is, to use nested scroll view. The only thing which is going to be changed is you have to do .map(), and populate the data inside the ScrollView inspite of renderItem from FlatList, and every thing will else will work just fine.

• Use flexGrow: 1, inside the ScrollView, then no height is required.

Your Structure now should be:

<View style={{flex: 1}} >
    <ScollView style={{flexGrow: 1}} 
     nestedScrollEnabled={true}>
        <View>
            <SafeAreaView>
                <ScrollView horizontal 
                style={{width: '100%', height: 'your_height'}}>
                  {data.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
                </ScrollView> -- Horizontal Scroll --
            </SafeAreaView>
        </View>
        <View>
        </View>
        <View>
            <ScrollView horizontal 
            style={{width: '100%', height: 'your_height'}}>
                  {anotherData.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
            </ScrollView> -- Horizontal Scroll --
        </View>
        <View>
            <ScrollView horizontal
            style={{width: '100%', height: 'your_height'}}>
                  {newData.map(item, index) => (
                    <View key={index}>
                      // Your component
                    </View>
                  )}
            </ScrollView> -- Horizontal Scroll --      
        </View>
    </ScrollView>
</View>