Repository files navigation

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

Note that this quite raw still, and is not recommended for production use. BREAKING CHANGE IN 0.0.8, due to react being separated out from the react native project, 0.0.8+ will only work on React Native 0.26+.

1. Runnpm install react-native-sortable-listview --save
2. var SortableListView = require('react-native-sortable-listview');

letSortableListView=require('react-native-sortable-listview');letReact=require('react-native');let{  View,  Text,  TouchableHighlight}=React;letdata={hello:{text:'world'},how:{text:'are you'},test:{text:123},this:{text:'is'},a:{text:'a'},real:{text:'real'},drag:{text:'drag and drop'},bb:{text:'bb'},cc:{text:'cc'},dd:{text:'dd'},ee:{text:'ee'},ff:{text:'ff'},gg:{text:'gg'},hh:{text:'hh'},ii:{text:'ii'},jj:{text:'jj'},kk:{text:'kk'}}letorder=Object.keys(data);//Array of keysletRowComponent=React.createClass({render:function(){return<TouchableHighlightunderlayColor={'#eee'}style={{padding:25,backgroundColor:"#F8F8F8",borderBottomWidth:1,borderColor:'#eee'}}{...this.props.sortHandlers}><Text>{this.props.data.text}</Text></TouchableHighlight>}})letMyComponent=React.createClass({render:function(){return<SortableListViewstyle={{flex:1}}data={data}order={order}onRowMoved={e=>{order.splice(e.to,0,order.splice(e.from,1)[0]);this.forceUpdate();}}renderRow={row=><RowComponentdata={row}/>}/>}});module.exports=MyComponent;

Seeexample.js.

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} >..)

• onRowMoved(Function) - should return a function that is passed a single object when a row is dropped. The object contains three propertiesfrom,to, androw.from andto are the order indexes being requested to move.row is all the info available about the row being dropped.
• data(Object) - Takes an object.
• order(Array) (optional) - Expects an array of keys to determine the current order of rows.
• sortRowStyle(Object) (optional) - Expects astyle object, which is to be applied on the rows when they're being dragged.

###Contributions welcome!

MIT Licensed