Add passthroughAnimatedPropsExplicitValues to modern createAnimatedComponent

Summary:
Code almost directly copied from the old implementation of [createAnimatedComponent.js](https://www.internalfb.com/intern/diffusion/FBS/browsefile/master/xplat/js/react-native-github/Libraries/Animated/createAnimatedComponent.js?commit=156dbfe5d0fc491819a8b4939896d23b2273e251&lines=208-211).

This is necessary for certain things to work (like ScrollViewStickyHeader).

The reason is because when animations are driven by useNativeDriver, JS does not know where the component has moved to. If a component that is translated like ScrollViewStickyHeader is also Pressable, the onPress will **not** work without this prop. [Link to where ScrollViewStickyHeader uses passthroughAnimatedPropsExplicitValues](https://www.internalfb.com/intern/diffusion/FBS/browsefile/master/xplat/js/react-native-github/Libraries/Components/ScrollView/ScrollViewStickyHeader.js?commit=124a38e1708b620857e4e6969cdef6004aa1bd10&lines=294-296)

I am not adding this to the Flow type because we only want people using this if they really know what they're doing, as it's a hacky fix.

Followup work to this would be to create a hook to attach the listener to the animated values, which ScrollViewStickyHeader does manually. But this is not required for this component to work.

Changelog: Internal

Reviewed By: yungsters

Differential Revision: D29557480

fbshipit-source-id: 293fab4746c3404f5ae9b90afe85d2ca91181873

Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js

@@ -10,6 +10,7 @@
 
 import useAnimatedProps from './useAnimatedProps';
 import useMergeRefs from '../Utilities/useMergeRefs';
+import StyleSheet from '../StyleSheet/StyleSheet';
 import * as React from 'react';
 
 /**
@@ -25,6 +26,23 @@ export default function createAnimatedComponent<TProps: {...}, TInstance>(
     );
     const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);
 
-    return <Component {...reducedProps} ref={ref} />;
+    // 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 {style: passthroughStyle, ...passthroughProps} =
+      passthroughAnimatedPropExplicitValues ?? {};
+    const mergedStyle = StyleSheet.compose(style, passthroughStyle);
+
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughProps}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
   });
 }