Having issues with list order

[Dauie]

Hey Everyone,

Appreciate you taking the time to read my post, I usually don't like doing this, but I've racked my brain for a couple of days trying to figure out why the order of my 'data' elements are not changing after one has been moved. I know that my 'order' variable is changing due to a console.log() in the onRowMoved prop, but the order that 'data' is being displayed is not. Below I'm including two snippets the first is where I create 'data' and 'order', the second is my iteration of the 'MyComponent' portion outlined in the examples for this module. Any help would be wonderful.

const orderSchema = require('./newOrder').orderSchema;

export default class OrderList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { realm: null };
    this.ds = [menuIcon, histIcon, proIcon, workIcon];
  }

  listOrders() {
    Realm.open({
      schema: [orderSchema],
    }).then((realm) => {
      this.setState({ realm });
    });
    var orders = this.state.realm ?
      this.state.realm.objects('Order') :
      null;
    if (!orders){
      return (null);
    }
    var cumulativeViews = {};
    for (let i = 0; i < orders.length; i += 1) {
      cumulativeViews[i] = <CollapsibleView order={orders[i]}/>
    }
    return (cumulativeViews);
  }

  render() {
    var orders = this.listOrders();
    if (!orders)
      return (
        <View>
          <RenderTitle />
        </View>
      )
    var order = Object.keys(orders)
    return (
      <View>
        <RenderTitle />
        <MyComponent
          data={orders}
          order={order}
        />
      </View>);
  }
}

and the other snippet:

  return (
    <TouchableHighlight
      underlayColor="#eee"
      style={{
          padding: 25,
          backgroundColor: '#F8F8F8',
          borderBottomWidth: 1,
          borderColor: '#eee',
        }}
      {...props.sortHandlers}
    >
      <View>{props.data}</View>
    </TouchableHighlight>
  );
}

 let MyComponent = React.createClass({
  render(){
    return (
      <View style={styles.container}>
        <View
          style={{ height: 64, backgroundColor: 'lightblue' } /* fake nav bar */}
        >
          <Text style={styles.welcome}> Current run </Text>
        </View>
        <SortableListView
          data={this.props.data}
          order={this.props.order}
          onRowMoved={ e => {
            console.log("to " + e.to)
            console.log("from " + e.from)
            this.props.order.splice(e.to, 0, this.props.order.splice(e.from, 1) [0]);
            console.log(this.props.order);
            this.forceUpdate();
          }}
          renderRow={row => <RowComponent data={row} />}
        />
      </View>

    );
  },
});
module.exports = MyComponent;```

[Dauie]

Below is a example of what the page looks like currently. If you grab #4 and move it down, on release the comp will zip back up to the top of the screen.

[Dauie]

okay, I fixed this issue, and its not due to sortable-listview (My bad). It was an issue with me not putting my call to open up the realm connection in componentWillMount().

Just moved the realm.open call to:

  componentWillMount() {
    Realm.open({
      schema: [orderSchema],
    }).then((realm) => {
      this.setState({ realm });
    });
  }

Everything is working well now. Hope this helps someone in the future. Please close issue when possible.