![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
react-native-animated-stopwatch-timer
Advanced tools
Readme
A React Native Stopwatch/Timer component that empowers reanimated worklets to smoothly animate the digits change. Cross-platform, performant, with all layout animations executed on the UI thread at 60FPS. Compatible with Expo.
It works in two modes:
initialTimeInMs
prop to activate this mode.npm install react-native-animated-stopwatch-timer
You also need to install react-native-reanimated
2.5.x
or higher.
npm install react-native-reanimated
If you are installing reanimated on a bare React Native app, you should also follow this additional installation instructions.
import { useRef } from 'react';
import StopwatchTimer, {
StopwatchTimerMethods,
} from 'react-native-animated-stopwatch-timer';
const stopwatchTimerRef = useRef<StopwatchTimerMethods>(null);
// Methods to control the stopwatch
function play() {
stopwatchTimerRef.current?.play();
}
function pause() {
const elapsedTimeInMs = stopwatchTimerRef.current?.pause();
// Do something with the elapsed time
console.log(elapsedTimeInMs);
}
function reset() {
stopwatchTimerRef.current?.reset();
}
return <StopwatchTimer ref={stopwatchTimerRef} />;
Name | Required | Type | Description |
---|---|---|---|
animationDuration | no | number | The enter/exit animation duration in milliseconds of a digit. Defaults to 80 |
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 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, that presents this issue. |
initialTimeInMs | no | number | If you want to use it as a timer, set this value |
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 (, ) |
onFinish | no | () => void | Callback executed when the timer reaches 0 (only when working in timer mode and initialTimeInMs prop is provided) |
textCharStyle | no | StyleProp<TextStyle> | The style applied to each individual character of the stopwatch/timer |
trailingZeros | no | 0 , 1 or 2 | If 0 , the component will only display seconds and minutes. If 1 , the component will display seconds, minutes and hundredth of ms. If 2 , the component will display seconds, minutes and tens of ms. Defaults to 1 |
play: () => void
Starts the stopwatch/timer or resumes it if paused. It has no effect if it's already running.
stopwatchTimerRef.current?.play();
pause: () => number
Pauses the stopwatch/timer. It has no effect if it is either paused or reset. The method returns a snapshot of the time elapsed in ms.
stopwatchTimerRef.current?.pause();
reset: () => void
Resets the stopwatch/timer.
stopwatchTimerRef.current?.reset();
getSnapshot: () => number
Returns the current time elapsed in ms.
stopwatchTimerRef.current?.getSnapshot();
stopwatchTimerRef
refers to the ref
passed to the StopwatchTimer
component.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library
FAQs
React Native Stopwatch component that smoothly animates the digits change
The npm package react-native-animated-stopwatch-timer receives a total of 137 weekly downloads. As such, react-native-animated-stopwatch-timer popularity was classified as not popular.
We found that react-native-animated-stopwatch-timer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.