How to write Animated.Value.addListener in functional components?

Question

I know in class components we use addListener in this way:

const Animated.Value= new Animated.Value(0);
Animated.Value.addListener((value)=>this.value=value;)

I wondering how should i convert Animated.Value.addListener in functional components?and second question: should i put addListener in useEffect hook?

Answer 1

In my case, I did as below

import React, { useRef, useEffect } from "react";

const AnimationBox = (props) => {
  const pan: any = useRef(new Animated.ValueXY(props.pan)).current;

  useEffect(() => {
    pan.addListener((value) => {
      console.log(value);
    });

    return () => {
      pan.removeAllListeners();
    };
  }, []): 
}