Spreading animated style into style prop removes all styles

Description

Passing animated style via spread operator doesn’t work.

Expected behavior

animated style should be applied

Actual behavior & steps to reproduce

Style doesn’t take any effect and being ignored. Additionally all other style of the element is gone.

Snack or minimal code example

Given

const offset = useSharedValue(buffer);
const animatedStyles = useAnimatedStyle(() => ({
  transform: [{ translateX: offset.value }],
}));

adding an animated style like this lets all the styles on the element disappear:

<Animated.View
  style={{
    width: 90,
    height: 90,
    backgroundColor: 'red',
    ...animatedStyles,
  }}
/>

See this expo snack

Package versions

• React Native: 0.66.3
• React Native Reanimated: 2.3.0
• NodeJS: v12.22.7
• Xcode: 12.5.1

Affected platforms

Tested on iOS, but seems like a general issue to me.

• Android
• iOS
• Web

[brianreavis]

It’s because useAnimatedStyle returns a special object that’s not just style properties: https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/hook/useAnimatedStyle.ts#L536 (which is then interpreted in createAnimatedComponent)

[jakub-gonet]

Resolved, closing.