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:
Download Details:
Author: rgommezz
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/rgommezz/react-native-animated-stopwatch-timer
License: MIT