Animated Stopwatch & Timer For React Native

Description:

A cross-platform and performant React Native Stopwatch & Timer component that empowers reanimated worklets to smoothly animate the digit change. All layout animations are executed on the UI thread at 60FPS.

How to use it:

1. Install and import the stopwatch timer component.

import { useRef } from 'react';
import StopwatchTimer, {
  StopwatchTimerMethods,
} from 'react-native-animated-stopwatch-timer';

2. Basic usage.

const App = () => {
  const stopwatchTimerRef = useRef<StopwatchTimerMethods>(null);
  // Methods to control the stopwatch
  function play() {
    stopwatchTimerRef.current?.play();
  }
  function pause() {
    stopwatchTimerRef.current?.pause();
  }
  function reset() {
    stopwatchTimerRef.current?.reset();
  }
  return <StopwatchTimer ref={stopwatchTimerRef} />;
};

3. Available component props.

/**
 * The enter/exit animation duration in milliseconds of a digit.
 */
animationDuration?: number;
/**
 * The enter/exit animation delay in milliseconds of a digit.
 */
animationDelay?: number;
/**
 * The enter/exit animation distance in dp of a digit.
 */
animationDistance?: number;
/**
 * The style of the component View container.
 */
containerStyle?: StyleProp<ViewStyle>;
/**
 * Extra style applied only to each digit, excluding separators.
 */
digitStyle?: StyleProp<TextStyle>;
/**
 * If you want to use it as a timer, set this value
 */
initialTimeInMs?: number;
/**
 * The number of zeros for the minutes.
 */
leadingZeros?: 1 | 2;
/**
 * Whether the new digit should enter from the top or the bottom.
 */
enterAnimationType?: 'slide-in-up' | 'slide-in-down';
/**
 * Callback executed when the timer reaches 0 (only when working in timer mode and initialTimeInMs is provided).
 */
onFinish?: () => void;
/**
 * Extra style applied only to separators. In this case, the colon (:) and the comma (,)
 */
separatorStyle?: StyleProp<TextStyle>;
/**
 * The style applied to each individual character of the stopwatch/timer.
 */
textCharStyle?: StyleProp<TextStyle>;
/**
 * If 0, the component will only display seconds and minutes.
 * If 1, the component will display seconds, minutes and hundredth of ms.
 */
trailingZeros?: 0 | 1 | 2;

4. Methods.

/**
 * Starts the stopwatch/timer or resumes it if paused. Has no effect if the stopwatch/timer is already running.
 */
play: () => void;
/**
 * Pauses the stopwatch/timer and returns the current elapsed time in milliseconds.
 */
pause: () => number;
/**
 * Resets the stopwatch/timer.
 */
reset: () => void;
/**
 * Returns the current elapsed time in milliseconds.
 */
getSnapshot: () => number;

Preview: