mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Tim Yung
5c8c5388fc
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/51719 When `Animated` traverses props for instances of `AnimatedNode`, it flattens `props.style` before traversing it so that we correctly ignore any `AnimatedNode` instances that may be shadowed by static values: ``` { style: [ {transform: [{translateX: new Animated.Value(0)}]}, {transform: [{translateX: 100}]}, ], } ``` However, there is a bug that occurs when *every* `AnimatedNode` instance is shadowed. In this case, `AnimatedProps` assumes that there are *no* `AnimatedNode` instances in the entire `props.style`. It then incorrectly operates on the unflattened `props.style`, which *does* have `AnimatedNode` instances. When this is passed to `View`, the `AnimatedNode` instances are encountered and can cause a crash in `processTransform`, as reported by: https://github.com/facebook/react-native/issues/51395 The fix for this was originally attempted by riteshshukla04 in https://github.com/facebook/react-native/pull/51442. This diff reuses the same unit test case, but it applies a different fix that does not involve re-traversing the `props.style` object. The fix is gated behind a feature flag, `alwaysFlattenAnimatedStyles`. This will enable us to validate correctness of the new behavior before enabling it for everyone. (Beyond fixing the bug described above, this also causes styles to flatten more aggressively, so production testing is important to ensure stability.) Changelog: [General][Changed] - Creates a feature flag that changes Animated to no longer produce invalid `props.style` if every `AnimatedNode` instance is shadowed via style flattening. Reviewed By: javache Differential Revision: D75723284 fbshipit-source-id: 504f63e8edf836243d615783e119137a920ad271