Support Drag & Drop Reordering?

[lxcid]

This project looks awesome! I was wondering if it can do drag & drop reordering?

I'm been searching around and wasn't able to find a good solution to it. Do you think this is possible with this project?

[naqvitalha]

Yes, if you look at the ViewRenderer class there is scope to accept it from outside as a dependency. If you do that you will then be able to move it using transforms and compute it's current index using the layout information. If you update the data set things will animate in the right positions automatically. For this, however, you will need the stableIds feature which is an open PR right now. I'm working on it and few bugs have to be ironed out.

[lxcid]

Amazing @naqvitalha thanks for the explanation!

[bradbyte]

Hi @naqvitalha, thanks for all the work on the project. We're already using recyclerlistview for our app (react-native) and I'm now working to implement dragging. I'm having a hard time seeing how ViewRenderer can accept a prop to manipulate the position (on master). Has this changed since you initially posted this? Thank you!

[naqvitalha]

@bradbumbalough You will have to accept ViewRenderer's internal cell externally as a prop. Basically RLV will get one more method called getViewHolderForType() where you return your container.
In this component you will implement dragging and compute new positions RLV will animate to.

[dkpalmer]

I'm also currently searching for drag and drop support. It looks like stableIds has been merged, but it looks like getViewHolderForType() is not yet supported?

Edit: Looks like stableIds is part of a beta release. Still digging in 😇

[dkpalmer]

In the travelMate sample app, I added stableIds on v1.4.0-beta.2 and tried to insert an item. RE your comment @naqvitalha If you update the data set things will animate in the right positions automatically, does this require an ItemAnimator?

[naqvitalha]

@dkpalmer Yeah and to just try out set shouldAnimateOnce to false inside code and try inserting items.

[dkpalmer]

@naqvitalha Do you have any references/examples for using an ItemAnimator?

[bradbyte]

@dkpalmer were you able to find anything on getViewHolderForType? I'm wondering if a fork is needed. I'm able to do some choppy reordering by attaching a PanResponder to the view rendered from rowRenderer but I believe it would be better to handle directly in the ViewRenderer. Here's how I handled the ItemAnimator, though I'm not 100% sure it's animating (it's updating positions when I update the dataset).

constructor(props) {
    super(props);

    // Item Animator
    const itemAnimator = new DefaultNativeItemAnimator();

    itemAnimator.shouldAnimateOnce = false;
    this.itemAnimator = itemAnimator;
...
}

[dkpalmer]

@bradbumbalough I was not able to find anything. I was getting ready to start exploring PanResponder as well. Do you have a gist/project you can share?

I tried the same thing for ItemAnimator. When you say "it's updating positions", is it just abruptly updating (no nice animation)? That's the behavior I see when I add items to the list or try swapping row data, but per your point I guess that could be the default "animation".

[bradbyte]

@dkpalmer here's a gist for a component I made called Draggable. I'm wrapping the list item I want to drag with it. https://gist.github.com/bradbumbalough/70a79dddc922215044071dc1ff7775e7. It passes an onLongPress to its child and then is called with a TouchableHighlight.

The main issue with this is that when the dataset updates the order the RLV also updates the position, and since I'm using a transform and not say top, it gets pushed up from where you are currently touching. Definitely WIP...

I'm ok with the animations not being 👌 while getting the basic reordering to work as intended.

[naqvitalha]

getViewHolderForType is not yet there but should be pretty easy to build. @bradbumbalough That will be needed for you to be able to discard RLV transform. With a custom item animator you can animate changes in data set. But you'll need a stable id on your items to make it better.

[bradbyte]

@dkpalmer have you started anything by means of a fork? I'm going to be picking back on this now.

[dkpalmer]

@bradbumbalough I have not. We switched to an interim solution for re-ordering to be able to ship. I'll switch back to drag and drop soon, though.

[bradbyte]

@naqvitalha I've been unable to get drag and drop working as of yet... is there plans in the future for this to be supported as a first class citizen with RLV? Thanks again for the work on this!

[bradbyte]

@naqvitalha do you have any feedback on an updated approach on how to handle drag and drop based on the latest version? Thank you!

[elan]

Would love to see drag and drop support for this component.

[elan]

Ran across https://github.com/shufflingB/rn_draggable_swipeable_list_example for anyone looking.

However, it seems to have a few issues:

• Lack of animation of the rows under the dragged on.
• Lots of list re-renders (one per reorder) which seems expensive even in release mode.

[marf]

Hello, any possibility for this component to support a draggable feature?