Feature/animateable text

package.json

@@ -26,9 +26,10 @@
     "url": "git+https://github.com/nithinpp69/react-native-circular-progress-indicator.git"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-native": ">=0.59.0",
-    "react-native-reanimated": ">=2.2.0",
+    "react": "*",
+    "react-native": ">=0.74.0",
+    "react-native-animateable-text": ">=0.14.1",
+    "react-native-reanimated": ">=3",
     "react-native-svg": ">=12.1.1"
   },
   "author": "Nithin P P <[email protected]>",
@@ -57,12 +58,13 @@
     "jest": "^28.1.0",
     "metro-react-native-babel-preset": "^0.71.1",
     "prettier": "^2.7.1",
-    "react": "17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native": "0.68.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.0",
+    "react-native-animateable-text": "^0.14.1",
     "react-native-builder-bob": "^0.18.3",
     "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.3.2",
+    "react-native-reanimated": "~3.16.1",
     "react-native-svg": "^12.1.1",
     "react-test-renderer": "16.13.1",
     "typescript": "^4.7.4"

src/components/progressValue/index.tsx

@@ -4,19 +4,16 @@
 // blob/master/src/components/AnimatedText.tsx for web compatibility
 
 import React, { useMemo, useRef } from 'react';
-import { TextInput, Platform } from 'react-native';
-import Animated, { useAnimatedReaction } from 'react-native-reanimated';
+import { Platform } from 'react-native';
+import { useAnimatedReaction } from 'react-native-reanimated';
+import AnimateableText from 'react-native-animateable-text';
 
 import COLORS from '../../utils/colors';
 import type { ProgressValueProps } from '../../types';
 
 import styles from './styles';
 
-Animated.addWhitelistedNativeProps({ text: true });
-const AnimatedInput = Animated.createAnimatedComponent(TextInput);
-
 const ProgressValue: React.FC<ProgressValueProps> = ({
-  initialValue = 0,
   radius = 60,
   activeStrokeColor = COLORS.GREEN,
   progressValueColor,
@@ -62,12 +59,9 @@ const ProgressValue: React.FC<ProgressValueProps> = ({
   );
 
   return (
-    <AnimatedInput
+    <AnimateableText
       testID="progress-value-text"
       ref={inputRef}
-      underlineColorAndroid={COLORS.TRANSPARENT}
-      editable={false}
-      defaultValue={`${initialValue}`}
       style={[
         styles(styleProps).input,
         progressValueStyle,

src/hooks/useAnimatedValue.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import type { ColorValue } from 'react-native';
 import {
   createAnimatedPropAdapter,
   Easing,
@@ -38,7 +39,7 @@ export interface UseAnimatedValueProps {
 
 type Config = {
   strokeDashoffset: number;
-  stroke?: string | number;
+  stroke?: ColorValue;
 };
 
 export default function useAnimatedValue({

src/types/index.ts

@@ -1,7 +1,6 @@
 import type React from 'react';
 import type { TextInputProps, TextStyle } from 'react-native';
-import type { AnimateProps } from 'react-native-reanimated';
-import type Animated from 'react-native-reanimated';
+import type { AnimatedProps, SharedValue } from 'react-native-reanimated';
 import type { CircleProps } from 'react-native-svg';
 
 type StrokeLineCapType = 'butt' | 'round' | 'square';
@@ -117,7 +116,7 @@ interface BaseProgressCircleProps extends CircleGradientProps {
 }
 
 interface ProgressCircleProps extends BaseProgressCircleProps {
-  animatedCircleProps: AnimateProps<CircleProps>;
+  animatedCircleProps: AnimatedProps<CircleProps>;
 }
 
 interface BaseCircularProgressProps extends BaseProgressCircleProps {
@@ -335,8 +334,8 @@ type ProgressValueProps = {
   progressValueColor?: string;
   progressValueStyle?: TextStyle;
   progressValueFontSize?: number;
-  progressValue: Animated.SharedValue<string>;
-  animatedTextProps: AnimateProps<TextInputProps>;
+  progressValue: SharedValue<string>;
+  animatedTextProps: AnimatedProps<TextInputProps>;
   allowFontScaling?: boolean;
 };