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.

[Tironzx]

import React, { useEffect, useState } from 'react'; import { useAppSelector, useAppDispatch } from 'store/hook'; import { SafeAreaView } from 'react-native-safe-area-context'; import { ScrollView, ImageBackground, Image, Modal, TouchableOpacity, Animated, PanResponder, GestureResponderEvent, PanResponderGestureState } from 'react-native'; import { DragSortableView } from 'react-native-drag-sort'; // import { Modal } from '@ant-design/react-native'; import MyStyleSheet from 'components/MyStyleSheet'; import { UIText, UITextInput } from 'components/Text/Texts'; import { Dimensions } from 'react-native'; import { NestableScrollContainer, NestableDraggableFlatList, ScaleDecorator, RenderItemParams } from "react-native-draggable-flatlist"

export const WINDOW_WIDTH = Dimensions.get('window').width;

export const WINDOW_HEIGHT = Dimensions.get('window').height;

const NUM_ITEMS = 10; function getColor(i: number) { const multiplier = 255 / (NUM_ITEMS - 1); const colorVal = i * multiplier; return rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal}); }

type Item = { key: string; label: string; height: number; width: number; backgroundColor: string; };

const initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) => { const backgroundColor = getColor(index); return { key: item-${index}, label: String(index) + "", height: 100, width: 60 + Math.random() * 40, backgroundColor, }; });

const Index: React.FC<{ navigation: any }> = ({ navigation }) => { const [data, setData] = useState(initialData);

const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => { console.log(666, item, drag, isActive); return ( <ScaleDecorator> <TouchableOpacity onLongPress={drag} disabled={isActive} style={[ styles.rowItem, { backgroundColor: isActive ? "red" : item.backgroundColor }, ]} > <UIText style={styles.text}>{item.label}</UIText> </TouchableOpacity> </ScaleDecorator> ); }; console.log('data', data); console.log('renderItem', renderItem); return ( <NestableScrollContainer> <NestableDraggableFlatList data={data} renderItem={renderItem} keyExtractor={(item) => item.key} onDragEnd={({ data }) => setData(data)} /> </NestableScrollContainer> ); };

const styles = MyStyleSheet.create({ rowItem: { height: 100, width: 100, alignItems: "center", justifyContent: "center", }, text: { color: "white", fontSize: 24, fontWeight: "bold", textAlign: "center", }, });

export default Index;

[bezenson]

I have the same issue when using NestableDraggableFlatList

[RobertWHurst]

As do I, doesn't seem to matter the arrangement of the nodes.

[TomCorvus]

Your example is not completed. You don't use NestableScrollContainer to fix this error. See below:

<ScrollView>
   <NestableScrollContainer>
      <NestableDraggableFlatList
         data={data.products}
         extraData={data.products}
         keyExtractor={(item: any) => `item-${item?.id}`}
         renderItem={(i: any) => renderItem(i)}
      />
   </NestableScrollContainer>
</ScrollView>

[karolsw3]

@TomCorvus Wrapping `NestableDraggableFlatList` with the `NestableScrollContainer` doesn't solve this problem for me

[efstathiosntonas]

Same here, no matter what I tried with the components reordering etc. the warning won't go away.

[liquidvisual]

The docs say all warnings will be disabled but they still persist with NestableScrollContainer. Is this feature actually safe to use?

From doc:

Note: When using NestableDraggableFlatLists, all React Native warnings about nested list performance will be disabled.

---

UPDATE: I give up, I'm temporarily disabling this error until I can migrate to a safer library. It looks like this issue has been around for a while.

Solution based on this thread about LogBox:

// place at top of app.js

if (__DEV__) {
  const ignoreWarns = ["VirtualizedLists should never be nested inside plain ScrollViews"];

  const errorWarn = global.console.error;
  global.console.error = (...arg) => {
    for (const error of ignoreWarns) {
      if (arg[0].startsWith(error)) {
        return;
      }
    }
    errorWarn(...arg);
  };
}

I'm going to check out the following libs until this gets addressed (no disrespect to the author):

react-native-draglist react-native-sortable-list react-native-drag-sort

[PaulThiberville]

Yo, i faced the same issue and solved it by wrapping NestableScrollContainer with a View

[efstathiosntonas]

@PaulThiberville can you give an example? By doing this below I still get the error:

 <View>
        <NestableScrollContainer>
          <NestableDraggableFlatList
            data={pollChoices}
            initialNumToRender={pollChoices.length}
            keyExtractor={(item) => String(item.id)}
            onDragEnd={({ data }) => setData(data)}
            onRelease={() => setScrollEnabled(true)}
            renderItem={renderChoices}
          />
        </NestableScrollContainer>
 </View>

[PaulThiberville]

        <View style={{ flex: 1 }}>
          <NestableScrollContainer>
            <DraggableFlatList
              data={socialLinks}
              onDragEnd={({ data }) => setSocialLinks(data)}
              keyExtractor={item => item.label + item.id}
              renderItem={SocialItem}
              dragHitSlop={{
                right: parseInt(theme.space.m, 10 * 2) + 50 - width,
              }}
            />
          </NestableScrollContainer>
        </View>

This code works for me on android @efstathiosntonas I use NestableDraggableFlatList if i have multiple FlatList

[bezenson]

I can't understand what you are discussing here. If you open source code you will see that NestableScrollContainer is using ScrollView and DraggableFlatList is using FlatList (which is actually a wrapper around VirtualizedList). As a result you will get VirtaulizedList inside ScrollView, which is denied in React Native.

I don't know, how wrapper View will help here. I guess you will still get this error.

This part of library should be rewritten by author or someone else.

[oldo]

I managed to resolve this issue by following this comment on SO: https://stackoverflow.com/a/65949323/2987737

Basically just add any content above and below the draggable list into ListHeaderComponent & ListFooterComponent

[sentry0]

I managed to resolve this issue by following this comment on SO: https://stackoverflow.com/a/65949323/2987737

Basically just add any content above and below the draggable list into ListHeaderComponent & ListFooterComponent

This is the right answer for me for this issue and the issues I was having iOS in general - https://github.com/computerjazz/react-native-draggable-flatlist/issues/477#issuecomment-1712396814

[Arunlalpp]

// Place this useEffect in the top of the page // 

// It will remove the warning message //

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