By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

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) => {
console.log(666, item, drag, isActive);
return (
<TouchableOpacity
onLongPress={drag}
disabled={isActive}
style={[
styles.rowItem,
{ backgroundColor: isActive ? "red" : item.backgroundColor },
{item.label}
console.log('data', data);
console.log('renderItem', renderItem);
return (
<NestableDraggableFlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.key}
onDragEnd={({ data }) => setData(data)}

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;

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>
          
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
  code500g, vigneshmr, olliethedev, Anixed, bohdan-nitro, itsramin, nextgenprayag, aztax-devloper, Veeeeksi, NhatTien1993, and 7 more reacted with thumbs up emoji
  bmitioglov, EstebanV23, i-amsherkhan, Veeeeksi, NhatTien1993, and JmarkMunda reacted with hooray emoji
    All reactions
          
@PaulThiberville can you give an example? By doing this below I still get the error:
        <NestableScrollContainer>
          <NestableDraggableFlatList
            data={pollChoices}
            initialNumToRender={pollChoices.length}
            keyExtractor={(item) => String(item.id)}
            onDragEnd={({ data }) => setData(data)}
            onRelease={() => setScrollEnabled(true)}
            renderItem={renderChoices}
        </NestableScrollContainer>
 </View>




    

            <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>

// Place this useEffect in the top of the page // 
// It will remove the warning message //
 useEffect(() => {
     LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
  }, []);