@rific/timer 0.1.4 → 0.2.0

package/README.md

@@ -51,6 +51,6 @@ Pass an ISO timestamp string to `started` to begin the countdown. Set `started`
 
 ## Peer dependencies
 
-- `react >= 17.0.0`
-- `react-native >= 0.70.0`
+- `react >= 18.0.0`
+- `react-native >= 0.76.0`
 - `react-native-svg >= 13.0.0`

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ViewStyle } from 'react-native';
 
 type TimerProps = {
@@ -14,6 +13,6 @@ type TimerProps = {
     style?: ViewStyle;
     width?: number;
 };
-declare const Timer: ({ children, color, duration, onStart, onStop, radius, startProgress, started, style, width }: TimerProps) => react_jsx_runtime.JSX.Element;
+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

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ViewStyle } from 'react-native';
 
 type TimerProps = {
@@ -14,6 +13,6 @@ type TimerProps = {
     style?: ViewStyle;
     width?: number;
 };
-declare const Timer: ({ children, color, duration, onStart, onStop, radius, startProgress, started, style, width }: TimerProps) => react_jsx_runtime.JSX.Element;
+declare const Timer: ({ children, color, duration, onStart, onStop, radius, startProgress, started, style, width }: TimerProps) => React.JSX.Element;
 
 export { Timer, type TimerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/timer",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Animated SVG progress ring timer for React Native",
   "keywords": [
     "react-native",
@@ -26,6 +26,7 @@
   "type": "commonjs",
   "exports": {
     ".": {
+      "react-native": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -35,7 +36,10 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__"
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
@@ -49,7 +53,7 @@
     "test": "jest",
     "test:watch": "jest --watchAll",
     "typecheck": "tsc --noEmit",
-    "preversion": "npm run lint && npm test"
+    "preversion": "npm run lint && npm test && npm run build"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -77,8 +81,8 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-native": ">=0.70.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
     "react-native-svg": ">=13.0.0"
   },
   "publishConfig": {

package/src/Timer.tsx

@@ -0,0 +1,101 @@
+import React, { type ReactNode, useCallback, useEffect, useRef } from 'react'
+import { Animated, Easing, StyleSheet, View, ViewStyle } from 'react-native'
+import Svg, { Circle, G } from 'react-native-svg'
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+const useNativeDriver = true
+
+export type TimerProps = {
+  children?: ReactNode
+  color: string
+  duration: number
+  onStart?: () => void
+  onStop?: () => void
+  radius: number
+  startProgress?: number
+  started: string | null
+  style?: ViewStyle
+  width?: number
+}
+
+export const Timer = ({ children, color, duration, onStart, onStop, radius, startProgress = 0, started, style, width = 6 }: TimerProps) => {
+  const durationRef = useRef(duration)
+  const progressRef = useRef(startProgress)
+  const startedRef = useRef<string | null>(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?: () => void) => {
+      const clampedProgress = Math.max(0, Math.min(1, startProgress))
+      const remainingDurationMs = Math.max(0, duration * 1000 * (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?: () => void) => {
+      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 (
+    <View style={[style, styles.root]}>
+      <Svg width={radius * 2 + width} height={radius * 2 + width} viewBox={`0 0 ${radius * 2 + width} ${radius * 2 + width}`} style={styles.svg}>
+        <G rotation='-90' origin={`${radius + width / 2}, ${radius + width / 2}`}>
+          <AnimatedCircle cx={radius + width / 2} cy={radius + width / 2} r={radius} stroke={color} strokeWidth={width} fill='none' strokeDasharray={circumference} {...animatedProps} />
+        </G>
+      </Svg>
+      <View style={styles.children}>{children}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  children: {
+    position: 'absolute'
+  },
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  svg: {}
+})

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { TimerProps } from './Timer'
+export { Timer } from './Timer'