ERROR IN React Native - VirtualizedLists should never be nested inside plain ScrollViews with the sa-CodePudding

I am new in react native.

My question is pretty simple: I have this -> 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. I need this ScroolView because I want to scrool header also, not only FlatList. Any suggestion how to solve? Here is my code

    <ScrollView style={styles.container}>
            <Header firstHeader="My Collegues" secondHeader="All your collegues" backgroundImage="Blue" />
            <View style={styles.content}>
                <View style={styles.filterCompany}>
                    <TouchableOpacity style={styles.buttonFilter}>
                        <Text style={styles.companyName}>Hello B</Text>
                        <AntDesign style={styles.iconButton} name="downcircleo" size={20} color="white" />
                    </TouchableOpacity>
                </View>
                <View style={styles.safeAvatar}>
                    <FlatList
                        contentContainerStyle={{ flex: 1 }}
                        numColumns={3}
                        data={pomArray}
                        renderItem={renderItem as any}
                    />
                </View>
            </View>
        </ScrollView>

CodePudding user response：

I had a similar problem using a DropDownPicker inside a ScrollView. I put overScrollMode inside the ScrollView and it solved the problem. Try it like this and tell me if it worked.

<ScrollView overScrollMode>
...
<ScrollView/>

CodePudding user response：

The reason you are getting this is that behind the scene, both ScrollView and Flatlist use VirtualizedList to render their content. In cases Like yours, It's best to Delete the main Scroll View and turn the main headers into a separate component which you can then add to your Flatlist using the ListHeaderComponentprop. The final code would look sth like this:

const FlatListHeader = () => (
  <Header firstHeader="My Collegues" secondHeader="All your collegues" backgroundImage="Blue" />
  .
  .
  .
)

const App = () => {
  .
  .
  .
  <Flatlist contentContainerStyle={{ flex: 1 }} numColumns={3} data{pomArray} renderItem={renderItem as any} ListHeaderComponent={FlatlistHeader} />
  .
  .
  .

}

You can learn more about flatlist header and footers Here