React Native allows the user to reorder items in a scroll list

Question

I am trying to allow the user to reorder items in a scroll list by long clicking on one of the items. What we are trying to do basically allows the user to press and hold the scroll list item for a long time, and then put that item in another place in the list. Currently we are all working using an animated view, but the problem is that it is difficult to integrate scrolling and scrolling remotely into an animated view. Therefore, we hope to add "pick up and reorder" to the scrollview.

Is there a preferred way to do this?

Answer 1

TouchableWithoutFeedback has onLongPress , you can implement it like this:

_onLongPress() { // Perform sort }, <TouchableWithoutFeedback onLongPress={ () => this._onLongPress() }> <Text>Click and Hold to call onLongPress</Text> </TouchableWithoutFeedback> 

As for sorting, you can use some type of library, such as lodash or underscore, and there are several ways to sort using javascript. Browse this thread.

I also created a basic project using the sort function in 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 and 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);