From 5c5dda2b595a6f19bb68fc0b7a5222d19386c792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Acu=C3=B1a?= Date: Sat, 10 Feb 2024 16:36:34 +0100 Subject: [PATCH] feat: `intervalMs` prop to control the interval frequency (#9) --- README.md | 9 +++++---- package.json | 1 - src/StopwatchTimer.tsx | 6 ++++++ src/useTimer.ts | 4 +++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9a59d26..e438b7c 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ [![license MIT](https://img.shields.io/badge/license-MIT-brightgreen)](https://github.com/rgommezz/react-native-animated-stopwatch-timer/blob/master/LICENSE)

A React Native Stopwatch/Timer component that empowers reanimated worklets to smoothly animate the digit change. Cross-platform, performant, with all layout animations executed on the UI thread at 60FPS. Compatible with Expo.

- + - [Features](#features) - [Preview](#preview) - [Try it out](#try-it-out) @@ -87,7 +87,7 @@ const App = () => { ## Props | Name | Required | Type | Description | -| -------------------- | -------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|----------------------| -------- |------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `mode` | no | `stopwatch` or `timer` | Whether the component should work as a **stopwatch or as a timer**. Defaults to `stopwatch` | | `initialTimeInMs` | no | `number` | Initial time in miliseconds | | `onFinish` | no | `() => void` | Callback executed when the timer reaches 0 (only when working in **timer mode** and `initialTimeInMs` prop is provided) | @@ -96,12 +96,13 @@ const App = () => { | `animationDelay` | no | `number` | The enter/exit animation delay in milliseconds of a digit. Defaults to `0` | | `animationDistance` | no | `number` | The enter/exit animation vertical distance in dp of a digit. Defaults to `120` | | `containerStyle` | no | `StyleProp` | The style of the stopwatch/timer `View` container | -| `digitStyle` | no | `StyleProp` | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue.| +| `digitStyle` | no | `StyleProp` | Extra style applied to each digit, excluding separators (`:` and `,`). This property is useful if the `fontFamily` has different widths per digit to avoid an unpleasant fluctuation of the total component width as it runs. Check the example app where this is used on iOS's default San Francisco font, which presents this issue. | | `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` | Extra style applied only to separators. In this case, the colon (`:`) and the comma (`,`) | | `textCharStyle` | no | `StyleProp` | The style applied to each individual character of the stopwatch/timer | -| `decimalSeparator` | no | `string` | Decimal separator for formatting time. Defaults to a comma `,` | +| `decimalSeparator` | no | `string` | Decimal separator for formatting time. Defaults to a comma `,` | +| `intervalMs` | no | `number` | The interval in milliseconds to update the stopwatch/timer. Defaults to `16` | ## Methods diff --git a/package.json b/package.json index 9bff4c5..93f0aff 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,6 @@ "engines": { "node": ">= 16.0.0" }, - "packageManager": "^yarn@1.22.15", "jest": { "preset": "react-native", "modulePathIgnorePatterns": [ diff --git a/src/StopwatchTimer.tsx b/src/StopwatchTimer.tsx index 0a95bae..8232ba9 100644 --- a/src/StopwatchTimer.tsx +++ b/src/StopwatchTimer.tsx @@ -73,6 +73,10 @@ export interface StopwatchTimerProps { * Decimal separator for formatting time. Defaults to a comma (','), but any string can be used for custom formats. */ decimalSeparator?: string; + /** + * The interval in milliseconds at which the stopwatch/timer should update. Defaults to 16ms. + */ + intervalMs?: number; } export interface StopwatchTimerMethods { @@ -110,6 +114,7 @@ function Stopwatch( textCharStyle, trailingZeros = 1, decimalSeparator = ',', + intervalMs = 16, }: StopwatchTimerProps, ref: ForwardedRef ) { @@ -126,6 +131,7 @@ function Stopwatch( initialTimeInMs, onFinish, mode, + intervalMs, }); useImperativeHandle(ref, () => ({ diff --git a/src/useTimer.ts b/src/useTimer.ts index 877e9be..0c84588 100644 --- a/src/useTimer.ts +++ b/src/useTimer.ts @@ -8,10 +8,12 @@ const useTimer = ({ initialTimeInMs = 0, onFinish = () => null, mode = 'stopwatch', + intervalMs = 16, }: { initialTimeInMs?: number; onFinish?: () => void; mode?: 'timer' | 'stopwatch'; + intervalMs?: number; }) => { const direction = mode === 'timer' ? -1 : 1; const [elapsedInMs, setElapsedInMs] = useState(0); @@ -66,7 +68,7 @@ const useTimer = ({ startTime.current = startTime.current! + elapsedSincePaused; pausedTime.current = null; } - }, 16); + }, intervalMs); } function resetState() {