Check for Builtin and Nullable types in WithAnimatedValue to align closer to TS types (#50195)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50195

In Flow, all AnimatedProps properties are set to `any` and misaligned with Typescript definitions. This diff is a first step toward the TS AnimatedProps. The problem can be broken down into a few parts, at each point more types will be extended in WithAnimatedValue and the rest will be set to `any`. This approach enables smoother migration and validation.

Changelog:
[Internal] - Check for Builtin and Nullable types in WithAnimatedValue to align closer to TS types.

Reviewed By: huntie

Differential Revision: D71551006

fbshipit-source-id: 9316227f4ba32bdaa5be8097483a03ae19bf516f

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

@@ -17,14 +17,17 @@ import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useMemo} from 'react';
 
+type Nullable = void | null;
+type Builtin = (...$ReadOnlyArray<empty>) => mixed | Date | Error | RegExp;
+
+export type WithAnimatedValue<+T> = T extends Builtin | Nullable ? T : any;
+
 export type AnimatedProps<Props: {...}> = {
-  // eslint-disable-next-line no-unused-vars
-  +[_K in keyof (Props &
-      $ReadOnly<{
-        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-          typeof View,
-        >,
-      }>)]: any,
+  +[K in keyof Props]: WithAnimatedValue<Props[K]>,
+} & {
+  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+    typeof View,
+  > | null,
 };
 
 // We could use a mapped type here to introduce acceptable Animated variants
@@ -53,7 +56,10 @@ export default function createAnimatedComponent<
   $ReadOnly<React.ElementProps<TInstance>>,
   React.ElementRef<TInstance>,
 > {
-  return unstable_createAnimatedComponentWithAllowlist(Component, null);
+  return unstable_createAnimatedComponentWithAllowlist(
+    Component,
+    null,
+  ) as $FlowFixMe;
 }
 
 export function unstable_createAnimatedComponentWithAllowlist<

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -644,13 +644,15 @@ exports[`public API should not change unintentionally Libraries/Animated/compone
 `;
 
 exports[`public API should not change unintentionally Libraries/Animated/createAnimatedComponent.js 1`] = `
-"export type AnimatedProps<Props: { ... }> = {
-  +[_K in keyof (Props &
-      $ReadOnly<{
-        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
-          typeof View,
-        >,
-      }>)]: any,
+"type Nullable = void | null;
+type Builtin = (...$ReadOnlyArray<empty>) => mixed | Date | Error | RegExp;
+export type WithAnimatedValue<+T> = T extends Builtin | Nullable ? T : any;
+export type AnimatedProps<Props: { ... }> = {
+  +[K in keyof Props]: WithAnimatedValue<Props[K]>,
+} & {
+  passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+    typeof View,
+  > | null,
 };
 export type StrictAnimatedProps<Props: { ... }> = $ReadOnly<{
   ...$Exact<Props>,

packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js

@@ -143,8 +143,9 @@ const renderItemComponent =
 
 const onScrollToIndexFailed = (info: {
   index: number,
-  c: number,
+  highestMeasuredFrameIndex: number,
   averageItemLength: number,
+  ...
 }) => {
   console.warn('onScrollToIndexFailed. See comment in callback', info);
   /**