fix tracking bug in animatedValue

Author: drcmda

examples/demos/gestures/index.js

@@ -18,7 +18,7 @@ export default class extends React.Component {
                         <div className="item" style={{ backgroundColor: xDelta < 0 ? '#FF1C68' : '#14D790' }}>
                             <div className="bubble" style={{ transform: `scale(${scale})`, justifySelf: xDelta < 0 ? 'end' : 'start' }} />
                             <div className="fg" style={{ transform: `translate3d(${x}px,0,0)` }}>
-                                Slide me ...
+                                Slide me
                             </div>
                         </div>
                     )}

src/animated/Animated.js

@@ -1,4 +1,4 @@
-class Animated {
+export default class Animated {
     __attach() {}
     __detach() {}
     __getValue() {}
@@ -11,5 +11,3 @@ class Animated {
         return []
     }
 }
-
-export default Animated

src/animated/AnimatedArray.js

@@ -2,7 +2,7 @@ import Animated from './Animated'
 import AnimatedValue from './AnimatedValue'
 import AnimatedWithChildren from './AnimatedWithChildren'
 
-export default class extends AnimatedWithChildren {
+export default class AnimatedArray extends AnimatedWithChildren {
     constructor(array) {
         super()
         this._values = array.map(n => new AnimatedValue(n))

src/animated/AnimatedProps.js

@@ -1,7 +1,7 @@
 import Animated from './Animated'
 import AnimatedStyle from './AnimatedStyle'
 
-export default class extends Animated {
+export default class AnimatedProps extends Animated {
     constructor(props, callback) {
         super()
         if (props.style) {

src/animated/AnimatedStyle.js

@@ -2,7 +2,7 @@ import Animated from './Animated'
 import AnimatedWithChildren from './AnimatedWithChildren'
 import FlattenStyle from './injectable/FlattenStyle'
 
-export default class extends AnimatedWithChildren {
+export default class AnimatedStyle extends AnimatedWithChildren {
     constructor(style) {
         super()
         style = FlattenStyle.current(style) || {}

src/animated/AnimatedTemplate.js

@@ -1,7 +1,7 @@
 import Animated from './Animated'
 import AnimatedWithChildren from './AnimatedWithChildren'
 
-export default class extends AnimatedWithChildren {
+export default class AnimatedTemplate extends AnimatedWithChildren {
     constructor(strings, values) {
         super()
         this._strings = strings

src/animated/AnimatedTracking.js

@@ -1,7 +1,7 @@
 import Animated from './Animated'
 import AnimatedValue from './AnimatedValue'
 
-export default class extends Animated {
+export default class AnimatedTracking extends Animated {
     constructor(value, parent, animationClass, animationConfig, callback) {
         super()
         this._value = value
@@ -10,6 +10,8 @@ export default class extends Animated {
         this._animationConfig = animationConfig
         this._callback = callback
         this.__attach()
+
+        this._hey = 1
     }
 
     __getValue() {

src/animated/AnimatedValue.js

@@ -39,7 +39,7 @@ function findAnimatedStyles(node, styles) {
  * mechanism at a time.  Using a new mechanism (e.g. starting a new animation,
  * or calling `setValue`) will stop any previous ones.
  */
-export default class extends AnimatedWithChildren {
+export default class AnimatedValue extends AnimatedWithChildren {
     constructor(value) {
         super()
         this._value = value
@@ -57,15 +57,14 @@ export default class extends AnimatedWithChildren {
     }
 
     _flush() {
-        if (this._animatedStyles.size === 0) findAnimatedStyles(this, this._animatedStyles)
+        if (this._animatedStyles.size === 0 || this._tracked) findAnimatedStyles(this, this._animatedStyles)
         this._animatedStyles.forEach(animatedStyle => animatedStyle.update())
     }
 
     _updateValue(value) {
         this._value = value
         this._flush()
-        for (var key in this._listeners)
-            this._listeners[key]({ value: this.__getValue() })
+        for (var key in this._listeners) this._listeners[key]({ value: this.__getValue() })
     }
 
     /**

src/animated/AnimatedWithChildren.js

@@ -1,12 +1,14 @@
 import Animated from './Animated'
+import AnimatedTracking from './AnimatedTracking'
 
-export default class extends Animated {
+export default class AnimatedWithChildren extends Animated {
     constructor() {
         super()
         this._children = []
     }
 
     __addChild(child) {
+        if (child instanceof AnimatedTracking) this._tracked = true
         if (this._children.length === 0) this.__attach()
         this._children.push(child)
     }

src/animated/Animation.js

@@ -1,7 +1,7 @@
 // Important note: start() and stop() will only be called at most once.
 // Once an animation has been stopped or finished its course, it will
 // not be reused.
-export default class {
+export default class Animation {
     start(fromValue, onUpdate, onEnd, previousAnimation) {}
 
     stop() {}