From 5ba3aacaf76248fe203f7b2274787cf13ee9ff74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dawid=20Ma=C5=82ecki?= <maleckidawid@meta.com>
Date: Wed, 26 Mar 2025 01:22:32 -0700
Subject: [PATCH] Remove StrictAnimatedComponentType from
 createAnimatedComponent (#50240)

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

StrictAnimatedComponentType was introduced to incrementally adopt sctricter animated types at the time. After aligning AnimatedProps it is no longer necessary and can be swapped with AnimatedProps.

Changelog:
[Internal] - Removed StrictAnimatedComponentType from createAnimatedComponent.

Reviewed By: huntie

Differential Revision: D71804845

fbshipit-source-id: e8adbfde1a48fd3f4fc94f4cc0938bd64384c418
---
 .../Animated/createAnimatedComponent.js       | 97 ++++++++-----------
 .../__snapshots__/public-api-test.js.snap     | 18 ++--
 2 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js
index eddbe69fcaa..58799eb16ba 100644
--- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js
+++ b/packages/react-native/Libraries/Animated/createAnimatedComponent.js
@@ -52,7 +52,13 @@ export type WithAnimatedValue<+T> = T extends Builtin | Nullable
         ? {+[K in keyof T]: WithAnimatedValue<T[K]>}
         : T;
 
-type NonAnimatedProps = 'ref' | 'innerViewRef' | 'scrollViewRef';
+type NonAnimatedProps =
+  | 'ref'
+  | 'innerViewRef'
+  | 'scrollViewRef'
+  | 'testID'
+  | 'disabled'
+  | 'accessibilityLabel';
 type PassThroughProps = $ReadOnly<{
   passthroughAnimatedPropExplicitValues?: React.ElementConfig<
     typeof View,
@@ -67,24 +73,11 @@ export type AnimatedProps<Props: {...}> = {
       : WithAnimatedValue<Props[K]>,
 };
 
-// We could use a mapped type here to introduce acceptable Animated variants
-// of properties, instead of doing so in the core StyleSheetTypes
-// Inexact Props are not supported, they'll be made exact here.
-export type StrictAnimatedProps<Props: {...}> = $ReadOnly<{
-  ...$Exact<Props>,
-  passthroughAnimatedPropExplicitValues?: ?Props,
-}>;
-
 export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
   ref?: React.RefSetter<Instance>,
   ...AnimatedProps<Props>
 );
 
-export type StrictAnimatedComponentType<
-  Props: {...},
-  +Instance = mixed,
-> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
-
 export default function createAnimatedComponent<
   TInstance: React.ComponentType<any>,
 >(
@@ -93,10 +86,7 @@ export default function createAnimatedComponent<
   $ReadOnly<React.ElementProps<TInstance>>,
   React.ElementRef<TInstance>,
 > {
-  return unstable_createAnimatedComponentWithAllowlist(
-    Component,
-    null,
-  ) as $FlowFixMe;
+  return unstable_createAnimatedComponentWithAllowlist(Component, null);
 }
 
 export function unstable_createAnimatedComponentWithAllowlist<
@@ -105,48 +95,47 @@ export function unstable_createAnimatedComponentWithAllowlist<
 >(
   Component: TInstance,
   allowlist: ?AnimatedPropsAllowlist,
-): StrictAnimatedComponentType<TProps, React.ElementRef<TInstance>> {
+): AnimatedComponentType<TProps, React.ElementRef<TInstance>> {
   const useAnimatedProps = createAnimatedPropsHook(allowlist);
 
-  const AnimatedComponent: StrictAnimatedComponentType<
+  const AnimatedComponent: AnimatedComponentType<
     TProps,
     React.ElementRef<TInstance>,
-  > = React.forwardRef<
-    StrictAnimatedProps<TProps>,
-    React.ElementRef<TInstance>,
-  >((props, forwardedRef) => {
-    const [reducedProps, callbackRef] = useAnimatedProps<
-      TProps,
-      React.ElementRef<TInstance>,
-    >(props);
-    const ref = useMergeRefs<React.ElementRef<TInstance>>(
-      callbackRef,
-      forwardedRef,
-    );
+  > = React.forwardRef<AnimatedProps<TProps>, React.ElementRef<TInstance>>(
+    (props, forwardedRef) => {
+      const [reducedProps, callbackRef] = useAnimatedProps<
+        TProps,
+        React.ElementRef<TInstance>,
+      >(props);
+      const ref = useMergeRefs<React.ElementRef<TInstance>>(
+        callbackRef,
+        forwardedRef,
+      );
 
-    // Some components require explicit passthrough values for animation
-    // to work properly. For example, if an animated component is
-    // transformed and Pressable, onPress will not work after transform
-    // without these passthrough values.
-    // $FlowFixMe[prop-missing]
-    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-    const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-    const mergedStyle = useMemo(
-      () => composeStyles(style, passthroughStyle),
-      [passthroughStyle, style],
-    );
+      // Some components require explicit passthrough values for animation
+      // to work properly. For example, if an animated component is
+      // transformed and Pressable, onPress will not work after transform
+      // without these passthrough values.
+      // $FlowFixMe[prop-missing]
+      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+      const mergedStyle = useMemo(
+        () => composeStyles(style, passthroughStyle),
+        [passthroughStyle, style],
+      );
 
-    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
-    // spread after `reducedProps` but before `style`.
-    return (
-      <Component
-        {...reducedProps}
-        {...passthroughAnimatedPropExplicitValues}
-        style={mergedStyle}
-        ref={ref}
-      />
-    );
-  });
+      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+      // spread after `reducedProps` but before `style`.
+      return (
+        <Component
+          {...reducedProps}
+          {...passthroughAnimatedPropExplicitValues}
+          style={mergedStyle}
+          ref={ref}
+        />
+      );
+    },
+  );
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'
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 2e61b1bf83a..b557cc8fa31 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
@@ -668,7 +668,13 @@ export type WithAnimatedValue<+T> = T extends Builtin | Nullable
       : T extends { ... }
         ? { +[K in keyof T]: WithAnimatedValue<T[K]> }
         : T;
-type NonAnimatedProps = \\"ref\\" | \\"innerViewRef\\" | \\"scrollViewRef\\";
+type NonAnimatedProps =
+  | \\"ref\\"
+  | \\"innerViewRef\\"
+  | \\"scrollViewRef\\"
+  | \\"testID\\"
+  | \\"disabled\\"
+  | \\"accessibilityLabel\\";
 type PassThroughProps = $ReadOnly<{
   passthroughAnimatedPropExplicitValues?: React.ElementConfig<
     typeof View,
@@ -681,18 +687,10 @@ export type AnimatedProps<Props: { ... }> = {
       ? Props[K]
       : WithAnimatedValue<Props[K]>,
 };
-export type StrictAnimatedProps<Props: { ... }> = $ReadOnly<{
-  ...$Exact<Props>,
-  passthroughAnimatedPropExplicitValues?: ?Props,
-}>;
 export type AnimatedComponentType<
   Props: { ... },
   +Instance = mixed,
 > = component(ref?: React.RefSetter<Instance>, ...AnimatedProps<Props>);
-export type StrictAnimatedComponentType<
-  Props: { ... },
-  +Instance = mixed,
-> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
 declare export default function createAnimatedComponent<
   TInstance: React.ComponentType<any>,
 >(
@@ -707,7 +705,7 @@ declare export function unstable_createAnimatedComponentWithAllowlist<
 >(
   Component: TInstance,
   allowlist: ?AnimatedPropsAllowlist
-): StrictAnimatedComponentType<TProps, React.ElementRef<TInstance>>;
+): AnimatedComponentType<TProps, React.ElementRef<TInstance>>;
 "
 `;