Optimize the jitter problem of AnySizeDragSortableView Android

Author: mochixuan

Example/app/widget/AnySizeDragSortableView.js

@@ -174,14 +174,14 @@ export default class AnySizeDragSortableView extends React.PureComponent {
     const key = keyExtractor(item, index);
     const curLayout = this.layoutMap.get(key)
     const firstOffsetY = (this.curScrollData && this.curScrollData.offsetY) || 0
-    const initTop = curLayout.y - firstOffsetY + headerViewHeight
+    const initTop = parseInt(curLayout.y - firstOffsetY + headerViewHeight + 0.5)
     this.setState({ 
       scrollEnabled: false,
       selectedItem: item,
       selectedKey: key,
       selectedOriginLayout: {...curLayout},
       selectedPosition: {
-        left: curLayout.x,
+        left: parseInt(curLayout.x+0.5),
         top: initTop,
         initTop,
         width: curLayout.width,
@@ -251,7 +251,6 @@ export default class AnySizeDragSortableView extends React.PureComponent {
         }
       }
     }
-    
     if (!this.isUpdating) {
       const moveX1 = selectedOriginLayout.x + dx + childMarginLeft
       const moveX2 = moveX1 + selectedOriginLayout.width - childMarginRight
@@ -288,13 +287,20 @@ export default class AnySizeDragSortableView extends React.PureComponent {
       }
     }
 
-    this.setState({
-      selectedPosition: {
-        ...selectedPosition, 
-        left: selectedOriginLayout.x + dx,
-        top: selectedPosition.initTop + (moveY - y0)
-      }
-    })
+    const preLeft = selectedPosition.left
+    const preTop = selectedPosition.top
+    const nextLeft = parseInt(selectedOriginLayout.x + dx + 0.5)
+    const nextTop = parseInt(selectedPosition.initTop + (moveY - y0) + 0.5)
+
+    if (preLeft !== nextLeft || preTop !== nextTop) {
+      this.setState({
+        selectedPosition: {
+          ...selectedPosition, 
+          left: nextLeft,
+          top: nextTop
+        }
+      })
+    }
   };
 
   move = (fromKey, toKey, vy, isDiffline) => {
@@ -472,7 +478,7 @@ AnySizeDragSortableView.propTypes = {
 
 AnySizeDragSortableView.defaultProps = {
   areaOverlapRatio: 0.55, // Must be greater than 0.5
-  autoThrottle: 5,
+  autoThrottle: 2,
   autoThrottleDuration: 10,
   scrollIndicatorInsets: {
     top: 0,

lib/AnySizeDragSortableView.js

@@ -174,14 +174,14 @@ export default class AnySizeDragSortableView extends React.PureComponent {
     const key = keyExtractor(item, index);
     const curLayout = this.layoutMap.get(key)
     const firstOffsetY = (this.curScrollData && this.curScrollData.offsetY) || 0
-    const initTop = curLayout.y - firstOffsetY + headerViewHeight
+    const initTop = parseInt(curLayout.y - firstOffsetY + headerViewHeight + 0.5)
     this.setState({ 
       scrollEnabled: false,
       selectedItem: item,
       selectedKey: key,
       selectedOriginLayout: {...curLayout},
       selectedPosition: {
-        left: curLayout.x,
+        left: parseInt(curLayout.x+0.5),
         top: initTop,
         initTop,
         width: curLayout.width,
@@ -251,7 +251,6 @@ export default class AnySizeDragSortableView extends React.PureComponent {
         }
       }
     }
-    
     if (!this.isUpdating) {
       const moveX1 = selectedOriginLayout.x + dx + childMarginLeft
       const moveX2 = moveX1 + selectedOriginLayout.width - childMarginRight
@@ -288,13 +287,20 @@ export default class AnySizeDragSortableView extends React.PureComponent {
       }
     }
 
-    this.setState({
-      selectedPosition: {
-        ...selectedPosition, 
-        left: selectedOriginLayout.x + dx,
-        top: selectedPosition.initTop + (moveY - y0)
-      }
-    })
+    const preLeft = selectedPosition.left
+    const preTop = selectedPosition.top
+    const nextLeft = parseInt(selectedOriginLayout.x + dx + 0.5)
+    const nextTop = parseInt(selectedPosition.initTop + (moveY - y0) + 0.5)
+
+    if (preLeft !== nextLeft || preTop !== nextTop) {
+      this.setState({
+        selectedPosition: {
+          ...selectedPosition, 
+          left: nextLeft,
+          top: nextTop
+        }
+      })
+    }
   };
 
   move = (fromKey, toKey, vy, isDiffline) => {
@@ -472,7 +478,7 @@ AnySizeDragSortableView.propTypes = {
 
 AnySizeDragSortableView.defaultProps = {
   areaOverlapRatio: 0.55, // Must be greater than 0.5
-  autoThrottle: 5,
+  autoThrottle: 2,
   autoThrottleDuration: 10,
   scrollIndicatorInsets: {
     top: 0,

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-drag-sort",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "Drag and drop sort control for react-native",
   "main": "index.js",
   "scripts": {