React Native allow user to reorder elements in a scrollview list

Question

I'm trying to let the user reorder the elements in a scrollview list by long-pressing on one of the elements. What we're trying to do is basically let the user use a long press to pick up an element of a scrollview list, and then put that element somewhere else in the list. Currently we have this all working using the animated view, but the issue with that is that it's difficult to integrate scrolling and swipe-to-delete into the animated view. So we're hoping to add the "pick up and reorder" to a scrollview.

Is there a preferred method for accomplishing this?

Answer 1

TouchableWithoutFeedback has an onLongPress method, you can implement it like this:

_onLongPress() {
  // Perform sort
},

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

As far as sorting, you can use some type of library such as lodash or underscore, plus there are some ways to sort using vanilla javascript. Check out this thread.

I've also set up a basic project using the sort function on a 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);