Merge pull request #2706 from aljourda/master

Fixed animation hangup / Using the native driver
GeekyAnts · Jul 4, 2019 · 3939624 · 3939624
2 parents b4047bf + 9d4dc33
commit 3939624
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 46 deletions.
diff --git a/dist/src/basic/Accordion.js b/dist/src/basic/Accordion.js
diff --git a/dist/src/basic/Accordion.js.map b/dist/src/basic/Accordion.js.map
diff --git a/dist/src/basic/Fab.js b/dist/src/basic/Fab.js
diff --git a/dist/src/basic/Fab.js.map b/dist/src/basic/Fab.js.map
diff --git a/dist/src/basic/Item.js b/dist/src/basic/Item.js
diff --git a/dist/src/basic/Item.js.map b/dist/src/basic/Item.js.map
diff --git a/dist/src/basic/SwipeRow.js b/dist/src/basic/SwipeRow.js
diff --git a/dist/src/basic/SwipeRow.js.map b/dist/src/basic/SwipeRow.js.map
diff --git a/src/basic/Accordion.js b/src/basic/Accordion.js
@@ -78,7 +78,8 @@ class AccordionSubItem extends React.Component {
   componentDidMount() {
     Animated.timing(this.state.fadeAnim, {
       toValue: 1,
-      duration: 500
+      duration: 500,
+      useNativeDriver: true
     }).start();
   }
   render() {

diff --git a/src/basic/Fab.js b/src/basic/Fab.js
@@ -308,20 +308,24 @@ class Fab extends Component {
   upAnimate() {
     if (!this.props.active) {
       Animated.spring(this.containerHeight, {
-        toValue: this.state.buttons * 51.3 + 56
+        toValue: this.state.buttons * 51.3 + 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 1
+        toValue: 1,
+        useNativeDriver: true
       }).start();
     } else {
       this.setState({
         active: false
       });
       Animated.spring(this.containerHeight, {
-        toValue: 56
+        toValue: 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 0
+        toValue: 0,
+        useNativeDriver: true
       }).start();
     }
   }
@@ -345,62 +349,74 @@ class Fab extends Component {
   leftAnimate() {
     if (!this.props.active) {
       Animated.spring(this.containerWidth, {
-        toValue: this.state.buttons * 51.3 + 56
+        toValue: this.state.buttons * 51.3 + 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 1
+        toValue: 1,
+        useNativeDriver: true
       }).start();
     } else {
       this.setState({
         active: false
       });
       Animated.spring(this.containerHeight, {
-        toValue: 56
+        toValue: 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 0
+        toValue: 0,
+        useNativeDriver: true
       }).start();
     }
   }
 
   rightAnimate() {
     if (!this.props.active) {
       Animated.spring(this.containerWidth, {
-        toValue: this.state.buttons * 51.3 + 56
+        toValue: this.state.buttons * 51.3 + 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 1
+        toValue: 1,
+        useNativeDriver: true
       }).start();
     } else {
       this.setState({
         active: false
       });
       Animated.spring(this.containerHeight, {
-        toValue: 56
+        toValue: 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 0
+        toValue: 0,
+        useNativeDriver: true
       }).start();
     }
   }
 
   downAnimate() {
     if (!this.props.active) {
       Animated.spring(this.containerHeight, {
-        toValue: 56
+        toValue: 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 1
+        toValue: 1,
+        useNativeDriver: true
       }).start();
     } else {
       this.setState({
         active: false
       });
       Animated.spring(this.containerHeight, {
-        toValue: 56
+        toValue: 56,
+        useNativeDriver: true
       }).start();
       Animated.spring(this.buttonScale, {
-        toValue: 0
+        toValue: 0,
+        useNativeDriver: true
       }).start();
     }
   }

diff --git a/src/basic/Item.js b/src/basic/Item.js
@@ -60,22 +60,26 @@ class Item extends Component {
   floatBack() {
     Animated.timing(this.state.topAnim, {
       toValue: 18,
-      duration: 150
+      duration: 150,
+      useNativeDriver: true
     }).start();
     Animated.timing(this.state.opacAnim, {
       toValue: 1,
-      duration: 150
+      duration: 150,
+      useNativeDriver: true
     }).start();
   }
 
   floatUp(e) {
     Animated.timing(this.state.topAnim, {
       toValue: e || -22,
-      duration: 150
+      duration: 150,
+      useNativeDriver: true
     }).start();
     Animated.timing(this.state.opacAnim, {
       toValue: 0.7,
-      duration: 150
+      duration: 150,
+      useNativeDriver: true
     }).start();
   }
 

diff --git a/src/basic/SwipeRow.js b/src/basic/SwipeRow.js
@@ -58,11 +58,7 @@ class SwipeRow extends Component {
   }
 
   getPreviewAnimation(toValue, delay) {
-    return Animated.timing(this._translateX, {
-      duration: this.props.previewDuration,
-      toValue,
-      delay
-    });
+    return Animated.timing(this._translateX, { duration: this.props.previewDuration, toValue, delay, useNativeDriver: true});
   }
 
   onContentLayout(e) {
@@ -188,18 +184,21 @@ class SwipeRow extends Component {
     this.manuallySwipeRow(this.props.rightOpenValue);
   }
 
-  manuallySwipeRow(toValue) {
-    Animated.spring(this._translateX, {
-      toValue,
-      friction: this.props.friction,
-      tension: this.props.tension
-    }).start(_ => {
-      if (toValue === 0) {
-        this.props.onRowDidClose && this.props.onRowDidClose();
-      } else {
-        this.props.onRowDidOpen && this.props.onRowDidOpen();
-      }
-    });
+
+	manuallySwipeRow(toValue) {
+		Animated.spring(this._translateX, {
+			toValue,
+			friction: this.props.friction,
+			tension: this.props.tension,
+      useNativeDriver: true
+		}).start(_ => {
+			if (toValue === 0) {
+				this.props.onRowDidClose && this.props.onRowDidClose();
+			} else {
+				this.props.onRowDidOpen && this.props.onRowDidOpen();
+			}
+		});
+
 
     if (toValue === 0) {
       this.props.onRowClose && this.props.onRowClose();