Articles for developers, by developers

Bridging Animated.Value and SharedValue in React Native

In React Native, Animated.Value and Reanimated’s SharedValue serve a similar purpose: they hold values that can change outside the render cycle and are typically used to drive animations. The problem is that they come from different libraries and don’t interoperate. If a component expects an Animated.Value, you can’t pass in a SharedValue, and vice versa. While you can wire them together by subscribing on the JavaScript thread, that approach breaks down under load and causes dropped frames. This article shows how to connect these two types of values natively, so updates happen on the UI thread without depending on JavaScript listeners.