24ark / react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
Apache License 2.0
1.43k stars 312 forks source link

useAnimatedDriver is now required on RN 0.62 #92

Closed osamaaamer95 closed 4 years ago

osamaaamer95 commented 4 years ago

Description

useAnimatedDriver is now required in RN 0.62 as mentioned here.

Setting useNativeDriver is now required to support switching the default in the future.

Screenshots (if appropriate):

image

osamaaamer95 commented 4 years ago

Patch file that can be used with patch-package

diff --git a/node_modules/react-native-step-indicator/StepIndicator.js b/node_modules/react-native-step-indicator/StepIndicator.js
index 4c52f02..a009539 100644
--- a/node_modules/react-native-step-indicator/StepIndicator.js
+++ b/node_modules/react-native-step-indicator/StepIndicator.js
@@ -87,14 +87,14 @@ export default class StepIndicator extends Component {
     )
   }

-  componentWillReceiveProps (nextProps) {
-    if (nextProps.customStyles !== this.props.customStyles) {
+  componentDidUpdate (prevProps) {
+    if (prevProps.customStyles !== this.props.customStyles) {
       this.setState(state => ({
-        customStyles: Object.assign(state.customStyles, nextProps.customStyles)
+        customStyles: Object.assign(state.customStyles, this.props.customStyles)
       }))
     }
-    if (nextProps.currentPosition !== this.props.currentPosition) {
-      this.onCurrentPositionChanged(nextProps.currentPosition)
+    if (prevProps.currentPosition !== this.props.currentPosition) {
+      this.onCurrentPositionChanged(this.props.currentPosition)
     }
   }

@@ -396,16 +396,19 @@ export default class StepIndicator extends Component {
     Animated.sequence([
       Animated.timing(this.progressAnim, {
         toValue: animateToPosition,
-        duration: 200
+        duration: 200,
+        useNativeDriver: false
       }),
       Animated.parallel([
         Animated.timing(this.sizeAnim, {
           toValue: this.state.customStyles.currentStepIndicatorSize,
-          duration: 100
+          duration: 100,
+          useNativeDriver: false
         }),
         Animated.timing(this.borderRadiusAnim, {
           toValue: this.state.customStyles.currentStepIndicatorSize / 2,
-          duration: 100
+          duration: 100,
+          useNativeDriver: false
         })
       ])
     ]).start()
esdotzed commented 4 years ago

Thanks a lot, time saver!!! @osamaaamer95

24ark commented 4 years ago

Version 1.0.3 should fix this issue: https://github.com/24ark/react-native-step-indicator/blob/1df202c5f819b58445c2b1b99a0e08dc8398f4e0/src/index.tsx#L401