Skip to content

Commit 7aa46a1

Browse files
gabrieldonadelLuna Wei
authored andcommitted
Fix createAnimatedStyle when providing undefined transform style (#41176)
Summary: #35198 introduced a regression where if an `{transform: undefined}` style is provided to an Animated View a `Cannot read property 'map' of undefined` type error is thrown <img src="https://github.com/facebook/react-native/assets/11707729/bb87781e-1ba7-40ec-879d-a57cef3e10d9" height="200" /> ## Changelog: [GENERAL] [FIXED] - Fix `createAnimatedStyle` when providing an undefined transform style Pull Request resolved: #41176 Test Plan: <details> <summary>Render an `Animated.View` passing `style={{transform: undefined}}`</summary> E.g. ``` const UndefinedTransform = () => { return ( <View> <Animated.View style={{transform: undefined}} /> </View> ); }; ``` </details> ### RNTester 1. Open the RNTester app and navigate to the Animated page 2. Navigate to the Transform Styles page 3. App should not throw any errors <table> <tr><th>Before</th><th>After</th></tr> <tr> <td><video src="https://github.com/facebook/react-native/assets/11707729/92ba9c3b-60b0-4805-8080-0e7fb7c00345"/></td> <td><video src="https://github.com/facebook/react-native/assets/11707729/80e2bba8-6ff6-4cf5-bcb8-26de0b869036"/></td> </tr> </table> Reviewed By: fabriziocucci Differential Revision: D50638415 Pulled By: javache fbshipit-source-id: 0ee949f019a77b8bef557888694e0e8404810105
1 parent 29f8f1e commit 7aa46a1

File tree

2 files changed

+8
-1
lines changed

2 files changed

+8
-1
lines changed

packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function createAnimatedStyle(
3030
const animatedStyles: any = {};
3131
for (const key in style) {
3232
const value = style[key];
33-
if (key === 'transform') {
33+
if (value != null && key === 'transform') {
3434
animatedStyles[key] =
3535
ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
3636
? new AnimatedObject(value)

packages/rn-tester/js/examples/Animated/TransformStylesExample.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@ function AnimatedTransformStyleExample(): React.Node {
123123
property => properties[property].selected,
124124
)}
125125
/>
126+
<View style={styles.section}>
127+
<Text>{'Should not crash when transform style key is undefined'}</Text>
128+
<Animated.View style={[styles.animatedView, {transform: undefined}]} />
129+
</View>
126130
</View>
127131
);
128132
}
@@ -149,6 +153,9 @@ const styles = StyleSheet.create({
149153
marginBottom: 6,
150154
borderBottomWidth: 1,
151155
},
156+
section: {
157+
marginTop: 20,
158+
},
152159
});
153160

154161
export default ({

0 commit comments

Comments
 (0)