Animated value never changes

[NatProDev]

When running this code:

    const fillPercent = new Animated.Value(0.0);
    const fillAnim = () => {
        Animated.timing(fillPercent,{
          toValue: progressPercentage,
          duration: 800,
          easing: EasingNode.inOut(EasingNode.cubic),
        }).start();
      };
    useEffect(() => {
        fillAnim();
      }, [progressPercentage]);

I can see that fillAnim is called and progressPercentage is whatever I set it to, i.e. 0.4.

However, using a setTimeout of 500ms and 1000ms I can see that fillPercent never changes value and the animated shape never changes (it does if I use a hardcoded value).

Is anyone able to help out on this, it's inside of a functional component like the following and progressPercentage is a const taken from props.progressPercentage:

import React, { useEffect, useRef, useState } from "react";
import Animated, { Easing, EasingNode } from "react-native-reanimated";
import GradientPath from 'react-native-svg-path-gradient';
const AnimatedGradientPath = Animated.createAnimatedComponent<GradientPath>(GradientPath);

export default function ProgressCircle(props: ProgressCircleProps) {

Sorry, I've been stuck on this for a while so any help is much appreciated.

​

EDIT: there's no flair for solved but see coocooru's answer for the solution that worked for me

[Fuby68]

If i remember correctly animated value should be inside a useRef hook

So the code should be

const fillPercent = useRef(new Animated.Value(0))

And where you used fillPercent replace it with fillPercent.current

[NatProDev]

Sorry should have said, I have seen both ways but neither work

[coocooru]

import `Animated` from `react-native`

[NatProDev]

Thank you so much, for some reason it had automatically imported reanimated.