deanmcpherson/react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native

Deprecated

This library has no active maintainer and many open issues. It is not recommended for new projects. Consider using react-native-sortable-list instead.

react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging.

Add it to your project

1. Run npm install react-native-sortable-listview --save
2. import SortableListView from 'react-native-sortable-listview'

Demo

Basic usage

See example.

Example

See Sortable.

Props

SortableListView passes through all the standard ListView properties to ListView, except for dataSource. The renderRow method must render a component that forwards onLongPress and onPressOut methods to a Touchable* child component. Calling the onLongPress method will enable the drag and drop on the row and onPressOut will cancel it. You can also apply the default behaviour by spreading the sortHandlers prop (e.g. <TouchableHightlight {...this.props.sortHandlers} >..)

Property	Type	Description
onRowMoved	Function	should return a function that is passed a single object when a row is dropped. The object contains three properties from, to, and row. from and to are the order indexes being requested to move. row is all the info available about the row being dropped.
data	Object	Takes an object.
rowHasChanged	Function	Takes an function that is called to compare row data. It is passed the new row data and a shallow copy of the previous row data. This is necessary to define if row data is not immutible for row changes to correctly propagate, if your row data is immutable DO NOT DEFINE, see #28 for reasons why.
order	Array (Optional)	Expects an array of keys to determine the current order of rows.
sortRowStyle	Object (Optional)	Expects a style object, which is to be applied on the rows when they're being dragged.
disableSorting	Boolean (Optional)	When set to true, all sorting will be disabled, which will effectively make the SortableListView act like a normal ListView.
onMoveStart	Function (Optional)	Register a handler to be called when drag start.
onMoveEnd	Function (Optional)	Register a handler to be called when move is completed.
onRowActive	Function (Optional)	Register a handler to be called when row is activated, return a object contains three properties rowData, touch and layout. rowData is the data info of activated row, layout is the layout info of the activated row, touch is the nativeEvent of long press
onMoveCancel	Function (Optional)	Register a handler to be called when move is canceled, that is the row is activated on long press and then released without any move.
activeOpacity	Number (Optional)	Sets opacity of an active element. Default value: 0.2.
limitScrolling	Boolean (Optional)	When set to true, scrolling will be disabled when a row is active (sorting). Default is false.
moveOnPressIn	Boolean (Optional)	When set to true, longPress delay is eliminated. Default is false.
ListViewComponent	_(Function) (Optional)	A custom ListView component to be used instead of React-Native's ListView.
disableAnimatedScrolling	Boolean (Optional)	When set to true, scrolling will no longer animate. Default is false. Strongly recommend set it to true., see #97 for more context.

Methods

Name	Description
scrollTo(...args)	Scrolls to a given x, y offset, either immediately or with a smooth animation. See ScrollView's scrollTo method.

---

Contributing

Before submitting a PR, please:

1. Format your code by running npm run prettier.
2. Test by running npm run test. (Currently this produces 2 warnings, no errors).
3. Build the Sortable example app and test fully for regressions on both iOS and android.
4. Describe your change in the Unreleased section of the Changelog.

---

MIT Licensed

react-native-sortable-listview's Issues

Longpress problem

longpress on a row makes above row comes down and does not go back to its position.

can not spport renderHeader

I want the first and second row not sort and can not drag,bug other cell can sort and drag,so i want to add header to spport it,thank you。

Android support

example doesn't work in android.

Not able to Sort the component

I want a sortable component, I am able to drag but while dropping it return back to its original position how to make it stay in the position where it has been dropped

Scrolling bug

I've noticed a couple of issues with the scrolling using a modern version of React Native (0.24.1). The first issue is that there are some deprecation/yellow box warnings, which should be easy enough to fix (see gif).

The second and more important issue is that you can make the scroll view scroll to an incorrect offset. I haven't worked out the exact steps to reproduce this. I usually just drag some items around a bit and more often than not the items will appear to scroll to the bottom of the screen. See the gif for an example. It seems more likely to happen when there are fewer items in the list view.

Constrain dragging bounds

Is there a way we can specify the bounds of dragging?

i.e only allow dragging between position 1 and list.length-2

Passing Immutable data to rows

Hello,

I have an issue with last version (0.1.0). In our app we are passing down immutable data to our (Sortable)ListView but with last version I got an error on this line:

One of the sources for assign has an enumerable key on the prototype chain. 
This is an edge case that we do not support. 
This error is a performance optimization and not spec compliant.

Object.assign
polyfills.js:56
Constructor.componentDidUpdate
index.js:35

I assume it's because Immutable uses complex data structures, which have a reference on prototype which is not handled by Object.assign React Native's polyfill (source).

When i click on row there is no change in state.Is there no event of onPress ?

getScrollResponder is not a function

When running a snapshot test wit jest on a component using the SortableListView, I get following error:

node_modules/react-native-sortable-listview/index.js:186
_this3.scrollResponder=_this3.refs.list.getScrollResponder();
                                        ^
TypeError: _this3.refs.list.getScrollResponder is not a function
    at null._onTimeout (node_modules/react-native-sortable-listview/index.js:186:41)
    at Timer.listOnTimeout (timers.js:92:15)
npm ERR! Test failed.  See above for more details.

When I look into the refs.list, indeed the getScrollResponder() doesn't exits.

I run react native 0.42.3
And version 0.2.2 of this module

Is there something special I should do with snapshot tests? I followed the example.

LOOKING FOR NEW MAINTAINER

I unfortunately don't have time any more to maintain this project any more. If anyone would like to take over ownership, I'm more than happy to transfer the Repo / npm package rights.

Sorry to those who are waiting on fixes, I know this is very frustrating.

Is it possible to adjust hold delay as an option variable?

For example, I want to reduce the hold delay so that the sorting initiates more quickly.

SortableListView inside ScrollView

Is the there a way to get this to work? Currently it does not allow sorting. You can select the cell but it doesn't move. Just scrolls the parent ScrollView instead.

Can you also order by columns?

I want to create like a grid and I was wondering if you can create a matrix an reorder rows and columns

version 0.0.8 after dragging, scroll is not working anymore

Unwanted scrolling

When a long list has been scrolled down some distance from the top, and an item near the top of the list is selected with a long press for sorting, the list scrolls back to the top without the user dragging the item towards the top.

Here is a demo.

Endless scrolling ignores dragging

Steps to reproduce:

1. Set a list with elements so that not all of them fits the screen (you have a scroll in the scrollview)
2. Start dragging an item
3. Drag it to the bottom (or top) of the scroll view
4. See that scroll is scrolling endlessly and any movement of the item is ignored.

See gif:

I tried to debug it, but all I noticed is that onPanResponderMove is not executed in this case, because component is constantly rerendering (probably because of the setState in the checkTargetElement) and scrollAnimation method is invoking all the time.
setState -> render -> scrollAnimation -> setState -> render -> scrollAnimation -> ... and no onPanResponderMove

node: v5.9.0
npm: 3.10.8
react-native: 0.37 (but previously I had 0.31 and the same issues)

Not working when it is nested inside a ScrollView?

I am currently testing out this lib. Great work by the way, but it doesn't seem to work when nested inside a ScrollView.
It works fine without parent ScrollView though.
My use case is that there are multiple sortable lists in one screen divided into different sections.

How to pass props other than 'data'?

Other than the initial render and the row data props, props passed to the renderRow function don't seem to update.

Specifying a sort handle

Is it possible to specify a specific element that should be used as the sorting handle? Right now, the entire item within renderRow is used to respond to the sort presses, however this blocks other pointer events that the row item may have. Would be great if you could target a specific element on each renderRow item that the touch mechanism should attach to, to keep other pointer events available.

Often times, rows don't appear until scroll.

See facebook/react-native#13316

Bug in drag behavior

I need this component! Unfortunately it's not working well for me. These are probably multiple issues but I'll just list them all here for now.

• When I drag anywhere near the bottom of the scrollable area, an extreme jitter happens. It looks like the dragged element is floating slightly to the right (try dragging down & right to repro) which creates weird horizontal gaps.
• There are bugs in the data reordering. Testing your example, just a few drags and weirdness starts happening. Spots where it clearly thinks you're dragging something you already dropped on a new drag, and gaps open up in weird places, data doesn't order correctly, etc.
• When dragging you need the view to gently scroll up or down as you approach the edge of the screen, otherwise you can't reorder except within the few tabs showing onscreen.
• When I tried to create a custom list item (it was pretty simple and copied your example's styles), dragging locks the top of the item to the touch position. That doesn't happen in your example but figured you'd want to know that it happened for me immediately when trying to integrate the component into a real project.

Thanks for your effort anyway.

Oftentimes the same rows are cloned and appear multiple times.

I don't know exactly how to replicate this, but when I sort things around, some row gets copied and I can see multiple of them.
Any thoughts? or anyone having the same issue?

renderHeader results in offset when re-ordering

If the renderHeader prop is set on the SortableListView, all re-orders seem to be based off of the top of the view instead of the top of the view including an offset for the header.

Be able to set props to ListView

I need to set keyboardShouldPersistTaps={true} on the returned ListView element, maybe we could propagate the unspecific props to it using the spread operator?
I can make a PR if needed

Sluggish dragging

We implemented the package successfully in a project but in the layout setup we now use it behaves badly, very sluggish. See https://youtu.be/TKfnQ_vEnDY as reference.

The layout is currently build up like this:

<View style={{flex: 1, backgroundColor: Colors.white}}>
  <Router>
    <Scene>
      <Scene>
        <Scene>
          <SortableListView 
            renderRow={row => <Row /* TouchableHighlight as seen in the examples */ />} 
          />
        </Scene>
      </Scene>
    </Scene>
  </Router>
</View>

SortableListView has no flex style, but a fixed height.

Compatibility with React Native 0.42

After upgrading this package to 0.2.0 and updating to the latest version of React Native, this project when imported fails to build.

I was able to fix it locally by deleting the folder in node-modules/react-native within the react-native-sortable-listview folder. It appears that a specific React Native version is hard-coded in the package.json, so that if you have a different version, it tries to load two different versions of React Native - which can cause conflicts like these.

This is the output of react-native start after upgrading: (but before my local fix)

➜  alarmclockv2 git:(master) ✗ react-native start
Scanning 647 folders for symlinks in /Users/jarred/Code/alarmclockv2/node_modules (14ms)
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /Users/jarred/Code/alarmclockv2

Loading dependency graph...
React packager ready.

Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: jsc-heap-capture
  Paths: /Users/jarred/Code/alarmclockv2/node_modules/react-native-sortable-listview/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json collides with /Users/jarred/Code/alarmclockv2/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: jsc-heap-capture
  Paths: /Users/jarred/Code/alarmclockv2/node_modules/react-native-sortable-listview/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json collides with /Users/jarred/Code/alarmclockv2/node_modules/react-native/local-cli/server/middleware/heapCapture/package.json

This error is caused by a @providesModule declaration with the same name across two different files.
    at HasteMap._updateHasteMap (/Users/jarred/Code/alarmclockv2/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
    at p.getName.then.name (/Users/jarred/Code/alarmclockv2/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)

Access row's index from inside row component

How would one access the index of a row from inside a RowComponent instance?

For example, if I were to add a button to my row and one that button is pressed I would like to know where in the order array the pressed row is.

How would one accomplish that?

on longpress the row above immediately falls down behind the pressed one

With just a longpress Without any movement, this happens:

having a header or section header mess up the position calculation

If I have a header that is about 2x the row itemHeight, when I drag a row to position 3, it seems to think I'm dragging to position 4. How do I account for the header height in the code? Thanks

TouchableHighlights Undefined

I found an error when compiled with RN 0.40, the error said undefined is not an object (evaluating 'this.wrappedInstance.setNativeProps).

When I remove {...this.props.sortHandlers} from TouchableHighlights, the error disappears, but I can't drag&drop the row

Android: adjacent rows change positions not smoothly when dragging

Unlike iOS demo, when running example.js on Android, inactive rows change theirs positions without any animation when active item is dragging.

Using react-native 0.30.0, react-native-sortable-listview 0.1.1, Android 5.0.1.

How to save the drag and drop status?

with Example.js, It is well done work. but I have a problem ,how to save status for draged listview. In another word, when I quit the app and then enter the app again ,I can see last draged ListView.I konw it may need to AsyncStorage to save the sorted ListView, but how in Example.js ? Hope you give me some advice

Has anyone successfully implemented Swipeout with this library?

I'm trying to set up a list which allows the user to sort and also allows them to swipe-to-delete. Is this possible?

react-timer-mixin not installed afer npm install

npm install react-native-sortable-listview will not install dependency react-timer-mixin.
Had to do that separately (v.0.0.8 / react 26+)

Section headers support?

Thanks for a very useful library. I have a question: what is needed to support section headers in the list? By doing some slight code modifications, I have come as far as to display the data correctly with section headers, but the drag and drop fails. The underlying bookkeeping of item ordering seems not to match actual order, or the layout calculation is messed up by the additional section header items... Any thoughts around this? Is there a roadmap including section headers?

PR

Hi

would you consider merging some PRs?

Add support for sections

As far as I'm aware, sections are not supported (cloneWithRowsAndSections, renderSectionHeader)? This is an important feature for most apps

isSorting bool

Hey

Is there a way to get a prop down the row that signals if it's being dragged or not? Would want to do some more advanced stuff than just pass down a style

Question : How does it work ?

Hi,
It would be very interesting to know how the reordering works. I just want to know what logic does it apply when something is moved (dragged) and when do u reorder things and by what logic.
The sudo code for algorithm if written down here, it would be very informative ..

Thanks a lot of this nice stuff ! :)

does this work with react-native 0.26.0?

react-native 0.26.0

`
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';

let SortableListView = require('react-native-sortable-listview');

class SortableListViewExample extends Component {
render() {

return (
  <View style={styles.container}>

  </View>
);

}
}

AppRegistry.registerComponent('SortableListViewExample', () => SortableListViewExample);
`

Android: some spacing is added when dragging

I don't have any animation in Android.
Also, why is there some spacing added below the dragged row when I start dragging?

Using Genymotion, react-native 0.27.0, react 15.1.0, react-native-sortable-listview 0.0.7.

List is not updating when data source is changed

List is not updating when data source is changed

On SortableListView, data = { this.state.data }. When i add a list item on another view, the state gets updated and the list dont update.

rerenders when list childern value is changed

I have this list used for my apps frontpage widgets(to turn them of and on and to sort). So each row has a switcher. When user clicks switcher its value is changed, therefore rows value is changed as well, therefore it rerenders listview and if user has scrolled - he/she are suddenly brought to the top.
I think this might be solvable if listview would be replased by scrollview and rows would be just maped array.

I hope my description is clear, if not - just ask questions. :)

Is it possible to have a delete feature on the row?

Update documentation

Have accepted several new APIs in PRs that are not documented, need to update documentation.

react-timer-mixin not installed afer npm install

npm install react-native-sortable-listview will not install dependency react-timer-mixin.
Had to do that separately (v.0.0.8 / react 26+)

disableSorting doesn't work

Hello,

It seems like disableSorting is not working. I'm following the example code and when setting disableSorting={true} nothing changes. The only way I've found for disabling the sorting is to remove {...this.props.sortHandlers} from the row component. I've only tried this on Android.

Any ideas? Thanks in advance!

npm install version is not newest.

I use npm install, but the version cannot work.

But the github version is ok.

Please update it, thanks

How can I enable or disable the drag and drop?

I want control the dnd by a toggle button, can you add this control function?

thanks

Animation quality disappointing

I have the same issue as #48 and in addition, it is difficult to "grab" an item to start dragging it. I usually have to press and hold several times before the item starts to move.

And then, whenever I drag an item to or from the first row, the item behind starts rapidly bouncing up and down, as shown in this gif:

Probably it will be necessary to leverage Android native animations to fix these issues. I use react-native-tableview on iOS which works great.

I'm using react-native 0.32.1 and 0.1.1 (as modified by PR #49) of this component.