[3.12.0] TypeError: property is not configurable on useAnimatedStyle hook about react-native-reanimated

[tjzel]

I hate it when property is not configurable

[efstathiosntonas]

@piaskowyk can you please take a look into this? (tagging you since you fixed the similar linked issue).

It happens with runOnJS too, eg:

const [showPlayButton, setShowPlayButton] = useState(!user?.gif_autoplay);
const [currentIndex, setCurrentIndex] = useState(0);

const selectedPageHandler = useAnimatedPagerSelectedPageHandler({
    onPageSelected: (e) => {
      "worklet";
      currentPage.value = e.position;
      runOnJS(setShowPlayButton)(!user?.gif_autoplay);
      runOnJS(setCurrentIndex)(e.position);
    }
  });

This line will throw: tsx runOnJS(setShowPlayButton)(!user?.gif_autoplay); while the next line won't.

[tjzel]

I've just released an rc1 version of Reanimated (3.13.0-rc.1) that should solve this issue. Please check if it works for you.

[efstathiosntonas]

Thanks @tjzel! Been using

if (descriptor && !descriptor.configurable) {
      return;
    }

from comment above since I posted the comment and no issues so far so 3.13.0-rc.1 should be fine!

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[TomCorvus]

I have the same problem since 3.12.0 version.
To reproduce this error, just call a variable from StyleSheet.create to set a property value in useAnimatedStyle hook. Like this:

export const useStyles = () => {
	const styles = StyleSheet.create({
		container: {
			marginTop: 16
		} as ViewStyle,
	})
	return styles
}
export default useStyles

const animatedStyle = useAnimatedStyle(() => ({
	marginTop: styles.container.marginTop,
	opacity: interpolate(
		scrollOffsetY.value,
		[0, TOP_SCROLL_DISTANCE],
		[0, 1],
		Extrapolation.CLAMP,
	),
}))

@szydlovsky Did you see this issue before releasing 3.12.0 version?

[quocluongha]

I also encounter the same problem after upgrading from 3.11.x to 3.12.0.
For me it happened when I try to call a function exposed by a component via its ref, using React.createRef.

Modal.tsx

export const ModalRef = createRef()

export const Modal = props => {
  return <ModalComponent ref={BottomTabBarRef} {...props} />
};

App.tsx

<>
  <Child />
  <Modal />
</>

Child.tsx

useAnimatedReaction(
  () => ({...}),
  ({ ... }) => {
     runOnJS(ModalRef.current.show)() // <-- Works fine before upgrading to 3.12.0
  }
);

[MichaelDanielTom]

I also experienced this while trying to use StyleSheet.hairlineWidth within useAnimatedStyle. One thing to note is that it did not need to actually be called to crash, only to be somewhere in the code in the worklet. A temporary workaround for me was to define const hairlineWidth = StyleSheet.hairlineWidth; outside of the worklet, and then use that value in the worklet, so I'd assume this would work for StyleSheet.absoluteFillObject.

[akuul]

Encountered same issue with 3.12.0.

Minimal snippet to reproduce error:

const animatedSwitchKnob = useAnimatedStyle(() => {
    const [offsetLeft, offsetRight] = [
      styles.inner.paddingStart,
      styles.inner.paddingEnd,
    ];
   <...>
  }, [activated]);

const styles = StyleSheet.create({
  inner: {
    paddingStart: 4,
    paddingEnd: 4,
  },
});

[efstathiosntonas]

@tjzel @kmagiera sorry for breaking balls about this issue, is someone looking into it? It's impossible to work 😓

I could downgrade to 3.11.x but why should I? haha

[giantslogik]

Patch package that fixed a similar issue: #6082 (comment)

[efstathiosntonas]

I think we should check if the property is configurable on shareables.ts freezeObjectIfDev function:

react-native-reanimated/src/reanimated2/shareables.ts

Lines 320 to 321 in 8a9e161

	Object.entries(value).forEach(([key, element]) => {
	Object.defineProperty(value, key, {

Object.entries(value).forEach(([key, element]) => {
    const descriptor = Object.getOwnPropertyDescriptor(value, key);
    if (descriptor && !descriptor.configurable) {
      return;
    }
...