diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js b/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js index 8fdc6532aeb2e3..8766d5e913b796 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js +++ b/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js @@ -30,7 +30,7 @@ function createAnimatedStyle( const animatedStyles: any = {}; for (const key in style) { const value = style[key]; - if (key === 'transform') { + if (value != null && key === 'transform') { animatedStyles[key] = ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform() ? new AnimatedObject(value) diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js index 60a90bc107a55a..d9467354097d0e 100644 --- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js +++ b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js @@ -123,6 +123,10 @@ function AnimatedTransformStyleExample(): React.Node { property => properties[property].selected, )} /> + + {'Should not crash when transform style key is undefined'} + + ); } @@ -149,6 +153,9 @@ const styles = StyleSheet.create({ marginBottom: 6, borderBottomWidth: 1, }, + section: { + marginTop: 20, + }, }); export default ({