mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Kacie Bawiec
771d584098
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
49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
/**
|
|
* 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}
|
|
/>
|
|
);
|
|
});
|
|
}
|