Skip to content

Commit

Permalink
feat: intervalMs prop to control the interval frequency (#9)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgommezz
rgommezz committed Feb 10, 2024
1 parent 6498505 commit 5c5dda2
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 6 deletions.
9 changes: 5 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

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

- [Features](#features)
- [Preview](#preview)
- [Try it out](#try-it-out)
Expand Down Expand Up @@ -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) |
Expand All @@ -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<ViewStyle>` | The style of the stopwatch/timer `View` container |
| `digitStyle` | no | `StyleProp<TextStyle>` | 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<TextStyle>` | 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<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/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

Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@
"engines": {
"node": ">= 16.0.0"
},
"packageManager": "^yarn@1.22.15",
"jest": {
"preset": "react-native",
"modulePathIgnorePatterns": [
Expand Down
6 changes: 6 additions & 0 deletions src/StopwatchTimer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -110,6 +114,7 @@ function Stopwatch(
textCharStyle,
trailingZeros = 1,
decimalSeparator = ',',
intervalMs = 16,
}: StopwatchTimerProps,
ref: ForwardedRef<StopwatchTimerMethods>
) {
Expand All @@ -126,6 +131,7 @@ function Stopwatch(
initialTimeInMs,
onFinish,
mode,
intervalMs,
});

useImperativeHandle(ref, () => ({
Expand Down
4 changes: 3 additions & 1 deletion src/useTimer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -66,7 +68,7 @@ const useTimer = ({
startTime.current = startTime.current! + elapsedSincePaused;
pausedTime.current = null;
}
}, 16);
}, intervalMs);
}

function resetState() {
Expand Down

0 comments on commit 5c5dda2

Please sign in to comment.