From eb2d9c1ac0749bb275a2a3f24e2c51a4ceb1ea60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dawid=20Ma=C5=82ecki?= <maleckidawid@meta.com>
Date: Tue, 25 Mar 2025 03:47:30 -0700
Subject: [PATCH] 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
---
 .../Animated/createAnimatedComponent.js       | 22 ++++++++++++-------
 .../__snapshots__/public-api-test.js.snap     | 16 ++++++++------
 .../SectionList/SectionList-scrollable.js     |  3 ++-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js
index d922718c672..e7314d925d5 100644
--- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js
+++ b/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<
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index 2f48c75eb0d..9dcad1f1850 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/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>,
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
index 87492a5e109..b4cf44c276a 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
+++ b/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);
   /**