react-native-windows 0.0.0-canary.508 → 0.0.0-canary.511

package/.flowconfig

@@ -98,6 +98,8 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
+experimental.env_mode=ssa
+
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
@@ -118,4 +120,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.178.0
+^0.179.0

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -20,7 +20,10 @@ import type {
 } from './NativeAnimatedModule';
 import type {AnimationConfig, EndCallback} from './animations/Animation';
 import type {InterpolationConfigType} from './nodes/AnimatedInterpolation';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import invariant from 'invariant';
+import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 const NativeAnimatedModule =
@@ -36,24 +39,82 @@ let nativeEventEmitter;
 let waitingForQueuedOperations = new Set();
 let queueOperations = false;
 let queue: Array<() => void> = [];
+// $FlowFixMe
+let singleOpQueue: Array<any> = [];
+
+const useSingleOpBatching =
+  Platform.OS === 'android' &&
+  !!NativeAnimatedModule?.queueAndExecuteBatchedOperations &&
+  ReactNativeFeatureFlags.animatedShouldUseSingleOp();
+let flushQueueTimeout = null;
+
+const eventListenerGetValueCallbacks = {};
+const eventListenerAnimationFinishedCallbacks = {};
+let globalEventEmitterGetValueListener: ?EventSubscription = null;
+let globalEventEmitterAnimationFinishedListener: ?EventSubscription = null;
+
+const nativeOps: ?typeof NativeAnimatedModule = useSingleOpBatching
+  ? ((function () {
+      const apis = [
+        'createAnimatedNode', // 1
+        'updateAnimatedNodeConfig', // 2
+        'getValue', // 3
+        'startListeningToAnimatedNodeValue', // 4
+        'stopListeningToAnimatedNodeValue', // 5
+        'connectAnimatedNodes', // 6
+        'disconnectAnimatedNodes', // 7
+        'startAnimatingNode', // 8
+        'stopAnimation', // 9
+        'setAnimatedNodeValue', // 10
+        'setAnimatedNodeOffset', // 11
+        'flattenAnimatedNodeOffset', // 12
+        'extractAnimatedNodeOffset', // 13
+        'connectAnimatedNodeToView', // 14
+        'disconnectAnimatedNodeFromView', // 15
+        'restoreDefaultValues', // 16
+        'dropAnimatedNode', // 17
+        'addAnimatedEventToView', // 18
+        'removeAnimatedEventFromView', // 19
+        'addListener', // 20
+        'removeListener', // 21
+      ];
+      return apis.reduce((acc, functionName, i) => {
+        // These indices need to be kept in sync with the indices in native (see NativeAnimatedModule in Java, or the equivalent for any other native platform).
+        acc[functionName] = i + 1;
+        return acc;
+      }, {});
+    })(): $FlowFixMe)
+  : NativeAnimatedModule;
 
 /**
- * Simple wrappers around NativeAnimatedModule to provide flow and autocomplete support for
- * the native module methods
+ * Wrappers around NativeAnimatedModule to provide flow and autocomplete support for
+ * the native module methods, and automatic queue management on Android
  */
 const API = {
   getValue: function (
     tag: number,
     saveValueCallback: (value: number) => void,
   ): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() => {
-      NativeAnimatedModule.getValue(tag, saveValueCallback);
-    });
+    invariant(nativeOps, 'Native animated module is not available');
+    if (useSingleOpBatching) {
+      if (saveValueCallback) {
+        eventListenerGetValueCallbacks[tag] = saveValueCallback;
+      }
+      // $FlowFixMe
+      API.queueOperation(nativeOps.getValue, tag);
+    } else {
+      API.queueOperation(nativeOps.getValue, tag, saveValueCallback);
+    }
   },
   setWaitingForIdentifier: function (id: string): void {
     waitingForQueuedOperations.add(id);
     queueOperations = true;
+    if (
+      ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush() &&
+      flushQueueTimeout
+    ) {
+      clearTimeout(flushQueueTimeout);
+    }
   },
   unsetWaitingForIdentifier: function (id: string): void {
     waitingForQueuedOperations.delete(id);
@@ -64,73 +125,103 @@ const API = {
     }
   },
   disableQueue: function (): void {
+    invariant(nativeOps, 'Native animated module is not available');
+
+    if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
+      const prevTimeout = flushQueueTimeout;
+      clearImmediate(prevTimeout);
+      flushQueueTimeout = setImmediate(API.flushQueue);
+    } else {
+      API.flushQueue();
+    }
+  },
+  flushQueue: function (): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
+    flushQueueTimeout = null;
 
-    if (Platform.OS === 'android') {
-      NativeAnimatedModule.startOperationBatch();
+    // Early returns before calling any APIs
+    if (useSingleOpBatching && singleOpQueue.length === 0) {
+      return;
     }
-    for (let q = 0, l = queue.length; q < l; q++) {
-      queue[q]();
+    if (!useSingleOpBatching && queue.length === 0) {
+      return;
     }
-    queue.length = 0;
-    if (Platform.OS === 'android') {
-      NativeAnimatedModule.finishOperationBatch();
+
+    if (useSingleOpBatching) {
+      // Set up event listener for callbacks if it's not set up
+      if (
+        !globalEventEmitterGetValueListener ||
+        !globalEventEmitterAnimationFinishedListener
+      ) {
+        setupGlobalEventEmitterListeners();
+      }
+      // Single op batching doesn't use callback functions, instead we
+      // use RCTDeviceEventEmitter. This reduces overhead of sending lots of
+      // JSI functions across to native code; but also, TM infrastructure currently
+      // does not support packing a function into native arrays.
+      NativeAnimatedModule.queueAndExecuteBatchedOperations?.(singleOpQueue);
+      singleOpQueue.length = 0;
+    } else {
+      Platform.OS === 'android' && NativeAnimatedModule.startOperationBatch?.();
+      for (let q = 0, l = queue.length; q < l; q++) {
+        queue[q]();
+      }
+      queue.length = 0;
+      Platform.OS === 'android' &&
+        NativeAnimatedModule.finishOperationBatch?.();
     }
   },
-  queueOperation: (fn: () => void): void => {
+  queueOperation: <Args: $ReadOnlyArray<mixed>, Fn: (...Args) => void>(
+    fn: Fn,
+    ...args: Args
+  ): void => {
+    if (useSingleOpBatching) {
+      // Get the command ID from the queued function, and push that ID and any arguments needed to execute the operation
+      // $FlowFixMe: surprise, fn is actually a number
+      singleOpQueue.push(fn, ...args);
+      return;
+    }
+
     // If queueing is explicitly on, *or* the queue has not yet
     // been flushed, use the queue. This is to prevent operations
     // from being executed out of order.
     if (queueOperations || queue.length !== 0) {
-      queue.push(fn);
+      queue.push(() => fn(...args));
     } else {
-      fn();
+      fn(...args);
     }
   },
   createAnimatedNode: function (tag: number, config: AnimatedNodeConfig): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.createAnimatedNode(tag, config),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.createAnimatedNode, tag, config);
   },
   updateAnimatedNodeConfig: function (
     tag: number,
     config: AnimatedNodeConfig,
   ): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    if (typeof NativeAnimatedModule.updateAnimatedNodeConfig === 'function') {
-      API.queueOperation(() =>
-        // $FlowIgnore[not-a-function] - checked above
-        NativeAnimatedModule.updateAnimatedNodeConfig(tag, config),
-      );
+    invariant(nativeOps, 'Native animated module is not available');
+    if (nativeOps.updateAnimatedNodeConfig) {
+      API.queueOperation(nativeOps.updateAnimatedNodeConfig, tag, config);
     }
   },
   startListeningToAnimatedNodeValue: function (tag: number) {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.startListeningToAnimatedNodeValue(tag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.startListeningToAnimatedNodeValue, tag);
   },
   stopListeningToAnimatedNodeValue: function (tag: number) {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.stopListeningToAnimatedNodeValue(tag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.stopListeningToAnimatedNodeValue, tag);
   },
   connectAnimatedNodes: function (parentTag: number, childTag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.connectAnimatedNodes(parentTag, childTag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.connectAnimatedNodes, parentTag, childTag);
   },
   disconnectAnimatedNodes: function (
     parentTag: number,
     childTag: number,
   ): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.disconnectAnimatedNodes(parentTag, childTag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.disconnectAnimatedNodes, parentTag, childTag);
   },
   startAnimatingNode: function (
     animationId: number,
@@ -138,84 +229,85 @@ const API = {
     config: AnimatingNodeConfig,
     endCallback: EndCallback,
   ): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.startAnimatingNode(
+    invariant(nativeOps, 'Native animated module is not available');
+    if (useSingleOpBatching) {
+      if (endCallback) {
+        eventListenerAnimationFinishedCallbacks[animationId] = endCallback;
+      }
+      // $FlowFixMe
+      API.queueOperation(
+        nativeOps.startAnimatingNode,
+        animationId,
+        nodeTag,
+        config,
+      );
+    } else {
+      API.queueOperation(
+        nativeOps.startAnimatingNode,
         animationId,
         nodeTag,
         config,
         endCallback,
-      ),
-    );
+      );
+    }
   },
   stopAnimation: function (animationId: number) {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() => NativeAnimatedModule.stopAnimation(animationId));
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.stopAnimation, animationId);
   },
   setAnimatedNodeValue: function (nodeTag: number, value: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.setAnimatedNodeValue(nodeTag, value),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.setAnimatedNodeValue, nodeTag, value);
   },
   setAnimatedNodeOffset: function (nodeTag: number, offset: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.setAnimatedNodeOffset(nodeTag, offset),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.setAnimatedNodeOffset, nodeTag, offset);
   },
   flattenAnimatedNodeOffset: function (nodeTag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.flattenAnimatedNodeOffset(nodeTag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.flattenAnimatedNodeOffset, nodeTag);
   },
   extractAnimatedNodeOffset: function (nodeTag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.extractAnimatedNodeOffset(nodeTag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.extractAnimatedNodeOffset, nodeTag);
   },
   connectAnimatedNodeToView: function (nodeTag: number, viewTag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.connectAnimatedNodeToView(nodeTag, viewTag),
-    );
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.connectAnimatedNodeToView, nodeTag, viewTag);
   },
   disconnectAnimatedNodeFromView: function (
     nodeTag: number,
     viewTag: number,
   ): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.disconnectAnimatedNodeFromView(nodeTag, viewTag),
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(
+      nativeOps.disconnectAnimatedNodeFromView,
+      nodeTag,
+      viewTag,
     );
   },
   restoreDefaultValues: function (nodeTag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    invariant(nativeOps, 'Native animated module is not available');
     // Backwards compat with older native runtimes, can be removed later.
-    if (NativeAnimatedModule.restoreDefaultValues != null) {
-      API.queueOperation(() =>
-        NativeAnimatedModule.restoreDefaultValues(nodeTag),
-      );
+    if (nativeOps.restoreDefaultValues != null) {
+      API.queueOperation(nativeOps.restoreDefaultValues, nodeTag);
     }
   },
   dropAnimatedNode: function (tag: number): void {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() => NativeAnimatedModule.dropAnimatedNode(tag));
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(nativeOps.dropAnimatedNode, tag);
   },
   addAnimatedEventToView: function (
     viewTag: number,
     eventName: string,
     eventMapping: EventMapping,
   ) {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.addAnimatedEventToView(
-        viewTag,
-        eventName,
-        eventMapping,
-      ),
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(
+      nativeOps.addAnimatedEventToView,
+      viewTag,
+      eventName,
+      eventMapping,
     );
   },
   removeAnimatedEventFromView(
@@ -223,17 +315,44 @@ const API = {
     eventName: string,
     animatedNodeTag: number,
   ) {
-    invariant(NativeAnimatedModule, 'Native animated module is not available');
-    API.queueOperation(() =>
-      NativeAnimatedModule.removeAnimatedEventFromView(
-        viewTag,
-        eventName,
-        animatedNodeTag,
-      ),
+    invariant(nativeOps, 'Native animated module is not available');
+    API.queueOperation(
+      nativeOps.removeAnimatedEventFromView,
+      viewTag,
+      eventName,
+      animatedNodeTag,
     );
   },
 };
 
+function setupGlobalEventEmitterListeners() {
+  globalEventEmitterGetValueListener = RCTDeviceEventEmitter.addListener(
+    'onNativeAnimatedModuleGetValue',
+    function (params) {
+      const {tag} = params;
+      const callback = eventListenerGetValueCallbacks[tag];
+      if (!callback) {
+        return;
+      }
+      callback(params.value);
+      delete eventListenerGetValueCallbacks[tag];
+    },
+  );
+  globalEventEmitterAnimationFinishedListener =
+    RCTDeviceEventEmitter.addListener(
+      'onNativeAnimatedModuleAnimationFinished',
+      function (params) {
+        const {animationId} = params;
+        const callback = eventListenerAnimationFinishedCallbacks[animationId];
+        if (!callback) {
+          return;
+        }
+        callback(params);
+        delete eventListenerAnimationFinishedCallbacks[animationId];
+      },
+    );
+}
+
 /**
  * Styles allowed by the native animated implementation.
  *

package/Libraries/Animated/NativeAnimatedModule.js

@@ -64,6 +64,9 @@ export interface Spec extends TurboModule {
   // Events
   +addListener: (eventName: string) => void;
   +removeListeners: (count: number) => void;
+
+  // All of the above in a batched mode
+  +queueAndExecuteBatchedOperations?: (operationsAndArgs: Array<any>) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('NativeAnimatedModule'): ?Spec);

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -64,6 +64,9 @@ export interface Spec extends TurboModule {
   // Events
   +addListener: (eventName: string) => void;
   +removeListeners: (count: number) => void;
+
+  // All of the above in a batched mode
+  +queueAndExecuteBatchedOperations?: (operationsAndArgs: Array<any>) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>(

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());
     }
   }
 
@@ -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/AnimatedProps.js

@@ -41,11 +41,7 @@ class AnimatedProps extends AnimatedNode {
     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.
-          props[key] = value.__getValue();
-        }
+        props[key] = value.__getValue();
       } else if (value instanceof AnimatedEvent) {
         props[key] = value.__getHandler();
       } else {

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -39,11 +39,7 @@ class AnimatedStyle extends AnimatedWithChildren {
     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.
-          updatedStyle[key] = value.__getValue();
-        }
+        updatedStyle[key] = value.__getValue();
       } else if (value && !Array.isArray(value) && typeof value === 'object') {
         // Support animating nested values (for example: shadowOffset.height)
         updatedStyle[key] = this._walkStyleAndGetValues(value);

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),
+      );
     }
   }