/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 * @format
 */

import useAnimatedProps from './useAnimatedProps';
import useMergeRefs from '../Utilities/useMergeRefs';
import * as React from 'react';

/**
 * Experimental implementation of `createAnimatedComponent` that is intended to
 * be compatible with concurrent rendering.
 */
export default function createAnimatedComponent<TProps: {...}, TInstance>(
  Component: React.AbstractComponent<TProps, TInstance>,
): React.AbstractComponent<TProps, TInstance> {
  return React.forwardRef((props, forwardedRef) => {
    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
      props,
    );
    const ref = useMergeRefs<TInstance | null>(callbackRef, forwardedRef);

    return <Component {...reducedProps} ref={ref} />;
  });
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 * @format
 */

import useAnimatedProps from './useAnimatedProps';
import useMergeRefs from '../Utilities/useMergeRefs';
import StyleSheet from '../StyleSheet/StyleSheet';
import * as React from 'react';

/**
 * Experimental implementation of `createAnimatedComponent` that is intended to
 * be compatible with concurrent rendering.
 */
export default function createAnimatedComponent<TProps: {...}, TInstance>(
  Component: React.AbstractComponent<TProps, TInstance>,
): React.AbstractComponent<TProps, TInstance> {
  return React.forwardRef((props, forwardedRef) => {
    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
      props,
    );
    const ref = useMergeRefs<TInstance | null>(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 {style: passthroughStyle, ...passthroughProps} =
      passthroughAnimatedPropExplicitValues ?? {};
    const mergedStyle = StyleSheet.compose(style, passthroughStyle);

    return (
      <Component
        {...reducedProps}
        {...passthroughProps}
        style={mergedStyle}
        ref={ref}
      />
    );
  });
}

Add passthroughAnimatedPropsExplicitValues to modern createAnimatedComponent
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
