Structure to drag Items between Lists and Items into other Items

First off, thanks for creating this, it’s the best I’ve been able to find!

I’m using a DraxList to render a list of DraxViews. When I set the ‘dragPayload’ property of the DraxView to be dragged, it causes the drag style of the component to change. The DraxView looks correct when I leave out the property. Any ideas why this would be?

Pushes View with buttons down to next row when dragging:

const renderItem = (item) => {
        return (
            <DraxView style={styles.alphaItem} **dragPayload={item.id}**>
                <View>
                    <Text category="s1">{item.name}</Text>
                    <Text category="c2" appearence="hint">
                        {item.description}
                    </Text>
                </View>
                <View style={styles.buttons}>
                    <Button size="small" status="success" appearance="ghost" accessoryLeft={RefreshIcon} />
                    <Button size="small" status="primary" appearance="ghost" accessoryLeft={ExpandIcon} />
                </View>
            </DraxView>
        );
    };

Renders correctly when dragging without dragPayload property:

const renderItem = (item) => {
        return (
            <DraxView style={styles.alphaItem}>
                <View>
                    <Text category="s1">{item.name}</Text>
                    <Text category="c2" appearence="hint">
                        {item.description}
                    </Text>
                </View>
                <View style={styles.buttons}>
                    <Button size="small" status="success" appearance="ghost" accessoryLeft={RefreshIcon} />
                    <Button size="small" status="primary" appearance="ghost" accessoryLeft={ExpandIcon} />
                </View>
            </DraxView>
        );
    };
};

[lafiosca]

Sorry, @rahulreghunath, that feature does not yet exist, as I mentioned here: https://github.com/nuclearpasta/react-native-drax/issues/75#issuecomment-776051879 and in #71

[lafiosca]

Thank you for the kind words. I’ll start this reply with my standard apology for the state of maintenance of this library right now. Personal circumstances have not afforded me the time to do any deep work on Drax for a while, and I am not fresh on the code. I have a Drax logic documentation project in progress but presently on hold. The goal with that is to make it easier for myself and others to maintain the library without accidentally breaking or changing functionality. I do however keep an eye on the issues and try to answer things off the top of my head if I am able.

All that said, briefly looking into the above, I wonder where/how you are using this renderItem function. As I recall looking at the code, DraxList creates its own renderItem for its underlying FlatList, which it needs to do because it creates its own payloads for managing the list reordering functionality. DraxList does however honor renderItemContent and renderHoverItemContent properties for modifying the rendering of the items as they are dragged.

If you want to have a list of DraxViews with custom payloads that can be dragged into other receivers, you probably need to use a DraxScrollView and roll your own list, but you would lose the list reordering functionality. Right now, at least off the top of my head, I don’t think the DraxList offers a way to support custom payloads. This seems like it would be tangentially related to #71 and that I’d want to roll both of those features into enhancement work, but I cannot predict when I’ll have the time to go that deep.