fix sticky header with tappable element (#44046)

Summary:
X-link: facebook/react-fbsource-import#5

Pull Request resolved: #44046

changelog: [internal]

`passthroughAnimatedPropExplicitValues` from sticky header were removed in D46703731 with assumption that native animations trigger on complete callback and it can be used as a synchronisation point for Fabric.
On complete callback is triggered for native animations do trigger on complete callback with one exception: when the native animation is driven by scroll view's content offset.
As a result, synchronisation between React and Fabric doesn't happen and Pressability stops working if there is a pressable element in the sticky header.

Reviewed By: rubennorte

Differential Revision: D56005408

fbshipit-source-id: daead3a566e157593aa3f1b3ae3553ec1094b6da

Author: sammy-SC

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

@@ -8,12 +8,19 @@
  * @format
  */
 
+import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 
 // $FlowFixMe[deprecated-type]
-export type AnimatedProps<Props: {...}> = $ObjMap<Props, () => any>;
+export type AnimatedProps<Props: {...}> = $ObjMap<
+  Props &
+    $ReadOnly<{
+      passthroughAnimatedPropExplicitValues?: React.ElementConfig<typeof View>,
+    }>,
+  () => any,
+>;
 
 export type AnimatedComponentType<
   Props: {...},
@@ -36,9 +43,19 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
       // transformed and Pressable, onPress will not work after transform
       // without these passthrough values.
       // $FlowFixMe[prop-missing]
-      const {style} = reducedProps;
+      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+      const {style: passthroughStyle, ...passthroughProps} =
+        passthroughAnimatedPropExplicitValues ?? {};
+      const mergedStyle = {...style, ...passthroughStyle};
 
-      return <Component {...reducedProps} style={style} ref={ref} />;
+      return (
+        <Component
+          {...reducedProps}
+          {...passthroughProps}
+          style={mergedStyle}
+          ref={ref}
+        />
+      );
     },
   );
 

packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -267,7 +267,16 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
 
   const child = React.Children.only<$FlowFixMe>(props.children);
 
+  const passthroughAnimatedPropExplicitValues =
+    isFabric && translateY != null
+      ? {
+          style: {transform: [{translateY: translateY}]},
+        }
+      : null;
+
   return (
+    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
+       included in the Animated.View flow type. */
     <Animated.View
       collapsable={false}
       nativeID={props.nativeID}
@@ -277,7 +286,10 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
         child.props.style,
         styles.header,
         {transform: [{translateY: animatedTranslateY}]},
-      ]}>
+      ]}
+      passthroughAnimatedPropExplicitValues={
+        passthroughAnimatedPropExplicitValues
+      }>
       {React.cloneElement(child, {
         style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout

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

@@ -810,7 +810,13 @@ 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: { ... }> = $ObjMap<Props, () => any>;
+"export type AnimatedProps<Props: { ... }> = $ObjMap<
+  Props &
+    $ReadOnly<{
+      passthroughAnimatedPropExplicitValues?: React.ElementConfig<typeof View>,
+    }>,
+  () => any,
+>;
 export type AnimatedComponentType<
   Props: { ... },
   +Instance = mixed,
@@ -8399,6 +8405,14 @@ exports[`public API should not change unintentionally Libraries/Utilities/DebugE
 "
 `;
 
+exports[`public API should not change unintentionally Libraries/Utilities/DevLoadingView.js 1`] = `
+"declare module.exports: {
+  showMessage(message: string, type: \\"load\\" | \\"refresh\\"): void,
+  hide(): void,
+};
+"
+`;
+
 exports[`public API should not change unintentionally Libraries/Utilities/DevSettings.js 1`] = `
 "declare let DevSettings: {
   addMenuItem(title: string, handler: () => mixed): void,
@@ -8516,14 +8530,6 @@ export interface IPerformanceLogger {
 "
 `;
 
-exports[`public API should not change unintentionally Libraries/Utilities/DevLoadingView.js 1`] = `
-"declare module.exports: {
-  showMessage(message: string, type: \\"load\\" | \\"refresh\\"): void,
-  hide(): void,
-};
-"
-`;
-
 exports[`public API should not change unintentionally Libraries/Utilities/NativeAppearance.js 1`] = `
 "export type * from \\"../../src/private/specs/modules/NativeAppearance\\";
 declare export default typeof NativeAppearance;