react-native 0.69.3 → 0.70.0-rc.2

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -21,7 +21,12 @@ import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
 import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 
-type ColorListenerCallback = (value: string) => mixed;
+export type AnimatedColorConfig = $ReadOnly<{
+  useNativeDriver: boolean,
+}>;
+
+type ColorListenerCallback = (value: ColorValue) => mixed;
+
 export type RgbaValue = {
   +r: number,
   +g: number,
@@ -29,6 +34,7 @@ export type RgbaValue = {
   +a: number,
   ...
 };
+
 type RgbaAnimatedValue = {
   +r: AnimatedValue,
   +g: AnimatedValue,
@@ -37,6 +43,8 @@ type RgbaAnimatedValue = {
   ...
 };
 
+const NativeAnimatedAPI = NativeAnimatedHelper.API;
+
 const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
 let _uniqueId = 1;
 
@@ -116,7 +124,10 @@ export default class AnimatedColor extends AnimatedWithChildren {
     ...
   } = {};
 
-  constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
+  constructor(
+    valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue),
+    config?: ?AnimatedColorConfig,
+  ) {
     super();
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
       valueIn ?? defaultColor;
@@ -144,12 +155,9 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.g = new AnimatedValue(initColor.g);
       this.b = new AnimatedValue(initColor.b);
       this.a = new AnimatedValue(initColor.a);
-
-      if (this.nativeColor) {
-        if (!this.__isNative) {
-          this.__makeNative();
-        }
-      }
+    }
+    if (this.nativeColor || (config && config.useNativeDriver)) {
+      this.__makeNative();
     }
   }
 
@@ -158,34 +166,43 @@ export default class AnimatedColor extends AnimatedWithChildren {
    * and update all the bound properties.
    */
   setValue(value: RgbaValue | ColorValue): void {
-    this.nativeColor = null;
+    let shouldUpdateNodeConfig = false;
+    if (this.__isNative) {
+      const nativeTag = this.__getNativeTag();
+      NativeAnimatedAPI.setWaitingForIdentifier(nativeTag.toString());
+    }
 
     const processedColor: RgbaValue | NativeColorValue =
       processColor(value) ?? defaultColor;
     if (isRgbaValue(processedColor)) {
-      // $FlowIgnore[incompatible-cast] - Type is verified above
-      const rgbaValue: RgbaValue = (processedColor: RgbaValue);
+      // $FlowIgnore[incompatible-type] - Type is verified above
+      const rgbaValue: RgbaValue = processedColor;
       this.r.setValue(rgbaValue.r);
       this.g.setValue(rgbaValue.g);
       this.b.setValue(rgbaValue.b);
       this.a.setValue(rgbaValue.a);
+      if (this.nativeColor != null) {
+        this.nativeColor = null;
+        shouldUpdateNodeConfig = true;
+      }
     } else {
-      // $FlowIgnore[incompatible-cast] - Type is verified above
-      this.nativeColor = (processedColor: NativeColorValue);
-    }
-
-    if (this.nativeColor) {
-      if (!this.__isNative) {
-        this.__makeNative();
+      // $FlowIgnore[incompatible-type] - Type is verified above
+      const nativeColor: NativeColorValue = processedColor;
+      if (this.nativeColor !== nativeColor) {
+        this.nativeColor = nativeColor;
+        shouldUpdateNodeConfig = true;
       }
+    }
 
+    if (this.__isNative) {
       const nativeTag = this.__getNativeTag();
-      NativeAnimatedHelper.API.setWaitingForIdentifier(nativeTag.toString());
-      NativeAnimatedHelper.API.updateAnimatedNodeConfig(
-        nativeTag,
-        this.__getNativeConfig(),
-      );
-      NativeAnimatedHelper.API.unsetWaitingForIdentifier(nativeTag.toString());
+      if (shouldUpdateNodeConfig) {
+        NativeAnimatedAPI.updateAnimatedNodeConfig(
+          nativeTag,
+          this.__getNativeConfig(),
+        );
+      }
+      NativeAnimatedAPI.unsetWaitingForIdentifier(nativeTag.toString());
     }
   }
 
@@ -232,7 +249,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
    */
   addListener(callback: ColorListenerCallback): string {
     const id = String(_uniqueId++);
-    const jointCallback = ({value: number}) => {
+    const jointCallback = ({value: number}: any) => {
       callback(this.__getValue());
     };
     this._listeners[id] = {
@@ -272,7 +289,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
    * final value after stopping the animation, which is useful for updating
    * state to match the animation position with layout.
    */
-  stopAnimation(callback?: (value: string) => void): void {
+  stopAnimation(callback?: ColorListenerCallback): void {
     this.r.stopAnimation();
     this.g.stopAnimation();
     this.b.stopAnimation();
@@ -283,7 +300,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   /**
    * Stops any animation and resets the value to its original.
    */
-  resetAnimation(callback?: (value: string) => void): void {
+  resetAnimation(callback?: ColorListenerCallback): void {
     this.r.resetAnimation();
     this.g.resetAnimation();
     this.b.resetAnimation();
@@ -291,8 +308,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
     callback && callback(this.__getValue());
   }
 
-  __getValue(): string {
-    return `rgba(${this.r.__getValue()}, ${this.g.__getValue()}, ${this.b.__getValue()}, ${this.a.__getValue()})`;
+  __getValue(): ColorValue {
+    if (this.nativeColor != null) {
+      return this.nativeColor;
+    } else {
+      return `rgba(${this.r.__getValue()}, ${this.g.__getValue()}, ${this.b.__getValue()}, ${this.a.__getValue()})`;
+    }
   }
 
   __attach(): void {

package/Libraries/Animated/nodes/AnimatedDiffClamp.js

@@ -38,7 +38,9 @@ class AnimatedDiffClamp extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
 

package/Libraries/Animated/nodes/AnimatedDivision.js

@@ -54,7 +54,9 @@ class AnimatedDivision extends AnimatedWithChildren {
     return a / b;
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
 

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -23,9 +23,9 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType = $ReadOnly<{
+export type InterpolationConfigType<OutputT: number | string> = $ReadOnly<{
   inputRange: $ReadOnlyArray<number>,
-  outputRange: $ReadOnlyArray<number> | $ReadOnlyArray<string>,
+  outputRange: $ReadOnlyArray<OutputT>,
   easing?: (input: number) => number,
   extrapolate?: ExtrapolateType,
   extrapolateLeft?: ExtrapolateType,
@@ -38,14 +38,14 @@ const linear = (t: number) => t;
  * Very handy helper to map input ranges to output ranges with an easing
  * function and custom behavior outside of the ranges.
  */
-function createInterpolation(
-  config: InterpolationConfigType,
-): (input: number) => number | string {
+function createInterpolation<OutputT: number | string>(
+  config: InterpolationConfigType<OutputT>,
+): (input: number) => OutputT {
   if (config.outputRange && typeof config.outputRange[0] === 'string') {
-    return createInterpolationFromStringOutputRange(config);
+    return (createInterpolationFromStringOutputRange((config: any)): any);
   }
 
-  const outputRange: Array<number> = (config.outputRange: any);
+  const outputRange: $ReadOnlyArray<number> = (config.outputRange: any);
 
   const inputRange = config.inputRange;
 
@@ -87,7 +87,7 @@ function createInterpolation(
     );
 
     const range = findRange(input, inputRange);
-    return interpolate(
+    return (interpolate(
       input,
       inputRange[range],
       inputRange[range + 1],
@@ -96,7 +96,7 @@ function createInterpolation(
       easing,
       extrapolateLeft,
       extrapolateRight,
-    );
+    ): any);
   };
 }
 
@@ -195,7 +195,7 @@ const stringShapeRegex = /[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/g;
  *   -45deg                  // values with units
  */
 function createInterpolationFromStringOutputRange(
-  config: InterpolationConfigType,
+  config: InterpolationConfigType<string>,
 ): (input: number) => string {
   let outputRange: Array<string> = (config.outputRange: any);
   invariant(outputRange.length >= 2, 'Bad output range');
@@ -299,17 +299,19 @@ function checkInfiniteRange(name: string, arr: $ReadOnlyArray<number>) {
   );
 }
 
-class AnimatedInterpolation extends AnimatedWithChildren {
+class AnimatedInterpolation<
+  OutputT: number | string,
+> extends AnimatedWithChildren {
   // Export for testing.
   static __createInterpolation: (
-    config: InterpolationConfigType,
-  ) => (input: number) => number | string = createInterpolation;
+    config: InterpolationConfigType<OutputT>,
+  ) => (input: number) => OutputT = createInterpolation;
 
   _parent: AnimatedNode;
-  _config: InterpolationConfigType;
-  _interpolation: (input: number) => number | string;
+  _config: InterpolationConfigType<OutputT>;
+  _interpolation: (input: number) => OutputT;
 
-  constructor(parent: AnimatedNode, config: InterpolationConfigType) {
+  constructor(parent: AnimatedNode, config: InterpolationConfigType<OutputT>) {
     super();
     this._parent = parent;
     this._config = config;
@@ -330,7 +332,9 @@ class AnimatedInterpolation extends AnimatedWithChildren {
     return this._interpolation(parentValue);
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<NewOutputT: number | string>(
+    config: InterpolationConfigType<NewOutputT>,
+  ): AnimatedInterpolation<NewOutputT> {
     return new AnimatedInterpolation(this, config);
   }
 
@@ -343,7 +347,7 @@ class AnimatedInterpolation extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __transformDataType(range: Array<any>): Array<any> {
+  __transformDataType(range: $ReadOnlyArray<OutputT>): Array<any> {
     return range.map(NativeAnimatedHelper.transformDataType);
   }
 
@@ -355,9 +359,6 @@ class AnimatedInterpolation extends AnimatedWithChildren {
     return {
       inputRange: this._config.inputRange,
       // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
-      /* $FlowFixMe[incompatible-call] (>=0.38.0) - Flow error detected during
-       * the deployment of v0.38.0. To see the error, remove this comment and
-       * run flow */
       outputRange: this.__transformDataType(this._config.outputRange),
       extrapolateLeft:
         this._config.extrapolateLeft || this._config.extrapolate || 'extend',

package/Libraries/Animated/nodes/AnimatedModulo.js

@@ -38,7 +38,9 @@ class AnimatedModulo extends AnimatedWithChildren {
     );
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
 

package/Libraries/Animated/nodes/AnimatedMultiplication.js

@@ -38,10 +38,11 @@ class AnimatedMultiplication extends AnimatedWithChildren {
     return this._a.__getValue() * this._b.__getValue();
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
-
   __attach(): void {
     this._a.__addChild(this);
     this._b.__addChild(this);

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -10,16 +10,15 @@
 
 'use strict';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+const ReactNative = require('../../Renderer/shims/ReactNative');
 const {AnimatedEvent} = require('../AnimatedEvent');
+const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 const AnimatedNode = require('./AnimatedNode');
 const AnimatedStyle = require('./AnimatedStyle');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-const ReactNative = require('../../Renderer/shims/ReactNative');
-
 const invariant = require('invariant');
 
-import type {PlatformConfig} from '../AnimatedPlatformConfig';
-
 class AnimatedProps extends AnimatedNode {
   _props: Object;
   _animatedView: any;
@@ -37,15 +36,23 @@ class AnimatedProps extends AnimatedNode {
     this._callback = callback;
   }
 
-  __getValue(): Object {
-    const props = {};
+  __getValue(initialProps: ?Object): Object {
+    const props: {[string]: any | ((...args: any) => void)} = {};
     for (const key in this._props) {
       const value = this._props[key];
       if (value instanceof AnimatedNode) {
-        if (!value.__isNative || value instanceof AnimatedStyle) {
-          // We cannot use value of natively driven nodes this way as the value we have access from
-          // JS may not be up to date.
+        // During initial render we want to use the initial value of both natively and non-natively
+        // driven nodes. On subsequent renders, we cannot use the value of natively driven nodes
+        // as they may not be up to date, so we use the initial value to ensure that values of
+        // native animated nodes do not impact rerenders.
+        if (value instanceof AnimatedStyle) {
+          props[key] = value.__getValue(
+            initialProps ? initialProps.style : null,
+          );
+        } else if (!initialProps || !value.__isNative) {
           props[key] = value.__getValue();
+        } else if (initialProps.hasOwnProperty(key)) {
+          props[key] = initialProps[key];
         }
       } else if (value instanceof AnimatedEvent) {
         props[key] = value.__getHandler();
@@ -53,11 +60,12 @@ class AnimatedProps extends AnimatedNode {
         props[key] = value;
       }
     }
+
     return props;
   }
 
   __getAnimatedValue(): Object {
-    const props = {};
+    const props: {[string]: any} = {};
     for (const key in this._props) {
       const value = this._props[key];
       if (value instanceof AnimatedNode) {
@@ -165,7 +173,7 @@ class AnimatedProps extends AnimatedNode {
   }
 
   __getNativeConfig(): Object {
-    const propsConfig = {};
+    const propsConfig: {[string]: number} = {};
     for (const propKey in this._props) {
       const value = this._props[propKey];
       if (value instanceof AnimatedNode) {

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -10,21 +10,20 @@
 
 'use strict';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+const flattenStyle = require('../../StyleSheet/flattenStyle');
+const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 const AnimatedNode = require('./AnimatedNode');
 const AnimatedTransform = require('./AnimatedTransform');
 const AnimatedWithChildren = require('./AnimatedWithChildren');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-
-const flattenStyle = require('../../StyleSheet/flattenStyle');
-
-import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 class AnimatedStyle extends AnimatedWithChildren {
   _style: Object;
 
   constructor(style: any) {
     super();
-    style = flattenStyle(style) || {};
+    style = flattenStyle(style) || ({}: {[string]: any});
     if (style.transform) {
       style = {
         ...style,
@@ -35,19 +34,23 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style: any) {
-    const updatedStyle = {};
+  _walkStyleAndGetValues(style: any, initialStyle: ?Object) {
+    const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];
       if (value instanceof AnimatedNode) {
-        if (!value.__isNative) {
-          // We cannot use value of natively driven nodes this way as the value we have access from
-          // JS may not be up to date.
+        // During initial render we want to use the initial value of both natively and non-natively
+        // driven nodes. On subsequent renders, we cannot use the value of natively driven nodes
+        // as they may not be up to date, so we use the initial value to ensure that values of
+        // native animated nodes do not impact rerenders.
+        if (!initialStyle || !value.__isNative) {
           updatedStyle[key] = value.__getValue();
+        } else if (initialStyle.hasOwnProperty(key)) {
+          updatedStyle[key] = initialStyle[key];
         }
       } else if (value && !Array.isArray(value) && typeof value === 'object') {
         // Support animating nested values (for example: shadowOffset.height)
-        updatedStyle[key] = this._walkStyleAndGetValues(value);
+        updatedStyle[key] = this._walkStyleAndGetValues(value, initialStyle);
       } else {
         updatedStyle[key] = value;
       }
@@ -55,13 +58,13 @@ class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(): Object {
-    return this._walkStyleAndGetValues(this._style);
+  __getValue(initialStyle: ?Object): Object {
+    return this._walkStyleAndGetValues(this._style, initialStyle);
   }
 
   // Recursively get animated values for nested styles (like iOS's shadowOffset)
   _walkStyleAndGetAnimatedValues(style: any) {
-    const updatedStyle = {};
+    const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];
       if (value instanceof AnimatedNode) {
@@ -108,7 +111,7 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   __getNativeConfig(): Object {
-    const styleConfig = {};
+    const styleConfig: {[string]: ?number} = {};
     for (const styleKey in this._style) {
       if (this._style[styleKey] instanceof AnimatedNode) {
         const style = this._style[styleKey];

package/Libraries/Animated/nodes/AnimatedSubtraction.js

@@ -38,7 +38,9 @@ class AnimatedSubtraction extends AnimatedWithChildren {
     return this._a.__getValue() - this._b.__getValue();
   }
 
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
 

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
+const NativeAnimatedHelper = require('../NativeAnimatedHelper');
 const AnimatedNode = require('./AnimatedNode');
 const AnimatedWithChildren = require('./AnimatedWithChildren');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
-
-import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 class AnimatedTransform extends AnimatedWithChildren {
   _transforms: $ReadOnlyArray<Object>;
@@ -38,7 +38,7 @@ class AnimatedTransform extends AnimatedWithChildren {
 
   __getValue(): $ReadOnlyArray<Object> {
     return this._transforms.map(transform => {
-      const result = {};
+      const result: {[string]: any} = {};
       for (const key in transform) {
         const value = transform[key];
         if (value instanceof AnimatedNode) {
@@ -53,7 +53,7 @@ class AnimatedTransform extends AnimatedWithChildren {
 
   __getAnimatedValue(): $ReadOnlyArray<Object> {
     return this._transforms.map(transform => {
-      const result = {};
+      const result: {[string]: any} = {};
       for (const key in transform) {
         const value = transform[key];
         if (value instanceof AnimatedNode) {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -20,6 +20,10 @@ import type Animation, {EndCallback} from '../animations/Animation';
 import type {InterpolationConfigType} from './AnimatedInterpolation';
 import type AnimatedTracking from './AnimatedTracking';
 
+export type AnimatedValueConfig = $ReadOnly<{
+  useNativeDriver: boolean,
+}>;
+
 const NativeAnimatedAPI = NativeAnimatedHelper.API;
 
 /**
@@ -87,7 +91,7 @@ class AnimatedValue extends AnimatedWithChildren {
   _animation: ?Animation;
   _tracking: ?AnimatedTracking;
 
-  constructor(value: number) {
+  constructor(value: number, config?: ?AnimatedValueConfig) {
     super();
     if (typeof value !== 'number') {
       throw new Error('AnimatedValue: Attempting to set value to undefined');
@@ -95,6 +99,9 @@ class AnimatedValue extends AnimatedWithChildren {
     this._startingValue = this._value = value;
     this._offset = 0;
     this._animation = null;
+    if (config && config.useNativeDriver) {
+      this.__makeNative();
+    }
   }
 
   __detach() {
@@ -127,9 +134,9 @@ class AnimatedValue extends AnimatedWithChildren {
       !this.__isNative /* don't perform a flush for natively driven values */,
     );
     if (this.__isNative) {
-      _executeAsAnimatedBatch(this.__getNativeTag().toString(), () => {
-        NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value);
-      });
+      _executeAsAnimatedBatch(this.__getNativeTag().toString(), () =>
+        NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value),
+      );
     }
   }
 
@@ -219,7 +226,9 @@ class AnimatedValue extends AnimatedWithChildren {
    * Interpolates the value before updating the property, e.g. mapping 0-1 to
    * 0-10.
    */
-  interpolate(config: InterpolationConfigType): AnimatedInterpolation {
+  interpolate<OutputT: number | string>(
+    config: InterpolationConfigType<OutputT>,
+  ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
   }
 

package/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -10,11 +10,16 @@
 
 'use strict';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
+
 const AnimatedValue = require('./AnimatedValue');
 const AnimatedWithChildren = require('./AnimatedWithChildren');
 
 const invariant = require('invariant');
 
+export type AnimatedValueXYConfig = $ReadOnly<{
+  useNativeDriver: boolean,
+}>;
 type ValueXYListenerCallback = (value: {
   x: number,
   y: number,
@@ -47,6 +52,7 @@ class AnimatedValueXY extends AnimatedWithChildren {
       +y: number | AnimatedValue,
       ...
     },
+    config?: ?AnimatedValueXYConfig,
   ) {
     super();
     const value: any = valueIn || {x: 0, y: 0}; // @flowfixme: shouldn't need `: any`
@@ -63,6 +69,9 @@ class AnimatedValueXY extends AnimatedWithChildren {
       this.y = value.y;
     }
     this._listeners = {};
+    if (config && config.useNativeDriver) {
+      this.__makeNative();
+    }
   }
 
   /**
@@ -168,7 +177,7 @@ class AnimatedValueXY extends AnimatedWithChildren {
    */
   addListener(callback: ValueXYListenerCallback): string {
     const id = String(_uniqueId++);
-    const jointCallback = ({value: number}) => {
+    const jointCallback = ({value: number}: any) => {
       callback(this.__getValue());
     };
     this._listeners[id] = {
@@ -221,6 +230,24 @@ class AnimatedValueXY extends AnimatedWithChildren {
   getTranslateTransform(): Array<{[key: string]: AnimatedValue, ...}> {
     return [{translateX: this.x}, {translateY: this.y}];
   }
+
+  __attach(): void {
+    this.x.__addChild(this);
+    this.y.__addChild(this);
+    super.__attach();
+  }
+
+  __detach(): void {
+    this.x.__removeChild(this);
+    this.y.__removeChild(this);
+    super.__detach();
+  }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    this.x.__makeNative(platformConfig);
+    this.y.__makeNative(platformConfig);
+    super.__makeNative(platformConfig);
+  }
 }
 
 module.exports = AnimatedValueXY;

package/Libraries/Animated/useAnimatedProps.js

@@ -82,6 +82,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
           scheduleUpdate();
         } else if (!node.__isNative) {
           // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[incompatible-use]
           instance.setNativeProps(node.__getAnimatedValue());
         } else {
           throw new Error(