@office-iss/react-native-win32 0.81.2 → 0.82.0-preview.2

package/Libraries/Animated/animations/Animation.js

@@ -41,9 +41,9 @@ let startNativeAnimationNextId = 1;
 // Once an animation has been stopped or finished its course, it will
 // not be reused.
 export default class Animation {
-  #nativeID: ?number;
-  #onEnd: ?EndCallback;
-  #useNativeDriver: boolean;
+  _nativeID: ?number;
+  _onEnd: ?EndCallback;
+  _useNativeDriver: boolean;
 
   __active: boolean;
   __isInteraction: boolean;
@@ -52,10 +52,10 @@ export default class Animation {
   __debugID: ?string;
 
   constructor(config: AnimationConfig) {
-    this.#useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
+    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
 
     this.__active = false;
-    this.__isInteraction = config.isInteraction ?? !this.#useNativeDriver;
+    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
     this.__isLooping = config.isLooping;
     this.__iterations = config.iterations ?? 1;
     if (__DEV__) {
@@ -70,7 +70,7 @@ export default class Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    if (!this.#useNativeDriver && animatedValue.__isNative === true) {
+    if (!this._useNativeDriver && animatedValue.__isNative === true) {
       throw new Error(
         'Attempting to run JS driven animation on animated node ' +
           'that has been moved to "native" earlier by starting an ' +
@@ -78,13 +78,13 @@ export default class Animation {
       );
     }
 
-    this.#onEnd = onEnd;
+    this._onEnd = onEnd;
     this.__active = true;
   }
 
   stop(): void {
-    if (this.#nativeID != null) {
-      const nativeID = this.#nativeID;
+    if (this._nativeID != null) {
+      const nativeID = this._nativeID;
       const identifier = `${nativeID}:stopAnimation`;
       try {
         // This is only required when singleOpBatching is used, as otherwise
@@ -123,7 +123,7 @@ export default class Animation {
   }
 
   __startAnimationIfNative(animatedValue: AnimatedValue): boolean {
-    if (!this.#useNativeDriver) {
+    if (!this._useNativeDriver) {
       return false;
     }
 
@@ -135,9 +135,9 @@ export default class Animation {
     try {
       const config = this.__getNativeAnimationConfig();
       animatedValue.__makeNative(config.platformConfig);
-      this.#nativeID = NativeAnimatedHelper.generateNewAnimationId();
+      this._nativeID = NativeAnimatedHelper.generateNewAnimationId();
       NativeAnimatedHelper.API.startAnimatingNode(
-        this.#nativeID,
+        this._nativeID,
         animatedValue.__getNativeTag(),
         config,
         result => {
@@ -150,12 +150,11 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value, offset);
 
-            if (
-              !(
-                ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
-                ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync()
-              )
-            ) {
+            const isJsSyncRemoved =
+              ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() &&
+              !ReactNativeFeatureFlags.disableFabricCommitInCXXAnimated() &&
+              ReactNativeFeatureFlags.cxxNativeAnimatedRemoveJsSync();
+            if (!isJsSyncRemoved) {
               if (this.__isLooping === true) {
                 return;
               }
@@ -185,9 +184,9 @@ export default class Animation {
    * callback will never be called more than once.
    */
   __notifyAnimationEnd(result: EndResult): void {
-    const callback = this.#onEnd;
+    const callback = this._onEnd;
     if (callback != null) {
-      this.#onEnd = null;
+      this._onEnd = null;
       callback(result);
     }
   }

package/Libraries/Animated/animations/TimingAnimation.js

@@ -49,6 +49,8 @@ export type TimingAnimationConfigSingle = $ReadOnly<{
 
 let _easeInOut;
 function easeInOut() {
+  /* $FlowFixMe[constant-condition] Error discovered during Constant Condition
+   * roll out. See https://fburl.com/workplace/1v97vimq. */
   if (!_easeInOut) {
     const Easing = require('../Easing').default;
     _easeInOut = Easing.inOut(Easing.ease);

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -54,7 +54,8 @@ const AnimatedScrollView: AnimatedComponentType<
     props.style != null
   ) {
     return (
-      // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
+      // $FlowFixMe[incompatible-type] - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
+      // $FlowFixMe[incompatible-variance]
       <AnimatedScrollViewWithInvertedRefreshControl
         scrollEventThrottle={0.0001}
         {...props}
@@ -89,7 +90,7 @@ const AnimatedScrollViewWithInvertedRefreshControl =
     const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
       useMemo(() => {
         // $FlowFixMe[underconstrained-implicit-instantiation]
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
         return {
           intermediatePropsForRefreshControl: {style: outer},

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -14,7 +14,7 @@ import SectionList, {type SectionListProps} from '../../Lists/SectionList';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 
-// $FlowFixMe
+// $FlowFixMe[incompatible-type]
 export default (createAnimatedComponent(SectionList): component<
   // $FlowExpectedError[unclear-type]
   ItemT = any,

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -60,12 +60,12 @@ function processColor(
   }
 
   if (isRgbaValue(color)) {
-    // $FlowIgnore[incompatible-cast] - Type is verified above
+    // $FlowFixMe[incompatible-type] - Type is verified above
     return (color: RgbaValue);
   }
 
   let normalizedColor: ?ProcessedColorValue = normalizeColor(
-    // $FlowIgnore[incompatible-cast] - Type is verified above
+    // $FlowFixMe[incompatible-type] - Type is verified above
     (color: ColorValue),
   );
   if (normalizedColor === undefined || normalizedColor === null) {
@@ -125,7 +125,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
       valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
-      // $FlowIgnore[incompatible-cast] - Type is verified above
+      // $FlowFixMe[incompatible-type] - Type is verified above
       const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
       this.r = rgbaAnimatedValue.r;
       this.g = rgbaAnimatedValue.g;
@@ -133,14 +133,14 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.a = rgbaAnimatedValue.a;
     } else {
       const processedColor: RgbaValue | NativeColorValue =
-        // $FlowIgnore[incompatible-cast] - Type is verified above
+        // $FlowFixMe[incompatible-type] - Type is verified above
         processColor((value: ColorValue | RgbaValue)) ?? defaultColor;
       let initColor: RgbaValue = defaultColor;
       if (isRgbaValue(processedColor)) {
-        // $FlowIgnore[incompatible-cast] - Type is verified above
+        // $FlowFixMe[incompatible-type] - Type is verified above
         initColor = (processedColor: RgbaValue);
       } else {
-        // $FlowIgnore[incompatible-cast] - Type is verified above
+        // $FlowFixMe[incompatible-type] - Type is verified above
         this.nativeColor = (processedColor: NativeColorValue);
       }
 
@@ -170,7 +170,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
       processColor(value) ?? defaultColor;
     this._withSuspendedCallbacks(() => {
       if (isRgbaValue(processedColor)) {
-        // $FlowIgnore[incompatible-type] - Type is verified above
+        // $FlowFixMe[incompatible-type] - Type is verified above
         const rgbaValue: RgbaValue = processedColor;
         this.r.setValue(rgbaValue.r);
         this.g.setValue(rgbaValue.g);
@@ -181,7 +181,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
           shouldUpdateNodeConfig = true;
         }
       } else {
-        // $FlowIgnore[incompatible-type] - Type is verified above
+        // $FlowFixMe[incompatible-type] - Type is verified above
         const nativeColor: NativeColorValue = processedColor;
         if (this.nativeColor !== nativeColor) {
           this.nativeColor = nativeColor;
@@ -203,7 +203,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
       flushValue(this);
     }
 
-    // $FlowFixMe[incompatible-call]
+    // $FlowFixMe[incompatible-type]
     this.__callListeners(this.__getValue());
   }
 

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -224,7 +224,7 @@ function createStringInterpolation(
       outputRange.every(output =>
         output.components.every(
           (component, i) =>
-            // $FlowIgnoreMe[invalid-compare]
+            // $FlowFixMe[invalid-compare]
             typeof component === 'number' || component === firstOutput[i],
         ),
       ),
@@ -235,9 +235,9 @@ function createStringInterpolation(
   const numericComponents: $ReadOnlyArray<$ReadOnlyArray<number>> =
     outputRange.map(output =>
       isColor
-        ? // $FlowIgnoreMe[incompatible-call]
+        ? // $FlowFixMe[incompatible-type]
           output.components
-        : // $FlowIgnoreMe[incompatible-call]
+        : // $FlowFixMe[incompatible-call]
           output.components.filter(c => typeof c === 'number'),
     );
   const interpolations = numericComponents[0].map((_, i) =>
@@ -393,7 +393,7 @@ export default class AnimatedInterpolation<
     let outputRange = this._config.outputRange;
     let outputType = null;
     if (typeof outputRange[0] === 'string') {
-      // $FlowIgnoreMe[incompatible-cast]
+      // $FlowFixMe[incompatible-type]
       outputRange = ((outputRange: $ReadOnlyArray<string>).map(value => {
         const processedColor = processColor(value);
         if (typeof processedColor === 'number') {

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -17,6 +17,7 @@ type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
 export type AnimatedNodeConfig = $ReadOnly<{
   debugID?: string,
+  unstable_disableBatchingForNativeCreate?: boolean,
 }>;
 
 let _uniqueId = 1;
@@ -28,7 +29,7 @@ let _assertNativeAnimatedModule: ?() => void = () => {
 };
 
 export default class AnimatedNode {
-  #listeners: Map<string, ValueListenerCallback>;
+  _listeners: Map<string, ValueListenerCallback>;
 
   _platformConfig: ?PlatformConfig = undefined;
 
@@ -38,10 +39,12 @@ export default class AnimatedNode {
       ...
     }>,
   ) {
-    this.#listeners = new Map();
+    this._listeners = new Map();
     if (__DEV__) {
       this.__debugID = config?.debugID;
     }
+    this.__disableBatchingForNativeCreate =
+      config?.unstable_disableBatchingForNativeCreate;
   }
 
   __attach(): void {}
@@ -65,6 +68,7 @@ export default class AnimatedNode {
   /* Methods and props used by native Animated impl */
   __isNative: boolean = false;
   __nativeTag: ?number = undefined;
+  __disableBatchingForNativeCreate: ?boolean = undefined;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     // Subclasses are expected to set `__isNative` to true before this.
@@ -85,7 +89,7 @@ export default class AnimatedNode {
    */
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
-    this.#listeners.set(id, callback);
+    this._listeners.set(id, callback);
     return id;
   }
 
@@ -96,7 +100,7 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removelistener
    */
   removeListener(id: string): void {
-    this.#listeners.delete(id);
+    this._listeners.delete(id);
   }
 
   /**
@@ -105,11 +109,11 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removealllisteners
    */
   removeAllListeners(): void {
-    this.#listeners.clear();
+    this._listeners.clear();
   }
 
   hasListeners(): boolean {
-    return this.#listeners.size > 0;
+    return this._listeners.size > 0;
   }
 
   __onAnimatedValueUpdateReceived(value: number, offset: number): void {
@@ -118,7 +122,7 @@ export default class AnimatedNode {
 
   __callListeners(value: number): void {
     const event = {value};
-    this.#listeners.forEach(listener => {
+    this._listeners.forEach(listener => {
       listener(event);
     });
   }
@@ -142,6 +146,9 @@ export default class AnimatedNode {
       if (this._platformConfig) {
         config.platformConfig = this._platformConfig;
       }
+      if (this.__disableBatchingForNativeCreate) {
+        config.disableBatchingForNativeCreate = true;
+      }
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
     }
     return nativeTag;

package/Libraries/Animated/nodes/AnimatedObject.js

@@ -21,7 +21,7 @@ const MAX_DEPTH = 5;
 
 export function isPlainObject(
   value: mixed,
-  /* $FlowIssue[incompatible-type-guard] - Flow does not know that the prototype
+  /* $FlowFixMe[incompatible-type-guard] - Flow does not know that the prototype
      and ReactElement checks preserve the type refinement of `value`. */
 ): value is $ReadOnly<{[string]: mixed}> {
   return (
@@ -82,7 +82,7 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
 }
 
 export default class AnimatedObject extends AnimatedWithChildren {
-  #nodes: $ReadOnlyArray<AnimatedNode>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
   _value: mixed;
 
   /**
@@ -106,7 +106,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
-    this.#nodes = nodes;
+    this._nodes = nodes;
     this._value = value;
   }
 
@@ -117,7 +117,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __getValueWithStaticObject(staticObject: mixed): any {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     let index = 0;
     // NOTE: We can depend on `this._value` and `staticObject` sharing a
     // structure because of `useAnimatedPropsMemo`.
@@ -131,7 +131,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -140,7 +140,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __detach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);
@@ -149,7 +149,7 @@ export default class AnimatedObject extends AnimatedWithChildren {
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -92,11 +92,11 @@ function createAnimatedProps(
 }
 
 export default class AnimatedProps extends AnimatedNode {
-  #callback: () => void;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #props: {[string]: mixed};
-  #target: ?TargetView = null;
+  _callback: () => void;
+  _nodeKeys: $ReadOnlyArray<string>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
+  _props: {[string]: mixed};
+  _target: ?TargetView = null;
 
   constructor(
     inputProps: {[string]: mixed},
@@ -106,19 +106,19 @@ export default class AnimatedProps extends AnimatedNode {
   ) {
     super(config);
     const [nodeKeys, nodes, props] = createAnimatedProps(inputProps, allowlist);
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#props = props;
-    this.#callback = callback;
+    this._nodeKeys = nodeKeys;
+    this._nodes = nodes;
+    this._props = props;
+    this._callback = callback;
   }
 
   __getValue(): Object {
     const props: {[string]: mixed} = {};
 
-    const keys = Object.keys(this.#props);
+    const keys = Object.keys(this._props);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const value = this.#props[key];
+      const value = this._props[key];
 
       if (value instanceof AnimatedNode) {
         props[key] = value.__getValue();
@@ -143,7 +143,7 @@ export default class AnimatedProps extends AnimatedNode {
     const keys = Object.keys(staticProps);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const maybeNode = this.#props[key];
+      const maybeNode = this._props[key];
 
       if (key === 'style') {
         const staticStyle = staticProps.style;
@@ -176,10 +176,10 @@ export default class AnimatedProps extends AnimatedNode {
   __getNativeAnimatedEventTuples(): $ReadOnlyArray<[string, AnimatedEvent]> {
     const tuples = [];
 
-    const keys = Object.keys(this.#props);
+    const keys = Object.keys(this._props);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const value = this.#props[key];
+      const value = this._props[key];
 
       if (value instanceof AnimatedEvent && value.__isNative) {
         tuples.push([key, value]);
@@ -192,8 +192,8 @@ export default class AnimatedProps extends AnimatedNode {
   __getAnimatedValue(): Object {
     const props: {[string]: mixed} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];
@@ -204,7 +204,7 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -213,12 +213,12 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   __detach(): void {
-    if (this.__isNative && this.#target != null) {
-      this.#disconnectAnimatedView(this.#target);
+    if (this.__isNative && this._target != null) {
+      this.#disconnectAnimatedView(this._target);
     }
-    this.#target = null;
+    this._target = null;
 
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);
@@ -228,11 +228,11 @@ export default class AnimatedProps extends AnimatedNode {
   }
 
   update(): void {
-    this.#callback();
+    this._callback();
   }
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);
@@ -246,19 +246,19 @@ export default class AnimatedProps extends AnimatedNode {
       // where it will be needed to traverse the graph of attached values.
       super.__setPlatformConfig(platformConfig);
 
-      if (this.#target != null) {
-        this.#connectAnimatedView(this.#target);
+      if (this._target != null) {
+        this.#connectAnimatedView(this._target);
       }
     }
   }
 
   setNativeView(instance: TargetViewInstance): void {
-    if (this.#target?.instance === instance) {
+    if (this._target?.instance === instance) {
       return;
     }
-    this.#target = {instance, connectedViewTag: null};
+    this._target = {instance, connectedViewTag: null};
     if (this.__isNative) {
-      this.#connectAnimatedView(this.#target);
+      this.#connectAnimatedView(this._target);
     }
   }
 
@@ -306,8 +306,8 @@ export default class AnimatedProps extends AnimatedNode {
     const platformConfig = this.__getPlatformConfig();
     const propsConfig: {[string]: number} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];
@@ -325,8 +325,8 @@ export default class AnimatedProps extends AnimatedNode {
 
 // Supported versions of JSC do not implement the newer Object.hasOwn. Remove
 // this shim when they do.
-// $FlowIgnore[method-unbinding]
+// $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
 const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -43,7 +43,7 @@ function createAnimatedStyle(
       if (value != null && key === 'transform') {
         node = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
           ? AnimatedObject.from(value)
-          : // $FlowFixMe[incompatible-call] - `value` is mixed.
+          : // $FlowFixMe[incompatible-type] - `value` is mixed.
             AnimatedTransform.from(value);
       } else if (value instanceof AnimatedNode) {
         node = value;
@@ -82,10 +82,10 @@ function createAnimatedStyle(
 }
 
 export default class AnimatedStyle extends AnimatedWithChildren {
-  #originalStyleForWeb: ?mixed;
-  #nodeKeys: $ReadOnlyArray<string>;
-  #nodes: $ReadOnlyArray<AnimatedNode>;
-  #style: {[string]: mixed};
+  _originalStyleForWeb: ?mixed;
+  _nodeKeys: $ReadOnlyArray<string>;
+  _nodes: $ReadOnlyArray<AnimatedNode>;
+  _style: {[string]: mixed};
 
   /**
    * Creates an `AnimatedStyle` if `value` contains `AnimatedNode` instances.
@@ -102,6 +102,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     const [nodeKeys, nodes, style] = createAnimatedStyle(
       flatStyle,
       allowlist,
+      /* $FlowFixMe[invalid-compare] Error discovered during Constant Condition
+       * roll out. See https://fburl.com/workplace/4oq3zi07. */
       Platform.OS !== 'web',
     );
     if (nodes.length === 0) {
@@ -118,12 +120,12 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     config?: ?AnimatedNodeConfig,
   ) {
     super(config);
-    this.#nodeKeys = nodeKeys;
-    this.#nodes = nodes;
-    this.#style = style;
+    this._nodeKeys = nodeKeys;
+    this._nodes = nodes;
+    this._style = style;
 
     if ((Platform.OS as string) === 'web') {
-      // $FlowIgnore[cannot-write] - Intentional shadowing.
+      // $FlowFixMe[cannot-write] - Intentional shadowing.
       this.__getValueForStyle = resultStyle => [
         originalStyleForWeb,
         resultStyle,
@@ -134,10 +136,10 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   __getValue(): FlatStyleForWeb<FlatStyle> | FlatStyle {
     const style: {[string]: mixed} = {};
 
-    const keys = Object.keys(this.#style);
+    const keys = Object.keys(this._style);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const value = this.#style[key];
+      const value = this._style[key];
 
       if (value instanceof AnimatedNode) {
         style[key] = value.__getValue();
@@ -166,7 +168,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     const keys = Object.keys(style);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
-      const maybeNode = this.#style[key];
+      const maybeNode = this._style[key];
 
       if (key === 'transform' && maybeNode instanceof AnimatedTransform) {
         style[key] = maybeNode.__getValueWithStaticTransforms(
@@ -185,8 +187,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   __getAnimatedValue(): Object {
     const style: {[string]: mixed} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];
@@ -197,7 +199,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   }
 
   __attach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__addChild(this);
@@ -206,7 +208,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   }
 
   __detach(): void {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__removeChild(this);
@@ -215,7 +217,7 @@ export default class AnimatedStyle extends AnimatedWithChildren {
   }
 
   __makeNative(platformConfig: ?PlatformConfig) {
-    const nodes = this.#nodes;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const node = nodes[ii];
       node.__makeNative(platformConfig);
@@ -227,8 +229,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     const platformConfig = this.__getPlatformConfig();
     const styleConfig: {[string]: ?number} = {};
 
-    const nodeKeys = this.#nodeKeys;
-    const nodes = this.#nodes;
+    const nodeKeys = this._nodeKeys;
+    const nodes = this._nodes;
     for (let ii = 0, length = nodes.length; ii < length; ii++) {
       const key = nodeKeys[ii];
       const node = nodes[ii];
@@ -249,8 +251,8 @@ export default class AnimatedStyle extends AnimatedWithChildren {
 
 // Supported versions of JSC do not implement the newer Object.hasOwn. Remove
 // this shim when they do.
-// $FlowIgnore[method-unbinding]
+// $FlowFixMe[method-unbinding]
 const _hasOwnProp = Object.prototype.hasOwnProperty;
 const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));