Make Animated modules Flow strict-local (#57738)

Summary:
Pull Request resolved: #57738

Upgrade the Animated implementation and node modules from `flow` to `flow strict-local` to enforce stricter local type checking, replacing loose types with the accurate existing Animated type vocabulary. Constrain `createAnimatedComponent` to component-only `React.ElementType` values so component props remain inferred without `any`, and regenerate the public API snapshot. Runtime behavior is unchanged.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D113763780

Author: rubennorte

packages/react-native/Libraries/Animated/AnimatedExports.js

@@ -4,10 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
+// flowlint unsafe-getters-setters:off
+
 import typeof AnimatedFlatList from './components/AnimatedFlatList';
 import typeof AnimatedImage from './components/AnimatedImage';
 import typeof AnimatedScrollView from './components/AnimatedScrollView';
@@ -27,7 +29,7 @@ export default {
   /**
    * FlatList and SectionList infer generic Type defined under their `data` and `section` props.
    */
-  get FlatList(): AnimatedFlatList<any> {
+  get FlatList(): AnimatedFlatList<> {
     return require('./components/AnimatedFlatList').default;
   },
   /**
@@ -47,7 +49,7 @@ export default {
   /**
    * FlatList and SectionList infer generic Type defined under their `data` and `section` props.
    */
-  get SectionList(): AnimatedSectionList<any, any> {
+  get SectionList(): AnimatedSectionList<> {
     return require('./components/AnimatedSectionList').default;
   },
   /**

packages/react-native/Libraries/Animated/AnimatedExports.js.flow

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 

packages/react-native/Libraries/Animated/createAnimatedComponent.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -64,10 +64,10 @@ type PassThroughProps = Readonly<{
   passthroughAnimatedPropExplicitValues?: ViewProps | null,
 }>;
 
-type LooseOmit<O extends interface {}, K extends keyof $FlowFixMe> = Pick<
-  O,
-  Exclude<keyof O, K>,
->;
+type LooseOmit<
+  O extends interface {},
+  K extends string | number | symbol,
+> = Pick<O, Exclude<keyof O, K>>;
 
 export type AnimatedProps<Props extends {...}> = LooseOmit<
   {
@@ -94,7 +94,7 @@ export type AnimatedComponentType<
 > = component(ref?: React.RefSetter<Instance>, ...AnimatedProps<Props>);
 
 export default function createAnimatedComponent<
-  TInstance extends React.ComponentType<any>,
+  TInstance extends Exclude<React.ElementType, string>,
 >(
   Component: TInstance,
 ): AnimatedComponentType<
@@ -157,9 +157,11 @@ export function unstable_createAnimatedComponentWithAllowlist<
     );
   };
 
-  AnimatedComponent.displayName = `Animated(${
-    Component.displayName || 'Anonymous'
-  })`;
+  const componentName =
+    Component.displayName != null && Component.displayName !== ''
+      ? Component.displayName
+      : 'Anonymous';
+  AnimatedComponent.displayName = `Animated(${componentName})`;
 
   return AnimatedComponent;
 }

packages/react-native/Libraries/Animated/nodes/AnimatedAddition.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -63,7 +63,11 @@ export default class AnimatedAddition extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    input: [number, number],
+    debugID: ?string,
+  } {
     return {
       type: 'addition',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],

packages/react-native/Libraries/Animated/nodes/AnimatedColor.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -90,19 +90,21 @@ function processColor(
   return null;
 }
 
-function isRgbaValue(value: any): boolean {
+function isRgbaValue(value: unknown): boolean {
   return (
-    value &&
+    value != null &&
+    typeof value === 'object' &&
     typeof value.r === 'number' &&
     typeof value.g === 'number' &&
     typeof value.b === 'number' &&
     typeof value.a === 'number'
   );
 }
 
-function isRgbaAnimatedValue(value: any): boolean {
+function isRgbaAnimatedValue(value: unknown): boolean {
   return (
-    value &&
+    value != null &&
+    typeof value === 'object' &&
     value.r instanceof AnimatedValue &&
     value.g instanceof AnimatedValue &&
     value.b instanceof AnimatedValue &&
@@ -325,7 +327,15 @@ export default class AnimatedColor extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 
-  __getNativeConfig(): {...} {
+  __getNativeConfig(): {
+    type: string,
+    r: number,
+    g: number,
+    b: number,
+    a: number,
+    nativeColor: ?NativeColorValue,
+    debugID: ?string,
+  } {
     return {
       type: 'color',
       r: this.r.__getNativeTag(),

packages/react-native/Libraries/Animated/nodes/AnimatedDiffClamp.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -70,7 +70,13 @@ export default class AnimatedDiffClamp extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    input: number,
+    min: number,
+    max: number,
+    debugID: ?string,
+  } {
     return {
       type: 'diffclamp',
       input: this._a.__getNativeTag(),

packages/react-native/Libraries/Animated/nodes/AnimatedDivision.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -79,7 +79,11 @@ export default class AnimatedDivision extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    input: [number, number],
+    debugID: ?string,
+  } {
     return {
       type: 'division',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],

packages/react-native/Libraries/Animated/nodes/AnimatedModulo.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -57,7 +57,12 @@ export default class AnimatedModulo extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    input: number,
+    modulus: number,
+    debugID: ?string,
+  } {
     return {
       type: 'modulus',
       input: this._a.__getNativeTag(),

packages/react-native/Libraries/Animated/nodes/AnimatedMultiplication.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -62,7 +62,11 @@ export default class AnimatedMultiplication extends AnimatedWithChildren {
     super.__detach();
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    input: [number, number],
+    debugID: ?string,
+  } {
     return {
       type: 'multiplication',
       input: [this._a.__getNativeTag(), this._b.__getNativeTag()],

packages/react-native/Libraries/Animated/nodes/AnimatedObject.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -64,7 +64,11 @@ function flatAnimatedNodes(
 }
 
 // Returns a copy of value with a transformation fn applied to any AnimatedNodes
-function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
+function mapAnimatedNodes(
+  value: unknown,
+  fn: (node: AnimatedNode) => unknown,
+  depth: number = 0,
+): unknown {
   if (depth >= MAX_DEPTH) {
     return value;
   }
@@ -74,7 +78,7 @@ function mapAnimatedNodes(value: any, fn: any => any, depth: number = 0): any {
   } else if (Array.isArray(value)) {
     return value.map(element => mapAnimatedNodes(element, fn, depth + 1));
   } else if (isPlainObject(value)) {
-    const result: {[string]: any} = {};
+    const result: {[string]: unknown} = {};
     const keys = Object.keys(value);
     for (let ii = 0, length = keys.length; ii < length; ii++) {
       const key = keys[ii];
@@ -115,21 +119,21 @@ export default class AnimatedObject extends AnimatedWithChildren {
     this._value = value;
   }
 
-  __getValue(): any {
+  __getValue(): unknown {
     return mapAnimatedNodes(this._value, node => {
       return node.__getValue();
     });
   }
 
-  __getValueWithStaticObject(staticObject: unknown): any {
+  __getValueWithStaticObject(staticObject: unknown): unknown {
     const nodes = this._nodes;
     let index = 0;
     // NOTE: We can depend on `this._value` and `staticObject` sharing a
     // structure because of `useAnimatedPropsMemo`.
     return mapAnimatedNodes(staticObject, () => nodes[index++].__getValue());
   }
 
-  __getAnimatedValue(): any {
+  __getAnimatedValue(): unknown {
     return mapAnimatedNodes(this._value, node => {
       return node.__getAnimatedValue();
     });
@@ -162,7 +166,11 @@ export default class AnimatedObject extends AnimatedWithChildren {
     super.__makeNative(platformConfig);
   }
 
-  __getNativeConfig(): any {
+  __getNativeConfig(): {
+    type: string,
+    value: unknown,
+    debugID: ?string,
+  } {
     return {
       type: 'object',
       value: mapAnimatedNodes(this._value, node => {