related-ui-components 3.0.1 → 3.0.2

package/lib/module/app.js

@@ -43,13 +43,12 @@ const App = () => {
             }), /*#__PURE__*/_jsx(SafeAreaView, {
               style: styles.appContainer,
               children: /*#__PURE__*/_jsx(CircularProgressBar, {
-                progress: 40,
-                customText: 'بلاتينم',
+                progress: 0,
                 totalSteps: 4,
-                currentStep: 4,
-                size: 150,
+                currentStep: 1,
+                size: 43,
                 strokeWidth: 2,
-                progressColor: "#9CA0A3"
+                progressColor: "blue"
               })
             })]
           })

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","customText","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAeC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAkC,cAAc;AACV;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAarE,SAAoBC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC1E,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAIlE,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAE;AAAG,CAAC,EAAE,CAACC,CAAC,EAAEC,CAAC,MAAM;EACvDC,EAAE,EAAE,SAASD,CAAC,GAAG,CAAC,EAAE;EACpB;EACAE,KAAK,EAAE,2CAA2C;EAClDC,KAAK,EAAE,UAAUH,CAAC,GAAG,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,MAAMI,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACqB,aAAa,EAAEC,gBAAgB,CAAC,GAAG7B,QAAQ,CAChD8B,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAqB8B,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMmC,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EAED,oBACExB,IAAA,CAAAI,SAAA;IAAAwB,QAAA,eACE5B,IAAA,CAACF,gBAAgB;MAAA8B,QAAA,eACf5B,IAAA,CAACR,sBAAsB;QAACqC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzC5B,IAAA,CAACN,eAAe;UAACqB,KAAK,EAAEtB,UAAW;UAAAmC,QAAA,eACjC1B,KAAA,CAACL,wBAAwB;YAAA+B,QAAA,gBACvB5B,IAAA,CAACT,SAAS;cAACwC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC/B,IAAA,CAACX,YAAY;cAACwC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eAuDvC5B,IAAA,CAACJ,mBAAmB;gBAACyB,QAAQ,EAAE,EAAG;gBAAEa,UAAU,EAAE,SAAU;gBAACC,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,GAAI;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAS,CAAsB;YAAC,CAqBxJ,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACT;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMP,MAAM,GAAG1C,UAAU,CAACkD,MAAM,CAAC;EAC/BP,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPW,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,QAAQ;IAAE;IAC1BC,UAAU,EAAC;EACb;AACF,CAAC,CAAC;AAEF,eAAe7B,GAAG","ignoreList":[]}
+{"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","CircularProgressBar","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","Array","from","length","_","i","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","totalSteps","currentStep","size","strokeWidth","progressColor","create","backgroundColor","justifyContent","alignItems"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAeC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAkC,cAAc;AACV;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAarE,SAAoBC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAC1E,OAAOC,mBAAmB,MAAM,iDAA8C;AAE9E,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAIlE,MAAMC,UAAU,GAAGC,KAAK,CAACC,IAAI,CAAC;EAAEC,MAAM,EAAE;AAAG,CAAC,EAAE,CAACC,CAAC,EAAEC,CAAC,MAAM;EACvDC,EAAE,EAAE,SAASD,CAAC,GAAG,CAAC,EAAE;EACpB;EACAE,KAAK,EAAE,2CAA2C;EAClDC,KAAK,EAAE,UAAUH,CAAC,GAAG,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,MAAMI,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGpB,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACqB,aAAa,EAAEC,gBAAgB,CAAC,GAAG7B,QAAQ,CAChD8B,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAqB8B,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMmC,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EAED,oBACExB,IAAA,CAAAI,SAAA;IAAAwB,QAAA,eACE5B,IAAA,CAACF,gBAAgB;MAAA8B,QAAA,eACf5B,IAAA,CAACR,sBAAsB;QAACqC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzC5B,IAAA,CAACN,eAAe;UAACqB,KAAK,EAAEtB,UAAW;UAAAmC,QAAA,eACjC1B,KAAA,CAACL,wBAAwB;YAAA+B,QAAA,gBACvB5B,IAAA,CAACT,SAAS;cAACwC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC/B,IAAA,CAACX,YAAY;cAACwC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eAuDvC5B,IAAA,CAACJ,mBAAmB;gBAAEyB,QAAQ,EAAE,CAAE;gBAACa,UAAU,EAAE,CAAE;gBAACC,WAAW,EAAE,CAAE;gBAACC,IAAI,EAAE,EAAG;gBAAEC,WAAW,EAAE,CAAE;gBAACC,aAAa,EAAC;cAAM,CAAsB;YAAC,CAqB5H,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACT;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAMN,MAAM,GAAG1C,UAAU,CAACiD,MAAM,CAAC;EAC/BN,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPU,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,QAAQ;IAAE;IAC1BC,UAAU,EAAC;EACb;AACF,CAAC,CAAC;AAEF,eAAe5B,GAAG","ignoreList":[]}

package/lib/module/components/ProgressBar/CircularProgressBar.js

@@ -1,11 +1,12 @@
 "use strict";
 
 import React, { useEffect } from "react";
-import { Canvas, Path, Shadow, Skia, DashPathEffect } from "@shopify/react-native-skia";
-import { useSharedValue, withTiming, Easing } from "react-native-reanimated";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, TextInput, View } from "react-native";
+import { Canvas, DashPathEffect, Path, Shadow, Skia } from "@shopify/react-native-skia";
+import Animated, { Easing, useAnimatedProps, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
 import { useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 const CircularProgressBar = ({
   size = 120,
   strokeWidth = 8,
@@ -23,8 +24,7 @@ const CircularProgressBar = ({
   progressPadding = 0,
   currentStep = 0,
   totalSteps = 4,
-  stepGap = 15,
-  textStyle
+  stepGap = 15
 }) => {
   const {
     theme
@@ -45,6 +45,26 @@ const CircularProgressBar = ({
       easing: Easing.out(Easing.cubic)
     });
   }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
+  const textToDisplay = useDerivedValue(() => {
+    if (customText !== undefined) {
+      return customText;
+    }
+    if (variant === "steps") {
+      const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
+      return `${displayStep}/${totalSteps}`;
+    }
+    return `${Math.round(animatedValue.value * 100)}%`;
+  }, [customText, variant, animatedValue, totalSteps]);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: textToDisplay.value
+    };
+  });
+  const getInitialText = () => {
+    if (customText !== undefined) return customText;
+    if (variant === 'steps') return `${currentStep}/${totalSteps}`;
+    return `${progress}%`;
+  };
   const renderSteps = () => {
     const totalGapDegrees = (totalSteps || 1) * stepGap;
     const totalArcDegrees = 360 - totalGapDegrees;
@@ -109,21 +129,22 @@ const CircularProgressBar = ({
     style: [{
       width: size,
       height: size,
-      justifyContent: "center",
-      alignItems: "center"
+      justifyContent: 'center',
+      alignItems: 'center'
     }, style],
     children: [/*#__PURE__*/_jsx(Canvas, {
       style: StyleSheet.absoluteFill,
       children: variant === "steps" ? renderSteps() : renderProgress()
-    }), /*#__PURE__*/_jsx(Text
-    // bold
-    , {
-      style: [{
+    }), /*#__PURE__*/_jsx(AnimatedTextInput, {
+      editable: false,
+      defaultValue: getInitialText(),
+      style: {
         color: finalTextColor,
         fontSize: fontSize,
-        textAlign: "center"
-      }, textStyle],
-      children: customText
+        textAlign: 'center',
+        padding: 0
+      },
+      animatedProps: animatedProps
     })]
   });
 };

package/lib/module/components/ProgressBar/CircularProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Canvas","Path","Shadow","Skia","DashPathEffect","useSharedValue","withTiming","Easing","StyleSheet","Text","View","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","textStyle","theme","animatedValue","finalProgressColor","primary","finalBackgroundColor","disabled","finalTextColor","onSurface","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","width","height","justifyContent","alignItems","absoluteFill","textAlign"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","StyleSheet","TextInput","View","Canvas","DashPathEffect","Path","Shadow","Skia","Animated","Easing","useAnimatedProps","useDerivedValue","useSharedValue","withTiming","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AnimatedTextInput","createAnimatedComponent","CircularProgressBar","size","strokeWidth","backgroundColor","progressColor","lineCap","customText","textColor","fontSize","style","innerShadowColor","duration","variant","progress","progressPadding","currentStep","totalSteps","stepGap","theme","animatedValue","finalProgressColor","primary","finalBackgroundColor","disabled","finalTextColor","onSurface","radius","circumference","Math","PI","path","Make","addCircle","progressStrokeWidth","max","targetValue","value","easing","out","cubic","textToDisplay","undefined","displayStep","round","animatedProps","text","getInitialText","renderSteps","totalGapDegrees","totalArcDegrees","stepArcLength","gapLength","dashPattern","children","strokeCap","color","intervals","start","end","dx","dy","blur","inner","renderProgress","width","height","justifyContent","alignItems","absoluteFill","editable","defaultValue","textAlign","padding"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/CircularProgressBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ViewStyle } from "react-native";
 interface CircularProgressBarProps {
     size?: number;
     strokeWidth?: number;
@@ -18,7 +18,6 @@ interface CircularProgressBarProps {
     currentStep?: number;
     totalSteps?: number;
     stepGap?: number;
-    textStyle?: StyleProp<TextStyle>;
 }
 declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
 export default CircularProgressBar;

package/lib/typescript/src/components/ProgressBar/CircularProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAGL,SAAS,EAGT,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuI3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CircularProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/CircularProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAatE,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmJ3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -106,7 +106,7 @@ const App = () => {
                 {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
                 {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
                 {/* <CarouselCardStack data={DUMMY_DATA} /> */}
-                <CircularProgressBar progress={40}  customText={'بلاتينم'} totalSteps={4} currentStep={4} size={150}  strokeWidth={2} progressColor="#9CA0A3"></CircularProgressBar>
+                <CircularProgressBar  progress={0} totalSteps={4} currentStep={1} size={43}  strokeWidth={2} progressColor="blue"></CircularProgressBar>
                 {/* <RangeSlider initialMinValue={0} initialMaxValue={100} min={0} max={500} sliderWidth={300} onValueChange={console.log}></RangeSlider> */}
                 {/* <PhoneInput
                   value=""

package/src/components/ProgressBar/CircularProgressBar.tsx

@@ -1,32 +1,17 @@
 import React, { useEffect } from "react";
-import {
-  Canvas,
-  matchFont,
-  Path,
-  Shadow,
-  Skia,
-  useFont,
-  PathOp,
-  DashPathEffect,
-} from "@shopify/react-native-skia";
-import {
+import { StyleSheet, TextInput, View, ViewStyle } from "react-native";
+import { Canvas, DashPathEffect, Path, Shadow, Skia } from "@shopify/react-native-skia";
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useDerivedValue,
   useSharedValue,
   withTiming,
-  useDerivedValue,
-  Easing,
 } from "react-native-reanimated";
-import {
-  ImageRequireSource,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from "react-native";
 import { useTheme } from "../../theme";
 
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 interface CircularProgressBarProps {
   size?: number;
   strokeWidth?: number;
@@ -45,7 +30,6 @@ interface CircularProgressBarProps {
   currentStep?: number;
   totalSteps?: number;
   stepGap?: number;
-  textStyle?: StyleProp<TextStyle>;
 }
 
 const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
@@ -66,7 +50,6 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   currentStep = 0,
   totalSteps = 4,
   stepGap = 15,
-  textStyle,
 }) => {
   const { theme } = useTheme();
   const animatedValue = useSharedValue(0);
@@ -84,13 +67,38 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
 
   useEffect(() => {
     const targetValue =
-      variant === "steps" ? currentStep / (totalSteps || 1) : progress / 100;
+      variant === "steps"
+        ? currentStep / (totalSteps || 1)
+        : progress / 100;
     animatedValue.value = withTiming(targetValue, {
       duration,
       easing: Easing.out(Easing.cubic),
     });
   }, [progress, currentStep, totalSteps, duration, variant, animatedValue]);
 
+  const textToDisplay = useDerivedValue(() => {
+    if (customText !== undefined) {
+      return customText;
+    }
+    if (variant === "steps") {
+      const displayStep = Math.round(animatedValue.value * (totalSteps || 1));
+      return `${displayStep}/${totalSteps}`;
+    }
+    return `${Math.round(animatedValue.value * 100)}%`;
+  }, [customText, variant, animatedValue, totalSteps]);
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: textToDisplay.value,
+    } as any; 
+  });
+
+  const getInitialText = () => {
+    if (customText !== undefined) return customText;
+    if (variant === 'steps') return `${currentStep}/${totalSteps}`;
+    return `${progress}%`;
+  };
+
   const renderSteps = () => {
     const totalGapDegrees = (totalSteps || 1) * stepGap;
     const totalArcDegrees = 360 - totalGapDegrees;
@@ -154,35 +162,23 @@ const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
   );
 
   return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        style,
-      ]}
-    >
+    <View style={[{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }, style]}>
       <Canvas style={StyleSheet.absoluteFill}>
         {variant === "steps" ? renderSteps() : renderProgress()}
       </Canvas>
-      <Text
-        // bold
-        style={[
-          {
-            color: finalTextColor,
-            fontSize: fontSize,
-            textAlign: "center",
-          },
-          textStyle,
-        ]}
-      >
-        {customText}
-      </Text>
+      <AnimatedTextInput
+        editable={false}
+        defaultValue={getInitialText()}
+        style={{
+          color: finalTextColor,
+          fontSize: fontSize,
+          textAlign: 'center',
+          padding: 0 
+        }}
+        animatedProps={animatedProps}
+      />
     </View>
   );
 };
 
-export default CircularProgressBar;
+export default CircularProgressBar;