@rific/timer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jay Deaton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# @rific/timer
+
+Animated SVG progress ring timer for React Native.
+
+## Installation
+
+```sh
+npm install @rific/timer react-native-svg
+```
+
+## Usage
+
+```tsx
+import { Timer } from '@rific/timer'
+import { Text } from 'react-native'
+
+const [started, setStarted] = useState<string | null>(null)
+
+<Timer
+  color='#6200ee'
+  duration={30}
+  radius={28}
+  started={started}
+  onStart={() => console.log('started')}
+  onStop={() => setStarted(null)}
+>
+  <Text>30s</Text>
+</Timer>
+
+<Button title='Start' onPress={() => setStarted(new Date().toISOString())} />
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `color` | `string` | ✓ | — | Stroke color of the progress ring |
+| `duration` | `number` | ✓ | — | Timer duration in seconds |
+| `radius` | `number` | ✓ | — | Radius of the SVG ring in pixels |
+| `started` | `string \| null` | ✓ | — | ISO timestamp when the timer started; `null` to stop |
+| `children` | `ReactNode` | | `undefined` | Rendered in the center of the ring |
+| `onStart` | `() => void` | | `undefined` | Called when the timer starts |
+| `onStop` | `() => void` | | `undefined` | Called when the timer reaches 100% |
+| `startProgress` | `number` | | `0` | Starting progress (0–1) |
+| `style` | `ViewStyle` | | `undefined` | Style applied to the container |
+| `width` | `number` | | `6` | Stroke width of the ring |
+
+## How it works
+
+Pass an ISO timestamp string to `started` to begin the countdown. Set `started` to `null` to reset. The ring animates from empty to full over `duration` seconds and calls `onStop` on completion.
+
+## Peer dependencies
+
+- `react >= 17.0.0`
+- `react-native >= 0.70.0`
+- `react-native-svg >= 13.0.0`

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+type TimerProps = {
+    children?: ReactNode;
+    color: string;
+    duration: number;
+    onStart?: () => void;
+    onStop?: () => void;
+    radius: number;
+    startProgress?: number;
+    started: string | null;
+    style?: ViewStyle;
+    width?: number;
+};
+declare const Timer: ({ children, color, duration, onStart, onStop, radius, startProgress, started, style, width }: TimerProps) => React.JSX.Element;
+
+export { Timer, type TimerProps };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+type TimerProps = {
+    children?: ReactNode;
+    color: string;
+    duration: number;
+    onStart?: () => void;
+    onStop?: () => void;
+    radius: number;
+    startProgress?: number;
+    started: string | null;
+    style?: ViewStyle;
+    width?: number;
+};
+declare const Timer: ({ children, color, duration, onStart, onStop, radius, startProgress, started, style, width }: TimerProps) => React.JSX.Element;
+
+export { Timer, type TimerProps };

package/dist/index.js

@@ -0,0 +1,115 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Timer: () => Timer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Timer.tsx
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_react_native_svg = __toESM(require("react-native-svg"));
+var AnimatedCircle = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Circle);
+var useNativeDriver = true;
+var Timer = ({ children, color, duration, onStart, onStop, radius, startProgress = 0, started, style, width = 6 }) => {
+  const durationRef = (0, import_react.useRef)(duration);
+  const progressRef = (0, import_react.useRef)(startProgress);
+  const startedRef = (0, import_react.useRef)(null);
+  const circumference = 2 * Math.PI * radius;
+  const animation = (0, import_react.useRef)(new import_react_native.Animated.Value(0)).current;
+  const animatedProps = {
+    strokeDashoffset: animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [circumference, 0]
+    })
+  };
+  const startTimer = (0, import_react.useCallback)(
+    (callback) => {
+      const clampedProgress = Math.max(0, Math.min(1, startProgress));
+      const remainingDurationMs = Math.max(0, duration * 1e3 * (1 - clampedProgress));
+      animation.setValue(clampedProgress);
+      if (onStart) onStart();
+      import_react_native.Animated.timing(animation, {
+        toValue: 1,
+        duration: remainingDurationMs,
+        easing: import_react_native.Easing.linear,
+        useNativeDriver
+      }).start(({ finished }) => {
+        if (finished && onStop) onStop();
+        if (callback) callback();
+      });
+    },
+    [animation, duration, onStart, onStop, startProgress]
+  );
+  const stopTimer = (0, import_react.useCallback)(
+    (callback) => {
+      animation.stopAnimation();
+      import_react_native.Animated.spring(animation, {
+        toValue: 0,
+        useNativeDriver
+      }).start(callback);
+    },
+    [animation]
+  );
+  (0, import_react.useEffect)(() => {
+    const startedChanged = started !== startedRef.current;
+    const durationChanged = duration !== durationRef.current;
+    const progressChanged = startProgress !== progressRef.current;
+    if (duration === 0) {
+      stopTimer();
+    } else if (started) {
+      if (startedChanged || durationChanged || progressChanged) {
+        animation.stopAnimation(() => startTimer());
+      }
+    } else {
+      stopTimer();
+    }
+    durationRef.current = duration;
+    progressRef.current = startProgress;
+    startedRef.current = started;
+  }, [animation, duration, startProgress, started, startTimer, stopTimer]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: [style, styles.root] }, /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.default, { width: radius * 2 + width, height: radius * 2 + width, viewBox: `0 0 ${radius * 2 + width} ${radius * 2 + width}`, style: styles.svg }, /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.G, { rotation: "-90", origin: `${radius + width / 2}, ${radius + width / 2}` }, /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: radius + width / 2, cy: radius + width / 2, r: radius, stroke: color, strokeWidth: width, fill: "none", strokeDasharray: circumference, ...animatedProps }))), /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.children }, children));
+};
+var styles = import_react_native.StyleSheet.create({
+  children: {
+    position: "absolute"
+  },
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  svg: {}
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Timer
+});

package/dist/index.mjs

@@ -0,0 +1,78 @@
+// src/Timer.tsx
+import React, { useCallback, useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import Svg, { Circle, G } from "react-native-svg";
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var useNativeDriver = true;
+var Timer = ({ children, color, duration, onStart, onStop, radius, startProgress = 0, started, style, width = 6 }) => {
+  const durationRef = useRef(duration);
+  const progressRef = useRef(startProgress);
+  const startedRef = useRef(null);
+  const circumference = 2 * Math.PI * radius;
+  const animation = useRef(new Animated.Value(0)).current;
+  const animatedProps = {
+    strokeDashoffset: animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [circumference, 0]
+    })
+  };
+  const startTimer = useCallback(
+    (callback) => {
+      const clampedProgress = Math.max(0, Math.min(1, startProgress));
+      const remainingDurationMs = Math.max(0, duration * 1e3 * (1 - clampedProgress));
+      animation.setValue(clampedProgress);
+      if (onStart) onStart();
+      Animated.timing(animation, {
+        toValue: 1,
+        duration: remainingDurationMs,
+        easing: Easing.linear,
+        useNativeDriver
+      }).start(({ finished }) => {
+        if (finished && onStop) onStop();
+        if (callback) callback();
+      });
+    },
+    [animation, duration, onStart, onStop, startProgress]
+  );
+  const stopTimer = useCallback(
+    (callback) => {
+      animation.stopAnimation();
+      Animated.spring(animation, {
+        toValue: 0,
+        useNativeDriver
+      }).start(callback);
+    },
+    [animation]
+  );
+  useEffect(() => {
+    const startedChanged = started !== startedRef.current;
+    const durationChanged = duration !== durationRef.current;
+    const progressChanged = startProgress !== progressRef.current;
+    if (duration === 0) {
+      stopTimer();
+    } else if (started) {
+      if (startedChanged || durationChanged || progressChanged) {
+        animation.stopAnimation(() => startTimer());
+      }
+    } else {
+      stopTimer();
+    }
+    durationRef.current = duration;
+    progressRef.current = startProgress;
+    startedRef.current = started;
+  }, [animation, duration, startProgress, started, startTimer, stopTimer]);
+  return /* @__PURE__ */ React.createElement(View, { style: [style, styles.root] }, /* @__PURE__ */ React.createElement(Svg, { width: radius * 2 + width, height: radius * 2 + width, viewBox: `0 0 ${radius * 2 + width} ${radius * 2 + width}`, style: styles.svg }, /* @__PURE__ */ React.createElement(G, { rotation: "-90", origin: `${radius + width / 2}, ${radius + width / 2}` }, /* @__PURE__ */ React.createElement(AnimatedCircle, { cx: radius + width / 2, cy: radius + width / 2, r: radius, stroke: color, strokeWidth: width, fill: "none", strokeDasharray: circumference, ...animatedProps }))), /* @__PURE__ */ React.createElement(View, { style: styles.children }, children));
+};
+var styles = StyleSheet.create({
+  children: {
+    position: "absolute"
+  },
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  svg: {}
+});
+export {
+  Timer
+};

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@rific/timer",
+  "version": "0.1.0",
+  "description": "Animated SVG progress ring timer for React Native",
+  "keywords": [
+    "react-native",
+    "timer",
+    "countdown",
+    "progress-ring",
+    "circular-progress",
+    "react-native-svg",
+    "svg",
+    "countdown-timer"
+  ],
+  "homepage": "https://github.com/jayrdeaton/react-native-timer#readme",
+  "bugs": {
+    "url": "https://github.com/jayrdeaton/react-native-timer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jayrdeaton/react-native-timer"
+  },
+  "license": "MIT",
+  "author": "Jay Deaton",
+  "sideEffects": false,
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "fix": "eslint --fix",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build",
+    "release": "git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:patch": "npm version patch && git push --follow-tags",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "typecheck": "tsc --noEmit",
+    "preversion": "npm run lint && npm test"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/parser": "^8.59.3",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-package-json": "^1.0.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "prettier": "^3.8.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.0.0",
+    "react-native": "^0.85.3",
+    "react-native-svg": "^15.15.5",
+    "ts-jest": "^29.4.9",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.3"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}