react-native-reanimated: makeShareableCloneRecursive Call Stack Size Exceeded

I get this error when I’m running in debug mode, then using developer settings to change to release mode.

I find rebuilding and using react-native start --reset-cache tends to fix this issue.

We hit this as well when attempting to upgrade from v3 RC1. Haven’t had a chance to dig in yet, but we will add more details if we can figure out a minimum repro.

The cause of the issue is a recursive object that is being used in a worklet function (useAnimatedStyle)

function Test(props) {
	const obj = {
		opacity: 1,
	}
	obj.test = obj; // make the object recursive

	const style = useAnimatedStyle(() => ({
		opacity: obj.opacity,
	}));
	return <Animated.View style={style} />
}

To workaround this issue you have to convert the variable to serializable value, e.g. with object destructuring:

function Test(props) {
	const obj = {
		opacity: 1,
	}
	obj.test = obj; // make the object recursive

	const { opacity } = obj

	const style = useAnimatedStyle(() => ({
		opacity: opacity,
	}));

	return <Animated.View style={style} />
}

Reanimated V2 seems to automatically detect recursive objects and handle this edge case, but V3 does not.

Is anyone getting this issue again? It’s happening only on Android Release builds.

This appears to be fixed in 3.1 - I can no longer repro. Thank you!

@LeviWilliams The issue with updates in useDerivedValue is resolved here https://github.com/software-mansion/react-native-reanimated/pull/4358 and should be included in next 3. release

It might be related to PanGestureHandler. When I remove PanGestureHandler from the screen where this error is happening, the error doesn’t occur any more

Commenting to follow. Also getting this error on Expo development client

I think the way to reproduce it is the following:

Example: Assume that we have 2 class components, Component A and Component B.

• Component A contains Component B within its render function.
• Component A passes one of it’s methods as a property to Component B

class ComponentA extends Component {
  doSomethingCool = () => {
    'worklet';
    // all the cool things
    return 'cool';
  }
  render() {
    return (<ComponentB
      doSomethingCoolProp={this.doSomethingCool}
    />)
  }
}

then in componentB you do:

const ComponentB = () => {

  const anotherFunc = () => {
    'worklet';
    const cool = this.props.doSomethingCoolProp();
  }

  runOnUI(anotherFunc);
  // ...
}

As soon as doSomethingCool is called we’ll get the above error.

In my example anotherFunc is invoked by react-native-gesture-handler’s Gesture.Pan().onEnd() so I’m not running runOnUI manually, but I think it’s done below the hood. Still that’s when I get this error.

In our case, I was able to narrow down to two different places where this error occurs. One was a Gesture.Pan.onEnd(), and the other was a useDerivedValue(). I narrowed down in both to a single line of code - and in both cases that line of code was referencing a prop from the containing component.

Could be coincidence, but @andrewlo @TomCorvus it might be worth checking if you can narrow down to the line of code inside the PanGestureHandler that’s causing the failure.

I’ve still had no luck with a min repro. We had to stay on our previous build for now.