indatastar-styled-progress-bars 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 InDataStar
+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,37 @@
+# styled-progress-bars
+
+A choice of different progression bars to use
+
+## Installation
+
+
+```sh
+npm install styled-progress-bars
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from 'styled-progress-bars';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/SemiCircularProgressBar/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import Svg, { Path, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SemiCircularProgressBar = ({
+  progress = 0,
+  end = 50,
+  radius = 50,
+  strokeWidth = 10,
+  colors = ['#4c669f', '#3b5998'],
+  duration = 500
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const centerX = radius + strokeWidth;
+  const centerY = radius + strokeWidth;
+  const circumference = Math.PI * radius;
+
+  // Cast AnimatedPath so TS allows Animated values
+  const AnimatedPath = Animated.createAnimatedComponent(Path);
+  const path = `M ${centerX - radius},${centerY}
+              A ${radius},${radius} 0 0 1 ${centerX + radius},${centerY}`;
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, end],
+    outputRange: [circumference, 0]
+  });
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: progress,
+      duration,
+      useNativeDriver: false
+    }).start();
+  }, [progress]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: radius * 2 + strokeWidth * 2,
+      height: radius + strokeWidth * 2,
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(SvgGradient, {
+          id: "grad",
+          x1: "0%",
+          y1: "0%",
+          x2: "100%",
+          y2: "0%",
+          children: colors.map((color, index) => /*#__PURE__*/_jsx(Stop, {
+            offset: `${index / (colors.length - 1) * 100}%`,
+            stopColor: color
+          }, index))
+        })
+      }), /*#__PURE__*/_jsx(Path, {
+        d: path,
+        stroke: "rgba(224,224,224,0.3)",
+        strokeWidth: strokeWidth,
+        fill: "none",
+        strokeLinecap: "round"
+      }), /*#__PURE__*/_jsx(AnimatedPath, {
+        d: path,
+        stroke: "url(#grad)",
+        strokeWidth: strokeWidth,
+        fill: "none",
+        strokeDasharray: `${circumference}`,
+        strokeDashoffset: strokeDashoffset // TS-safe cast
+        ,
+        strokeLinecap: "round"
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default SemiCircularProgressBar;
+//# sourceMappingURL=index.js.map

package/lib/module/SemiCircularProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","View","Animated","StyleSheet","Svg","Path","Defs","LinearGradient","SvgGradient","Stop","jsx","_jsx","jsxs","_jsxs","SemiCircularProgressBar","progress","end","radius","strokeWidth","colors","duration","animatedValue","Value","current","centerX","centerY","circumference","Math","PI","AnimatedPath","createAnimatedComponent","path","strokeDashoffset","interpolate","inputRange","outputRange","timing","toValue","useNativeDriver","start","style","styles","container","children","width","height","id","x1","y1","x2","y2","map","color","index","offset","length","stopColor","d","stroke","fill","strokeLinecap","strokeDasharray","create","alignItems","justifyContent"],"sourceRoot":"../../../src","sources":["SemiCircularProgressBar/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/WaveProgressBar/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, Easing, Text } from 'react-native';
+import Svg, { Path, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WaveProgressBar = ({
+  progress = 0,
+  end = 50,
+  width = 300,
+  height = 50,
+  waveHeight = 10,
+  colors = ['#4c669f', '#3b5998'],
+  duration = 1000,
+  backgroundColor = '#e0e0e0',
+  borderRadius = 10,
+  showLabel = true
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: progress,
+      duration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [progress, duration]);
+
+  // Animated width of the wave container
+  const waveWidth = animatedValue.interpolate({
+    inputRange: [0, end],
+    outputRange: [0, width]
+  });
+
+  // Wave path
+  const wavePath = `
+    M0 ${height / 2}
+    Q ${width / 4} ${height / 2 - waveHeight}, ${width / 2} ${height / 2}
+    T ${width} ${height / 2}
+    L ${width} ${height}
+    L0 ${height}
+    Z
+  `;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      width,
+      height,
+      borderRadius,
+      backgroundColor
+    }],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        width: waveWidth,
+        height,
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsxs(Svg, {
+        width: width,
+        height: height,
+        children: [/*#__PURE__*/_jsx(Defs, {
+          children: /*#__PURE__*/_jsx(SvgGradient, {
+            id: "grad",
+            x1: "0%",
+            y1: "0%",
+            x2: "100%",
+            y2: "0%",
+            children: colors.map((color, index) => /*#__PURE__*/_jsx(Stop, {
+              offset: `${index / (colors.length - 1) * 100}%`,
+              stopColor: color
+            }, index))
+          })
+        }), /*#__PURE__*/_jsx(Path, {
+          d: wavePath,
+          fill: "url(#grad)"
+        })]
+      })
+    }), showLabel && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width,
+        height,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: {
+          color: '#fff',
+          fontWeight: 'bold'
+        },
+        children: [Math.round(progress), "%"]
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    justifyContent: 'center'
+  }
+});
+export default WaveProgressBar;
+//# sourceMappingURL=index.js.map

package/lib/module/WaveProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","View","Animated","StyleSheet","Easing","Text","Svg","Path","Defs","LinearGradient","SvgGradient","Stop","jsx","_jsx","jsxs","_jsxs","WaveProgressBar","progress","end","width","height","waveHeight","colors","duration","backgroundColor","borderRadius","showLabel","animatedValue","Value","current","timing","toValue","easing","out","ease","useNativeDriver","start","waveWidth","interpolate","inputRange","outputRange","wavePath","style","styles","container","children","overflow","id","x1","y1","x2","y2","map","color","index","offset","length","stopColor","d","fill","position","justifyContent","alignItems","fontWeight","Math","round","create"],"sourceRoot":"../../../src","sources":["WaveProgressBar/index.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,MAAM,EAAEC,IAAI,QAAQ,cAAc;AACvE,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,WAAW,EAAEC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAexF,MAAMC,eAAe,GAAGA,CAAC;EACvBC,QAAQ,GAAG,CAAC;EACZC,GAAG,GAAG,EAAE;EACRC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,EAAE;EACXC,UAAU,GAAG,EAAE;EACfC,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC;EAC/BC,QAAQ,GAAG,IAAI;EACfC,eAAe,GAAG,SAAS;EAC3BC,YAAY,GAAG,EAAE;EACjBC,SAAS,GAAG;AACQ,CAAC,KAAK;EAC1B,MAAMC,aAAa,GAAG3B,MAAM,CAAC,IAAIE,QAAQ,CAAC0B,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAE3D9B,SAAS,CAAC,MAAM;IACdG,QAAQ,CAAC4B,MAAM,CAACH,aAAa,EAAE;MAC7BI,OAAO,EAAEd,QAAQ;MACjBM,QAAQ;MACRS,MAAM,EAAE5B,MAAM,CAAC6B,GAAG,CAAC7B,MAAM,CAAC8B,IAAI,CAAC;MAC/BC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACnB,QAAQ,EAAEM,QAAQ,CAAC,CAAC;;EAExB;EACA,MAAMc,SAAS,GAAGV,aAAa,CAACW,WAAW,CAAC;IAC1CC,UAAU,EAAE,CAAC,CAAC,EAAErB,GAAG,CAAC;IACpBsB,WAAW,EAAE,CAAC,CAAC,EAAErB,KAAK;EACxB,CAAC,CAAC;;EAEF;EACA,MAAMsB,QAAQ,GAAG;AACnB,SAASrB,MAAM,GAAG,CAAC;AACnB,QAAQD,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,GAAGC,UAAU,KAAKF,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC;AACxE,QAAQD,KAAK,IAAIC,MAAM,GAAG,CAAC;AAC3B,QAAQD,KAAK,IAAIC,MAAM;AACvB,SAASA,MAAM;AACf;AACA,GAAG;EAED,oBACEL,KAAA,CAACd,IAAI;IAACyC,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEzB,KAAK;MAAEC,MAAM;MAAEK,YAAY;MAAED;IAAgB,CAAC,CAAE;IAAAqB,QAAA,gBAEhFhC,IAAA,CAACX,QAAQ,CAACD,IAAI;MAACyC,KAAK,EAAE;QAAEvB,KAAK,EAAEkB,SAAS;QAAEjB,MAAM;QAAE0B,QAAQ,EAAE;MAAS,CAAE;MAAAD,QAAA,eACrE9B,KAAA,CAACT,GAAG;QAACa,KAAK,EAAEA,KAAM;QAACC,MAAM,EAAEA,MAAO;QAAAyB,QAAA,gBAChChC,IAAA,CAACL,IAAI;UAAAqC,QAAA,eACHhC,IAAA,CAACH,WAAW;YAACqC,EAAE,EAAC,MAAM;YAACC,EAAE,EAAC,IAAI;YAACC,EAAE,EAAC,IAAI;YAACC,EAAE,EAAC,MAAM;YAACC,EAAE,EAAC,IAAI;YAAAN,QAAA,EACrDvB,MAAM,CAAC8B,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBACvBzC,IAAA,CAACF,IAAI;cAEH4C,MAAM,EAAE,GAAID,KAAK,IAAIhC,MAAM,CAACkC,MAAM,GAAG,CAAC,CAAC,GAAI,GAAG,GAAI;cAClDC,SAAS,EAAEJ;YAAM,GAFZC,KAGN,CACF;UAAC,CACS;QAAC,CACV,CAAC,eAEPzC,IAAA,CAACN,IAAI;UAACmD,CAAC,EAAEjB,QAAS;UAACkB,IAAI,EAAC;QAAY,CAAE,CAAC;MAAA,CACpC;IAAC,CACO,CAAC,EAGfjC,SAAS,iBACRb,IAAA,CAACZ,IAAI;MACHyC,KAAK,EAAE;QACLkB,QAAQ,EAAE,UAAU;QACpBzC,KAAK;QACLC,MAAM;QACNyC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE;MACd,CAAE;MAAAjB,QAAA,eAEF9B,KAAA,CAACV,IAAI;QAACqC,KAAK,EAAE;UAAEW,KAAK,EAAE,MAAM;UAAEU,UAAU,EAAE;QAAO,CAAE;QAAAlB,QAAA,GAAEmB,IAAI,CAACC,KAAK,CAAChD,QAAQ,CAAC,EAAC,GAAC;MAAA,CAAM;IAAC,CAC9E,CACP;EAAA,CACG,CAAC;AAEX,CAAC;AAED,MAAM0B,MAAM,GAAGxC,UAAU,CAAC+D,MAAM,CAAC;EAC/BtB,SAAS,EAAE;IACTE,QAAQ,EAAE,QAAQ;IAClBe,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAe7C,eAAe","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as SemiCircularProgressBar } from "./SemiCircularProgressBar/index.js";
+export { default as WaveProgressBar } from "./WaveProgressBar/index.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","SemiCircularProgressBar","WaveProgressBar"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,uBAAuB,QAAQ,oCAA2B;AAC9E,SAASD,OAAO,IAAIE,eAAe,QAAQ,4BAAmB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/SemiCircularProgressBar/index.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from 'react';
+interface SemiCircularProgressBarProps {
+    progress?: number;
+    end?: number;
+    radius?: number;
+    strokeWidth?: number;
+    colors?: string[];
+    duration?: number;
+}
+declare const SemiCircularProgressBar: ({ progress, end, radius, strokeWidth, colors, duration, }: SemiCircularProgressBarProps) => JSX.Element;
+export default SemiCircularProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SemiCircularProgressBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SemiCircularProgressBar/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAqB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,UAAU,4BAA4B;IACpC,QAAQ,CAAC,EAAC,MAAM,CAAC;IACjB,GAAG,CAAC,EAAC,MAAM,CAAC;IACZ,MAAM,CAAC,EAAC,MAAM,CAAC;IACf,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,MAAM,CAAC,EAAC,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAC,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,uBAAuB,GAAI,2DAO9B,4BAA4B,KAAG,GAAG,CAAC,OAqErC,CAAA;AASD,eAAe,uBAAuB,CAAC"}

package/lib/typescript/src/WaveProgressBar/index.d.ts

@@ -0,0 +1,15 @@
+interface WaveProgressBarProps {
+    progress?: number;
+    end?: number;
+    width?: number;
+    height?: number;
+    waveHeight?: number;
+    colors?: string[];
+    duration?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    showLabel?: boolean;
+}
+declare const WaveProgressBar: ({ progress, end, width, height, waveHeight, colors, duration, backgroundColor, borderRadius, showLabel, }: WaveProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default WaveProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/WaveProgressBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/WaveProgressBar/index.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,GAAI,2GAWtB,oBAAoB,4CAiEtB,CAAC;AASF,eAAe,eAAe,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SemiCircularProgressBar } from './SemiCircularProgressBar';
+export { default as WaveProgressBar } from './WaveProgressBar';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "indatastar-styled-progress-bars",
+  "version": "0.1.0",
+  "description": "A choice of different progression bars to use",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace styled-progress-bars-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/InDataStar/styled-progress-bars.git"
+  },
+  "author": "InDataStar <crawfordlp1@gmail.com> (https://github.com/InDataStar)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/InDataStar/styled-progress-bars/issues"
+  },
+  "homepage": "https://github.com/InDataStar/styled-progress-bars#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^3.7.4",
+    "react": "19.1.0",
+    "react-native": "^0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.1"
+  },
+  "dependencies": {
+    "react-native-svg": "^15.15.1"
+  }
+}

package/src/SemiCircularProgressBar/index.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, type JSX } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import Svg, { Path , Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg'; 
+import type {PathProps} from 'react-native-svg';
+
+interface SemiCircularProgressBarProps{
+  progress?:number;
+  end?:number;
+  radius?:number;
+  strokeWidth?:number;
+  colors?:string[];
+  duration?:number;
+}
+
+const SemiCircularProgressBar = ({
+  progress = 0,
+  end = 50,
+  radius = 50,
+  strokeWidth = 10,
+  colors = ['#4c669f', '#3b5998'],
+  duration = 500,
+}: SemiCircularProgressBarProps): JSX.Element => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const centerX = radius + strokeWidth;
+  const centerY = radius + strokeWidth; 
+  const circumference = Math.PI * radius;
+
+// Cast AnimatedPath so TS allows Animated values
+const AnimatedPath = Animated.createAnimatedComponent(Path) as React.ComponentType<
+  PathProps & { strokeDashoffset?: Animated.AnimatedInterpolation<number> }
+>;
+
+
+
+  const path = `M ${centerX - radius},${centerY}
+              A ${radius},${radius} 0 0 1 ${centerX + radius},${centerY}`;
+
+  const strokeDashoffset =animatedValue.interpolate({
+    inputRange:[0,end],
+    outputRange:[circumference,0],
+  })
+
+  useEffect(()=>{
+    Animated.timing(animatedValue,{
+      toValue:progress,
+      duration,
+      useNativeDriver:false
+    }).start();
+  },[progress])
+
+
+  return(
+    <View style={styles.container}>
+      <Svg
+        width={radius*2+strokeWidth*2}
+        height={radius+strokeWidth*2}
+      >
+        <Defs>
+          <SvgGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
+            {colors.map((color, index) => (
+              <Stop
+                key={index}
+                offset={`${(index / (colors.length - 1)) * 100}%`}
+                stopColor={color}
+              />
+            ))}
+          </SvgGradient>
+        </Defs>
+ 
+        <Path
+          d={path}
+          stroke="rgba(224,224,224,0.3)"
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeLinecap="round"
+        />
+ 
+        <AnimatedPath
+  d={path}
+  stroke="url(#grad)"
+  strokeWidth={strokeWidth}
+  fill="none"
+  strokeDasharray={`${circumference}`}
+  strokeDashoffset={strokeDashoffset as any} // TS-safe cast
+  strokeLinecap="round"
+/>
+
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default SemiCircularProgressBar;
+ 
+

package/src/WaveProgressBar/index.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, Easing, Text } from 'react-native';
+import Svg, { Path, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';
+
+interface WaveProgressBarProps {
+  progress?: number; // 0-100
+  end?: number; // 0-100
+  width?: number;
+  height?: number;
+  waveHeight?: number;
+  colors?: string[];
+  duration?: number;
+  backgroundColor?: string;
+  borderRadius?: number;
+  showLabel?: boolean;
+}
+
+const WaveProgressBar = ({
+  progress = 0,
+  end = 50,
+  width = 300,
+  height = 50,
+  waveHeight = 10,
+  colors = ['#4c669f', '#3b5998'],
+  duration = 1000,
+  backgroundColor = '#e0e0e0',
+  borderRadius = 10,
+  showLabel = true,
+}: WaveProgressBarProps) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: progress,
+      duration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [progress, duration]);
+
+  // Animated width of the wave container
+  const waveWidth = animatedValue.interpolate({
+    inputRange: [0, end],
+    outputRange: [0, width],
+  });
+
+  // Wave path
+  const wavePath = `
+    M0 ${height / 2}
+    Q ${width / 4} ${height / 2 - waveHeight}, ${width / 2} ${height / 2}
+    T ${width} ${height / 2}
+    L ${width} ${height}
+    L0 ${height}
+    Z
+  `;
+
+  return (
+    <View style={[styles.container, { width, height, borderRadius, backgroundColor }]}>
+      {/* Animated container for the wave */}
+      <Animated.View style={{ width: waveWidth, height, overflow: 'hidden' }}>
+        <Svg width={width} height={height}>
+          <Defs>
+            <SvgGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
+              {colors.map((color, index) => (
+                <Stop
+                  key={index}
+                  offset={`${(index / (colors.length - 1)) * 100}%`}
+                  stopColor={color}
+                />
+              ))}
+            </SvgGradient>
+          </Defs>
+
+          <Path d={wavePath} fill="url(#grad)" />
+        </Svg>
+      </Animated.View>
+
+      {/* Optional percentage label */}
+      {showLabel && (
+        <View
+          style={{
+            position: 'absolute',
+            width,
+            height,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Text style={{ color: '#fff', fontWeight: 'bold' }}>{Math.round(progress)}%</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+});
+
+export default WaveProgressBar;

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { default as SemiCircularProgressBar } from './SemiCircularProgressBar';
+export { default as WaveProgressBar } from './WaveProgressBar';