From 771d58409858015104ddcc1073e010fd0ebb9fd9 Mon Sep 17 00:00:00 2001 From: Kacie Bawiec Date: Thu, 8 Jul 2021 09:28:18 -0700 Subject: [PATCH] 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 --- .../createAnimatedComponent_EXPERIMENTAL.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js b/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js index 0e84b103b0b..a7d5f8169e5 100644 --- a/Libraries/Animated/createAnimatedComponent_EXPERIMENTAL.js +++ b/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( ); const ref = useMergeRefs(callbackRef, forwardedRef); - return ; + // 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 ( + + ); }); }