Javascript – How to listen to value change in react-native-reanimated


I have created a simple animation with Animated from react-native with react-native-svg.

This do the jobs well,

But Now I switched to react-native-reanimated cuz I read on their website that reanimated is faster than Animated from react-native.

But here I faced with a problem, and that is I cant find function addListener to listen to the value changes.

Code with Animated from react-native:

const circleRadius = new Animated.value(100);

circleRadius.addListener( circleRadius => {
       circleSVG.current.setNativeProps({ cx: circleRadius.value.toString() });

How can I implement above addListener function in react-native-reanimated ?

Best Solution

You can achieve similar behavior using Here is a nice tutorial about the subject.


For example, to listen to circleRadius changes, you could use this code:

  import { call, useCode } from 'react-native-reanimated'

  useCode(() => {
    return call([circleRadius], (circleRadius) => {
  }, [circleRadius])

Does it do what you want?