Strange drag behaviour when implemented with array.

[hupptechnologies]

Hello all i am trying to adding sortable listview but getting strange behaviour, it will not work with array list instead of objects ?

Below is my basic implementation.

const listView = [
    {
        title: 'Eat Breakfast',
        subText: '12 Minutes'
    },
    {
        title: 'Pack Bag',
        subText: '12 Minutes',
    }
]
let order = Object.keys(listView)

class ShortableList extends React.Component {
    render() {
        return (
            <View {...this.props.sortHandlers}>
                    <View>
                        <Text style={styles.listTitle}>{this.props.data.title}</Text>
                        <Text style={styles.listSubtext}>{this.props.data.subText}</Text>
                    </View>
                    <View style={styles.columnMenu}>
                        <TouchableOpacity {...this.props.sortHandlers} >
                            <Icon style={styles.menuIcon} name="md-menu" />
                        </TouchableOpacity>
                    </View>
            </View>
        )
    }
}

export defualt class SortableListDemo extends Component {
   render(){
      return(
          <View>
               <SortableListView activeOpacity={0.4} style={styles.sortListview} 
                      disableAnimatedScrolling={true} 
                      moveOnPressIn={true} 
                      data={listView}  
                      order={order} 
                      onRowMoved={e => {
                           order.splice(e.to, 0, order.splice(e.from, 1)[0])
                           this.forceUpdate()
                      }}
                      renderRow={row => <ShortableList data={row} />}
                 />
          </View>
      )
   }
}