[bug]: TypeError: Cannot assign to read only property 'shadowOffset' of object '#<Object>'

[IgorVanian]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

10.0.1

What's Wrong?

Hello,

I'm almost finished with the react-native upgrade from 0.75 to 0.79 (with new architecture). I upgraded @react-spring/native from 9.6.1 to 10.0.1 and I have a bug caught by jest:

TypeError: Cannot assign to read only property 'shadowOffset' of object '#<Object>'

The styled component in question has shadow-offset: 0 -15px; which transforms to an object in react-native, so styles.shadowOffset is reassigned here:

react-spring/targets/native/src/index.ts

Lines 27 to 33 in 7cc1c90

	createAnimatedStyle(styles) {
	styles = StyleSheet.flatten(styles)
	if (is.obj(styles.shadowOffset)) {
	styles.shadowOffset = new AnimatedObject(styles.shadowOffset)
	}
	return new AnimatedStyle(styles)
	},

When I remove that shadowOffset style, the error is gone. I get it that styles object props are read-only in react but that logic was also present in previous versions of react-spring, so it must be a react thing.

To Reproduce

Create an animated component with shadowOffset: { width, height }.

Expected Behaviour

No error

Link to repo