react-native-animated-stopwatch

Animated Stopwatch

React Native Stopwatch component that smoothly animates the digits change. Cross-platform, performant, with all animations executed on the UI thread at 60FPS. Compatible with Expo.

Installation

npm install react-native-animated-stopwatch

Usage

import { useRef } from 'react';
import AnimatedStopwatch, {
  StopWatchMethods,
} from 'react-native-animated-stopwatch';

const stopwatchRef = useRef<StopWatchMethods>(null);

function play() {
  stopwatchRef.current?.play();
}

function pause() {
  const elapsedTimeInMs = stopwatchRef.current?.pause();
  // Do something with the elapsed time
  console.log(elapsedTimeInMs);
}

function reset() {
  stopwatchRef.current?.reset();
}

return <AnimatedStopwatch ref={stopwatchRef} />;

Props

Name	Required	Type	Description
animationDuration	no	number	The enter/exit animation duration in milliseconds of a stopwatch digit. Defaults to 80
animationDelay	no	number	The enter/exit animation delay in milliseconds of a stopwatch digit. Defaults to 0
animationDistance	no	number	The enter/exit animation vertical distance in dp of a stopwatch digit. Defaults to 120
containerStyle	no	StyleProp<ViewStyle>	The style of the stopwatch View container
digitStyle	no	StyleProp<TextStyle>	Extra style applied to each digit, excluding separators (: and ,)
leadingZeros	no	1 or 2	The number of zeros for the minutes. Defaults to 1
enterAnimationType	no	'slide-in-up' or 'slide-in-down'	Whether the new digit should enter from the top or the bottom
separatorStyle	no	StyleProp<TextStyle>	Extra style applied only to separators. In this case, the colon (:) and the comma (,)
textCharStyle	no	StyleProp<TextStyle>	The style applied to each individual character of the stopwatch
trailingZeros	no	0, 1 or 2	If 0, the stopwatch will only display seconds and minutes. If 1, the stopwatch will display seconds, minutes and hundredth of ms. If 2, the stopwatch will display seconds, minutes and tens of ms. Defaults to 1

Methods

play: () => void

Starts the stopwatch or resumes it if paused. It has no effect if the stopwatch is already running.

stopwatchRef.current?.play();

pause: () => number

Pauses the stopwatch. It has no effect if the stopwatch is either paused or reset. The method returns a snapshot of the time elapsed in ms.

stopwatchRef.current?.pause();

reset: () => void

Resets the stopwatch to 0.

stopwatchRef.current?.reset();

getSnapshot: () => number

Returns the current time elapsed in ms.

stopwatchRef.current?.getSnapshot();

stopwatchRef refers to the ref passed to the AnimatedStopwatch component.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library