fix

examples/Basic/index.js

@@ -17,7 +17,7 @@ import {
   Platform,
 } from 'react-native';
 import SortableList from 'react-native-sortable-list';
-
+import {shuffle} from 'lodash';
 const window = Dimensions.get('window');
 
 
@@ -65,6 +65,13 @@ const data = {
 };
 
 class Basic extends Component {
+  state = {
+    order: Object.keys(data),
+  }
+
+  componentDidMount() {
+    setInterval(() => this.setState({order: shuffle(this.state.order)}), 3000)
+  }
   render() {
     return (
       <View style={styles.container}>
@@ -73,6 +80,7 @@ class Basic extends Component {
           style={styles.list}
           contentContainerStyle={styles.contentContainer}
           data={data}
+          order={this.state.order}
           renderRow={this._renderRow} />
       </View>
     );
@@ -194,7 +202,7 @@ const styles = StyleSheet.create({
     marginTop: 7,
     marginBottom: 12,
     borderRadius: 4,
-    
+
 
     ...Platform.select({
       ios: {

examples/Basic/package.json

@@ -6,6 +6,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
+    "lodash": "^4.17.4",
     "react": "^15.4.0",
     "react-native": "^0.41.2",
     "react-native-sortable-list": "../.."

src/SortableList.js

@@ -47,7 +47,8 @@ export default class SortableList extends Component {
   /**
    * Stores promises of rows’ layouts.
    */
-  _rowsLayouts = [];
+  _rowsLayouts = {};
+  _resolveRowLayout = {};
 
   _contentOffset = {x: 0, y: 0};
 
@@ -64,23 +65,43 @@ export default class SortableList extends Component {
     scrollEnabled: this.props.scrollEnabled
   };
 
+  componentWillMount() {
+    this.state.order.forEach((key) => {
+      this._rowsLayouts[key] = new Promise((resolve) => {
+        this._resolveRowLayout[key] = resolve;
+      });
+    });
+
+    if (this.props.renderFooter && !this.props.horizontal) {
+      this._footerLayout = new Promise((resolve) => {
+        this._resolveFooterLayout = resolve;
+      });
+    }
+  }
+
   componentDidMount() {
     this._onUpdateLayouts();
   }
 
   componentWillReceiveProps(nextProps) {
     const {data, order} = this.state;
-    const {data: nextData, order: nextOrder} = nextProps;
+    let {data: nextData, order: nextOrder} = nextProps;
 
     if (data && nextData && !shallowEqual(data, nextData)) {
+      nextOrder = nextOrder || Object.keys(nextData)
       uniqueRowKey.id++;
-      this._rowsLayouts = [];
+      this._rowsLayouts = {};
+      nextOrder.forEach((key) => {
+        this._rowsLayouts[key] = new Promise((resolve) => {
+          this._resolveRowLayout[key] = resolve;
+        });
+      });
       this.setState({
         animated: false,
         data: nextData,
         containerLayout: null,
         rowsLayouts: null,
-        order: nextOrder || Object.keys(nextData)
+        order: nextOrder
       });
 
     } else if (order && nextOrder && !shallowEqual(order, nextOrder)) {
@@ -206,7 +227,6 @@ export default class SortableList extends Component {
     return order.map((key, index) => {
       const style = {[ZINDEX]: 0};
       const location = {x: 0, y: 0};
-      let resolveLayout;
 
       if (rowsLayouts) {
         if (horizontal) {
@@ -218,8 +238,6 @@ export default class SortableList extends Component {
           location.y = nextY;
           nextY += rowsLayouts[key].height;
         }
-      } else {
-        this._rowsLayouts.push(new Promise((resolve) => (resolveLayout = resolve)));
       }
 
       const active = activeRowKey === key;
@@ -239,7 +257,7 @@ export default class SortableList extends Component {
           disabled={!sortingEnabled}
           style={style}
           location={location}
-          onLayout={!rowsLayouts ? this._onLayoutRow.bind(this, resolveLayout, key) : null}
+          onLayout={!rowsLayouts ? this._onLayoutRow.bind(this, key) : null}
           onActivate={this._onActivateRow.bind(this, key, index)}
           onPress={this._onPressRow.bind(this, key)}
           onRelease={this._onReleaseRow.bind(this, key)}
@@ -262,21 +280,16 @@ export default class SortableList extends Component {
     }
 
     const {footerLayout} = this.state;
-    let resolveLayout;
-
-    if (!footerLayout) {
-      this._footerLayout = new Promise((resolve) => (resolveLayout = resolve));
-    }
 
     return (
-      <View onLayout={!footerLayout ? this._onLayoutFooter.bind(this, resolveLayout) : null}>
+      <View onLayout={!footerLayout ? this._onLayoutFooter : null}>
         {this.props.renderFooter()}
       </View>
     );
   }
 
   _onUpdateLayouts() {
-    Promise.all([this._footerLayout, ...this._rowsLayouts])
+    Promise.all([this._footerLayout, ...Object.values(this._rowsLayouts)])
       .then(([footerLayout, ...rowsLayouts]) => {
         // Can get correct container’s layout only after rows’s layouts.
         this._container.measure((x, y, width, height, pageX, pageY) => {
@@ -515,13 +528,13 @@ export default class SortableList extends Component {
     this._autoScrollInterval = null;
   }
 
-  _onLayoutRow(resolveLayout, rowKey, {nativeEvent: {layout}}) {
+  _onLayoutRow(rowKey, {nativeEvent: {layout}}) {
-    resolveLayout({rowKey, layout});
+    this._resolveRowLayout[rowKey]({rowKey, layout});
   }
 
-  _onLayoutFooter(resolveLayout, {nativeEvent: {layout}}) {
+  _onLayoutFooter = ({nativeEvent: {layout}}) => {
-    resolveLayout(layout);
+    this._resolveFooterLayout(layout);
-  }
+  };
 
   _onActivateRow = (rowKey, index, e, gestureState, location) => {
     this._activeRowLocation = location;