Update position of All places in react-native-sortable-listview

Question

I am using react-native-sortable-listview in react-native for sorting same places.

 constructor() {
   this.state = {
     makers: [
       { kolkata: 'Hawrah Birdge' },
      { Delhi: 'Lal Kila' },
      { Agra: 'Taj Mahal' },
      { Mumbai: 'India Gate' },
     ],
     allObj: {},
     order: []
   };
 }
 componentDidMount() {
   const newAllObj = this.getAllObjFromMaker(this.state.makers);
   const newOrder = this.getOrderFromMaker(newAllObj);
   this.setState({ allObj: newAllObj, order: newOrder });
 }
 getAllObjFromMaker(makers) {
    const allObj = makers.reduce((result, d) => {
    result[`${d.coordinate.latitude}_${d.coordinate.longitude}`] = d;
    return result;
   }, {});
  return allObj;
 }
getOrderFromMaker(allObj) {
  const order = Object.keys(allObj);
  return order;
}
 renderOneDraggableMilestone(milestone) {
  const i = this.state.makers.indexOf(milestone);
  return (
     <TouchableOpacity {...this.props.sortHandlers}>
        <Text>{i + 1}</Text>        
        <Text>{milestone.address}</Text>
     </TouchableOpacity>
    );
  }
  arrangedMilestoneList(e) {
    const arr = this.state.makers;
    arr.splice(e.to, 0, arr.splice(e.from, 1)[0]);
    const newAllObj = this.getAllObjFromMaker(arr);
    const newOrder = this.getOrderFromMaker(newAllObj);
    this.setState({ makers: arr, allObj: newAllObj, order: newOrder 
     });
   }
 render() {
   return (
     <SortableListView
      data={this.state.allObj}
      order={this.state.order}
      activeOpacity={0.5}
      onRowMoved={e => {
        this.arrangedMilestoneList(e);
        this.forceUpdate();
      }}
      renderRow={(row) => this.renderOneDraggableMilestone(row)}
    />
   );    
 }

I want to arrange places and also their position in this.state.makers as I am doing using i in renderOneDraggableMilestone. On renderRow only draggable place are render so only their position is updated. And renderRow is last to excute so forceUpdate is also not working.

How to rerender after executing renderRow. So all position could be updated.

Answer 1

Ok I have find a way to re-render as follow.

   <SortableListView
  key={this.state.count}
  data={this.state.allObj}
  order={this.state.order}
  activeOpacity={0.5}
  onRowMoved={e => {
    this.setState({ count: this.state.count + 1 });
    this.props.arrangedMilestoneList(e);
    console.log('onRowMoved is called');
  }}
  onMoveEnd={() => console.log('onMoveEnd is fired')}
  renderRow={(row, s1, i) => this.renderOneDraggableMilestone(row, s1, i)}
/>

What I am doing is I added a key attribute to SortableListView and update this key on each onRowMoved action. And because of this it causes re-render.