NestableScrollContainer with NestableDraggableFlatList, VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

[lunajing]

trafficstars

I use NestableScrollContainer and NestableDraggableFlatList exactly as in the example, but I get the following scrollview nesting error in console：

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.

my code:

<NestableScrollContainer>
  <NestableDraggableFlatList
    scrollEnabled={false}
    data={data1}
    renderItem={renderItem}
    keyExtractor={(index) => `${index}`}
    onDragEnd={({ data }) => setData1(data)}
  />
  <NestableDraggableFlatList
    scrollEnabled={false}
    data={data2}
    renderItem={renderItem}
    keyExtractor={(index) => `${index}`}
    onDragEnd={({ data }) => setData2(data)}
  />
  <NestableDraggableFlatList
    scrollEnabled={false}
    data={data3}
    renderItem={renderItem}
    keyExtractor={(index) => `${index}`}
    onDragEnd={({ data }) => setData3(data)}
  />
</NestableScrollContainer>

Platform & Dependencies

• react-native-draggable-flatlist version: 3.1.2
• Platform: iOS/Android
• React Native: 0.69
• Reanimated version: 2.8.0
• React Native Gesture Handler version: 2.2.1

[LouisWT]

+1

[isuru102]

I am getting the same error

[lunajing]

Has anyone paid attention to this issue?

[JaRoMasterDev]

I'm getting the same error, but it doesn't seem to stop my app from running. Did anyone find a solution for this other than ignoring the error?

[computerjazz]

yeah, you're gonna just have to ignore if you want to nest flatlists within scrollviews. The issue is that if you want flatlists-within-scrollables, virtualization will no longer work, since the list will expand to fill all available space.

[JaRoMasterDev]

Is there a way to ignore that warning with LogBox?

[inapeace0]

+1

[goughjo02]

try nesting the NestableScrollContainer in a view as in their example https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/Example/screens/NestedScreen.tsx . it got rid of the error for me

[EstivenGonzalez]

+1