I am attempting to create screen that renders category names, with points of interest (POIs) underneath it. The POIs should be drag and droppable to reorder them within each category section. An example of my code is as follows:

import React, { useState } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';

const CategoryScreen = () => {
    const initialData = {
        "Category name 1": [{ key: 'item1' }, { key: 'item2' }, { key: 'item3' }],
        "Category name 2": [{ key: 'item4' }, { key: 'item5' }, { key: 'item6' }],
        "Category name 3": [{ key: 'item7' }, { key: 'item8' }, { key: 'item9' }],
    };

    const [categories, setCategories] = useState(initialData);

    const renderItem = ({ item, drag, isActive }) => (
        <View style={[styles.item, isActive && styles.activeItem]}>
            <Text style={styles.itemText} onLongPress={drag}>{item.key}</Text>
        </View>
    );

    const renderCategory = ({ item: categoryName }) => (
        <View style={styles.categoryContainer}>
            <Text style={styles.categoryTitle}>{categoryName}</Text>
            <DraggableFlatList
                data={categories[categoryName]}
                renderItem={renderItem}
                keyExtractor={(item, index) => `draggable-item-${item.key}-${index}`}
                onDragEnd={({ data }) => {
                    setCategories(prev => ({
                        ...prev,
                        [categoryName]: data,
                    }));
                }}
                nestedScrollEnabled={true}
                scrollEnabled={false}  // Disable internal scrolling
            />
        </View>
    );

    return (
        <FlatList
            data={Object.keys(categories)}
            renderItem={renderCategory}
            keyExtractor={(category, index) => `category-${index}`}
            nestedScrollEnabled={true}
            contentContainerStyle={styles.container}
        />
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 10,
    },
    categoryContainer: {
        marginBottom: 20,
    },
    categoryTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    item: {
        padding: 15,
        backgroundColor: '#f9c2ff',
        marginBottom: 5,
        borderRadius: 5,
    },
    activeItem: {
        backgroundColor: '#ff7f50',
    },
    itemText: {
        fontSize: 16,
    },
});

export default CategoryScreen;

I have everything rendering correctly, and the drag and drop functionality is working as expected, but when trying to scroll through the exterior flatlist if you start the dragging motion within the internal DraggableFlatList then it will not scroll the external list.

• Tried to use the NestableDraggableFlatList and NestableScrollContainer and ran into similar issues.
• Tried to use a scrollview instead of a flatlist for the external container.
• Tried multiple combinations of properties within flatlist/scrollview such as onMoveShouldSetResponderCapture, nestedScrollEnabled, and scrollEnabled.
• Tried utilizing react-native-gesture-handler in a fashion similar to this:

<GestureHandlerRootView style={{ flex: 1 }}>
   <ScrollView contentContainerStyle={styles.container}>
      {Object.keys(categories).map((categoryName) => renderCategory(categoryName))}
   </ScrollView>
</GestureHandlerRootView>