From 9a41dc2f4e807ba612908b7769ca0e164b6062ed Mon Sep 17 00:00:00 2001 From: Mx Date: Fri, 3 Jul 2020 23:35:01 +0100 Subject: [PATCH 1/2] bug/add-animated-missing-use-native-driver --- src/components/indicator/index.js | 77 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 41 deletions(-) diff --git a/src/components/indicator/index.js b/src/components/indicator/index.js index b2de0a8..71976ae 100644 --- a/src/components/indicator/index.js +++ b/src/components/indicator/index.js @@ -1,6 +1,6 @@ -import PropTypes from 'prop-types'; -import React, { PureComponent } from 'react'; -import { Animated, Easing } from 'react-native'; +import PropTypes from "prop-types"; +import React, { PureComponent } from "react"; +import { Animated, Easing } from "react-native"; export default class Indicator extends PureComponent { static defaultProps = { @@ -49,7 +49,7 @@ export default class Indicator extends PureComponent { this.state = { progress: new Animated.Value(0), - hideAnimation: new Animated.Value(animating? 1 : 0), + hideAnimation: new Animated.Value(animating ? 1 : 0), }; } @@ -76,9 +76,11 @@ export default class Indicator extends PureComponent { let { hideAnimation } = this.state; let { hideAnimationDuration: duration } = this.props; - Animated - .timing(hideAnimation, { toValue: animating? 1 : 0, duration }) - .start(); + Animated.timing(hideAnimation, { + duration, + toValue: animating ? 1 : 0, + useNativeDriver: true, + }).start(); } } @@ -90,18 +92,15 @@ export default class Indicator extends PureComponent { return; } - let animation = Animated - .timing(progress, { - duration: animationDuration, - easing: animationEasing, - useNativeDriver: true, - isInteraction: interaction, - toValue: 1, - }); + let animation = Animated.timing(progress, { + duration: animationDuration, + easing: animationEasing, + useNativeDriver: true, + isInteraction: interaction, + toValue: 1, + }); - Animated - .loop(animation) - .start(); + Animated.loop(animation).start(); this.animationState = 1; } @@ -113,11 +112,10 @@ export default class Indicator extends PureComponent { return; } - let listener = progress - .addListener(({ value }) => { - progress.removeListener(listener); - progress.stopAnimation(() => this.saveAnimation(value)); - }); + let listener = progress.addListener(({ value }) => { + progress.removeListener(listener); + progress.stopAnimation(() => this.saveAnimation(value)); + }); this.animationState = -1; } @@ -141,21 +139,19 @@ export default class Indicator extends PureComponent { return; } - Animated - .timing(progress, { - useNativeDriver: true, - isInteraction: interaction, - duration: (1 - this.savedValue) * animationDuration, - toValue: 1, - }) - .start(({ finished }) => { - if (finished) { - progress.setValue(0); - - this.animationState = 0; - this.startAnimation(); - } - }); + Animated.timing(progress, { + useNativeDriver: true, + isInteraction: interaction, + duration: (1 - this.savedValue) * animationDuration, + toValue: 1, + }).start(({ finished }) => { + if (finished) { + progress.setValue(0); + + this.animationState = 0; + this.startAnimation(); + } + }); this.savedValue = 0; this.animationState = 1; @@ -165,7 +161,7 @@ export default class Indicator extends PureComponent { let { progress } = this.state; let { renderComponent, count } = this.props; - if ('function' === typeof renderComponent) { + if ("function" === typeof renderComponent) { return renderComponent({ index, count, progress }); } @@ -177,8 +173,7 @@ export default class Indicator extends PureComponent { let { count, hidesWhenStopped, ...props } = this.props; if (hidesWhenStopped) { - props.style = [] - .concat(props.style || [], { opacity: hideAnimation }); + props.style = [].concat(props.style || [], { opacity: hideAnimation }); } return ( From 89cb24dd232117afa231dd547984f33fecf82a60 Mon Sep 17 00:00:00 2001 From: Mx Date: Fri, 3 Jul 2020 23:41:55 +0100 Subject: [PATCH 2/2] - removed formatting changes --- src/components/indicator/index.js | 71 +++++++++++++++++-------------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/src/components/indicator/index.js b/src/components/indicator/index.js index 71976ae..0bc6ac7 100644 --- a/src/components/indicator/index.js +++ b/src/components/indicator/index.js @@ -1,6 +1,6 @@ -import PropTypes from "prop-types"; -import React, { PureComponent } from "react"; -import { Animated, Easing } from "react-native"; +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; +import { Animated, Easing } from 'react-native'; export default class Indicator extends PureComponent { static defaultProps = { @@ -49,7 +49,7 @@ export default class Indicator extends PureComponent { this.state = { progress: new Animated.Value(0), - hideAnimation: new Animated.Value(animating ? 1 : 0), + hideAnimation: new Animated.Value(animating? 1 : 0), }; } @@ -78,7 +78,7 @@ export default class Indicator extends PureComponent { Animated.timing(hideAnimation, { duration, - toValue: animating ? 1 : 0, + toValue: animating? 1 : 0, useNativeDriver: true, }).start(); } @@ -92,15 +92,18 @@ export default class Indicator extends PureComponent { return; } - let animation = Animated.timing(progress, { - duration: animationDuration, - easing: animationEasing, - useNativeDriver: true, - isInteraction: interaction, - toValue: 1, - }); + let animation = Animated + .timing(progress, { + duration: animationDuration, + easing: animationEasing, + useNativeDriver: true, + isInteraction: interaction, + toValue: 1, + }); - Animated.loop(animation).start(); + Animated + .loop(animation) + .start(); this.animationState = 1; } @@ -112,10 +115,11 @@ export default class Indicator extends PureComponent { return; } - let listener = progress.addListener(({ value }) => { - progress.removeListener(listener); - progress.stopAnimation(() => this.saveAnimation(value)); - }); + let listener = progress + .addListener(({ value }) => { + progress.removeListener(listener); + progress.stopAnimation(() => this.saveAnimation(value)); + }); this.animationState = -1; } @@ -139,19 +143,21 @@ export default class Indicator extends PureComponent { return; } - Animated.timing(progress, { - useNativeDriver: true, - isInteraction: interaction, - duration: (1 - this.savedValue) * animationDuration, - toValue: 1, - }).start(({ finished }) => { - if (finished) { - progress.setValue(0); - - this.animationState = 0; - this.startAnimation(); - } - }); + Animated + .timing(progress, { + useNativeDriver: true, + isInteraction: interaction, + duration: (1 - this.savedValue) * animationDuration, + toValue: 1, + }) + .start(({ finished }) => { + if (finished) { + progress.setValue(0); + + this.animationState = 0; + this.startAnimation(); + } + }); this.savedValue = 0; this.animationState = 1; @@ -161,7 +167,7 @@ export default class Indicator extends PureComponent { let { progress } = this.state; let { renderComponent, count } = this.props; - if ("function" === typeof renderComponent) { + if ('function' === typeof renderComponent) { return renderComponent({ index, count, progress }); } @@ -173,7 +179,8 @@ export default class Indicator extends PureComponent { let { count, hidesWhenStopped, ...props } = this.props; if (hidesWhenStopped) { - props.style = [].concat(props.style || [], { opacity: hideAnimation }); + props.style = [] + .concat(props.style || [], { opacity: hideAnimation }); } return (