NestableDraggableFlatList not working inside react-navigation/material-top-tabs

[JcbPrn]

Describe the bug I am trying to use NestableDraggableFlatList inside react-navigation/material-top-tabs. The drag and drop freezes and the elements don't move. Everything works fine when using the normal DraggableFlatList in MaterialTopTabs. The NestableDraggableFlatList also works when removing the MaterialTopTabs around it.

To Reproduce Use NestableDraggableFlatList directly inside a MaterialTopTabs navigation screen.

const Tab = createMaterialTopTabNavigator<ProfilesSettingsTabs>();

export function FlatList() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="DraggableFlatList" component={NestedDraggableListScreen}/>
    </Tab.Navigator>
  );
}

import React, { useState, useCallback } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

import {
  RenderItemParams,
  ScaleDecorator,
  ShadowDecorator,
  NestableScrollContainer,
  NestableDraggableFlatList,
} from "react-native-draggable-flatlist";

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

export const mapIndexToData = (_d: any, index: number, arr: any[]) => {
  const backgroundColor = getColor(index, arr.length);
  return {
    text: `${index}`,
    key: `key-${index}`,
    backgroundColor,
    height: 75,
  };
};

export type Item = ReturnType<typeof mapIndexToData>;

const NUM_ITEMS = 6;
const initialData1 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
const initialData2 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);
const initialData3 = [...Array(NUM_ITEMS)].fill(0).map(mapIndexToData);

function NestedDraggableListScreen() {
  const [data1, setData1] = useState(initialData1);
  const [data2, setData2] = useState(initialData2);
  const [data3, setData3] = useState(initialData3);

  const renderItem = useCallback((params: RenderItemParams<Item>) => {
    return (
      <ShadowDecorator>
        <ScaleDecorator activeScale={1.25}>
          <RowItem {...params} />
        </ScaleDecorator>
      </ShadowDecorator>
    );
  }, []);

  const keyExtractor = (item) => item.key;

  return (
    <View style={styles.container}>
      <NestableScrollContainer>
        <Header text="List 1" />
        <NestableDraggableFlatList
          data={data1}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          onDragEnd={({ data }) => setData1(data)}
        />
        <Header text="List 2" />
        <NestableDraggableFlatList
          data={data2}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          onDragEnd={({ data }) => setData2(data)}
        />
        <Header text="List 3" />
        <NestableDraggableFlatList
          data={data3}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          onDragEnd={({ data }) => setData3(data)}
        />
      </NestableScrollContainer>
    </View>
  );
}

function Header({ text }: { text: string }) {
  return (
    <View style={{ padding: 10, backgroundColor: "seashell" }}>
      <Text style={{ fontSize: 24, fontWeight: "bold", color: "gray" }}>
        {text}
      </Text>
    </View>
  );
}

type RowItemProps = {
  item: Item;
  drag: () => void;
};

function RowItem({ item, drag }: RowItemProps) {
  return (
    <TouchableOpacity
      activeOpacity={1}
      onLongPress={drag}
      style={[
        styles.row,
        {
          backgroundColor: item.backgroundColor,
          width: item.width,
          height: item.height,
        },
      ]}
    >
      <Text style={styles.text}>{item.text}</Text>
    </TouchableOpacity>
  );
}

export default NestedDraggableListScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "seashell",
    paddingTop: 44,
  },
  row: {
    flexDirection: "row",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 15,
  },
  text: {
    fontWeight: "bold",
    color: "white",
    fontSize: 32,
  },
});

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: 4.0.1
• Platform: iOS & Android
• React Native or Expo version: 0.74.5 or 51.0.39
• Reanimated version: 3.10.1
• React Native Gesture Handler version: 2.16.1

[harshit251102]

I am getting below error - Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

versions of deps i am using in my bare RN project :-

"react-native": "0.76.1",
    "react-native-draggable-flatlist": "^4.0.3",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-screens": "4.7.0",
    "@react-navigation/native-stack": "^7.2.0"