SharedValue resets when clicking an unrelated button on rendering react native

[youssef-elmweb]

Hi everyone,

since 2 days i work with determination for construction sharedValue on application with Reanimated

I'm facing an issue with Reanimated 2 where a SharedValue resets when I click a button that is completely unrelated to it. However, when I console.log the value, it appears correctly updated.

Context
I have a SharedValue (angle) defined in a parent component (ViewElbow) and passed as a prop to a child component (Elbow).

Inside Elbow, this SharedValue is used inside useAnimatedStyle and updated through a Slider.

Everything works fine until I click a button in the parent component (App.js).

After the click, the animated element resets to its initial state, but console.log(angle.value) still shows the correct latest value.

`const [rerender, setRerender] = useState(false);
const angle = useSharedValue(90);

return (

<Button title="Test" onPress={() => setRerender(!rerender)} />


);

const ViewElbow = ({ angle }) => {
return ;
};

const Elbow = ({ angle }) => {
const animatedStyle = useAnimatedStyle(() => {
return { transform: [{ rotate: ${angle.value}deg }] };
});

return <Animated.View style={[animatedStyle, { width: 100, height: 100, backgroundColor: "red" }]} />;
};`

Observed Issue
angle.value updates correctly when using the Slider.

When clicking the button in App.js, the animation resets to 90°, even though console.log(angle.value) still logs the latest correct value.

Questions
Why does the SharedValue visually reset while keeping the correct value?

Is the reset caused by the setState re-render in App.js?

How can I prevent this reset while keeping smooth updates?

Any help would be greatly appreciated!

Thank you very much for your helping

[MatiPl01]

Hey @youssef-elmweb!

Can you possibly use reanimated 3 instead of reanimated 2 and see if the issue still persists? We no longer support reanimated 2, so even if there is an issue in the library, we won't fix it.