Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: intervalMs prop to control the interval frequency #9

Merged
merged 2 commits into from
Feb 10, 2024
Merged

feat: intervalMs prop to control the interval frequency #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcfe7de
feat: prop to control the interval frequency
rgommezz Feb 10, 2024
92e533f
chore: remove packageManager from package.json
rgommezz Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading