React native Animated timing hook for tweening

useTimingAnimation.ts

import {useEffect, useRef, useState} from 'react';
import {Animated} from 'react-native';

function useTimingAnimation(
  initialValue: number,
  {
    delay,
    duration,
    easing,
    toValue,
    isInteraction = true,
    useNativeDriver = true,
  }: Partial<Animated.TimingAnimationConfig>,
  onFinish?: Animated.EndCallback,
) {
  const {current: animatingValue} = useRef(new Animated.Value(initialValue));
  const [animatedValue, setAnimatedValue] = useState(initialValue);

  useEffect(() => {
    Animated.timing(animatingValue, {
      delay,
      duration,
      easing,
      toValue,
      useNativeDriver,
    }).start(onFinish);

    const animatingId = animatingValue.addListener(({value}) =>
      setAnimatedValue(value),
    );

    return () => {
      animatingValue.removeListener(animatingId);
    };
  }, [
    animatingValue,
    delay,
    duration,
    easing,
    toValue,
    useNativeDriver,
    isInteraction,
    onFinish,
  ]);

  return {
    ref: animatingValue,
    animatedValue,
  };
}

export default useTimingAnimation;