React Native allow user to reorder elements in a scrollview list -

i'm trying let user reorder elements in scrollview list long-pressing on 1 of elements. we're trying let user use long press pick element of scrollview list, , put element somewhere else in list. have working using animated view, issue it's difficult integrate scrolling , swipe-to-delete animated view. we're hoping add "pick , reorder" scrollview.

is there preferred method accomplishing this?

touchablewithoutfeedback has onlongpress method, can implement this:

_onlongpress() {   // perform sort },  <touchablewithoutfeedback onlongpress={ () => this._onlongpress() }>   <text>click , hold call onlongpress</text> </touchablewithoutfeedback> 

as far sorting, can use type of library such lodash or underscore, plus there ways sort using vanilla javascript. check out this thread.

i've set basic project using sort function on listview here.

https://rnplay.org/apps/mpbktg

'use strict';  var react = require('react-native'); var {   appregistry,   stylesheet,   text,   view,   listview,   touchablewithoutfeedback } = react;  var data = [{name: 'data1', number: 1}, {name: 'data2', number: 2}, {name: 'data3', number: 3}, {name: 'data4', number: 4}, {name: 'data5', number: 5}]; var ds = new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2}); var _ = require('lodash');  var sampleapp = react.createclass({    getinitialstate() {     return {         datasource: ds.clonewithrows(data),       reverse: false     }   },    _onlongpress() {     if(this.state.reverse) {       data = _.sortby(data, (d) =>  d.number)       this.setstate({         reverse: false,         datasource: ds.clonewithrows(data),       })     } else {       data = _.sortby(data, (d) =>  -d.number)         this.setstate({         datasource: ds.clonewithrows(data),         reverse: true       })     }    },    _renderrow(rowdata){     return <text>{rowdata.name}</text>                  },                                      render: function() {     return (       <view style={styles.container}>         <view style={[styles.button]}>             <touchablewithoutfeedback onlongpress={ () => this._onlongpress() }>             <text style={[styles.buttontext]}>click , hold</text>           </touchablewithoutfeedback>         </view>         <listview datasource={this.state.datasource} renderrow={this._renderrow} />       </view>     );   } });  var styles = stylesheet.create({   container: {     flex: 1,     margintop:60   },   button: {     backgroundcolor: '#ebebeb',     borderbottomwidth:1,     borderbottomcolor: '#ddd',   },   buttontext: {     fontsize:18,     flex:1,     textalign:'center',     margintop:20,     marginbottom:20   } });  appregistry.registercomponent('sampleapp', () => sampleapp);