Animated Timer

[devoren]

Hello! How to create a timer that runs with Reanimated?
I use this hook, but it uses JS Thread so is blocking thread (i have multiple timers)

export const useCountdown = (deadline: string): number => {
	const countDownDate = useMemo(() => Date.parse(deadline), [deadline]);
	const [countDown, setCountDown] = useState(countDownDate - new Date().getTime());

	useFocusEffect(
		useCallback(() => {
			const interval = setInterval(() => {
				setCountDown((prev) => prev - 1000);
			}, 1000);

			return () => {
				clearInterval(interval);
			};
		}, []),
	);

	return countDown;
};

Can i use this in worklets or using animations?

[MatiPl01]

Hey!

There is no out-of-the-box solution provided by the reanimated library but you can build the one yourself. I used this approach and it seemed to work fine for my needs:

type AnimatedTimer = {
  set: (callback: () => void, duration: number) => void;
  clear: () => void;
};

export function useAnimatedTimer(): AnimatedTimer {
  'worklet';
  const value = useSharedValue(0);

  return useMemo(
    () => ({
      clear: () => {
        'worklet';
        value.value = 0;
      },
      set: (callback: () => void, duration: number) => {
        'worklet';
        value.value = withTiming(1, { duration }, completed => {
          if (completed) {
            value.value = 0;
            callback();
          }
        });
      }
    }),
    [value]
  );
}

Because both methods (set and clear) are worklets, they can be safely called from the UI thread. You will have to just call the useAnimatedTimer hook before to get your timer object:

const myAnimatedTimer = useAnimatedTimer()

// For example, use it in the useAnimatedReaction callback
useAnimatedReaction(
  () => { /* prepare values */ },
  () => {
  /* react to value changes */
  // Set the timer
  myAnimatedTimer.set(() => {
    // Update shared value or do something else
  }, 1000)
})

[MatiPl01]

I found better solution than the one I proposed above. Here is a link to the comment where I pasted implementations with API very similar to the JS setTimeout and setInterval API.