React-Native another VirtualizedList-backed container

Question

After upgrading to react-native 0.61 i get a lot of warnings like that:

VirtualizedLists should never be nested inside plain ScrollViews with the same orient         


        

Answer 1

So I faced the same problem while using a picker-based component inside <ScrollView> and the one thing that helped me solve the problem was adding keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.

This is my code snippet.

<ScrollView keyboardShouldPersistTaps={true}> 
      <SelectionDD studentstatus={studentStatus}/>
      <SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>

Answer 2

The best way is to disable that warning because sometimes Flatlist need to be in ScrollView.

UPDATE RN V0.63 ABOVE

YellowBox is now changed and replace with LogBox

FUNCTIONAL

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}

UPDATE RN V0.63 BELOW

FUNCTIONAL

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}

Answer 3

If You use flatList inside the scrollView it gives warning which is annoying, so you can use 'map' like this -

<View>
    {dataList.map((item , index) => (
        <View>
           <Text>{item.name}</Text>
        </View>
    ))}
 </View>

Answer 4

Without hiding YellowBox you still can implement scroollable view inside scrollable view. You can use this library. It replace the default Scrollview from React Native.

Answer 5

The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated

By the way SafeAreaView doesn't work for me, the only way to solve is

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

The error disappears

Answer 6

In my opinion i can use map instead of FlatList. But in my case i wan't to show large list. Not using FlatList may cause performance issue. so i used this to suppress warning https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509