mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fix createAnimatedStyle when providing undefined transform style (#41176)
Summary: https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
committed by
Luna Wei
parent
29f8f1e196
commit
7aa46a169e
@@ -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)
|
||||
|
||||
@@ -123,6 +123,10 @@ function AnimatedTransformStyleExample(): React.Node {
|
||||
property => properties[property].selected,
|
||||
)}
|
||||
/>
|
||||
<View style={styles.section}>
|
||||
<Text>{'Should not crash when transform style key is undefined'}</Text>
|
||||
<Animated.View style={[styles.animatedView, {transform: undefined}]} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -149,6 +153,9 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 6,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
section: {
|
||||
marginTop: 20,
|
||||
},
|
||||
});
|
||||
|
||||
export default ({
|
||||
|
||||
Reference in New Issue
Block a user