{"_id":"@ashaik92/rn-donut-chart","name":"@ashaik92/rn-donut-chart","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@ashaik92/rn-donut-chart","version":"1.1.0","description":"An animated donut/pie chart library for React Native and Expo","main":"dist/cjs/index.js","module":"dist/mjs/index.js","author":{"name":"Arshad Shaik","email":"ashaik92@example.com"},"license":"MIT","homepage":"https://github.com/ashaik92/rn-donut-chart#readme","repository":{"type":"git","url":"git+https://github.com/ashaik92/rn-donut-chart.git"},"keywords":["react-native","react","animation","donut-chart","pie-chart","expo","typescript","svg","charts"],"engines":{"node":">=18.0.0","npm":">=8.0.0"},"scripts":{"build":"npx ts-packager -e src","start":"tsx devtools/dev-server/CLI.ts","lint":"tsx ci/commands/Lint.ts","test":"tsx ci/commands/Test.ts"},"peerDependencies":{"react":">=18.2.0","react-native":">=0.73.0","react-native-svg":"^15.1.0","expo":">=50.0.0"},"peerDependenciesMeta":{"expo":{"optional":true}},"devDependencies":{"@figliolia/child-process":"^1.0.3","@figliolia/ts-packager":"^1.0.9","@types/node":"^20.10.0","@types/react":">=18.3.0","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.29.1","eslint-plugin-json-format":"^2.0.1","eslint-plugin-prettier":"^5.2.1","eslint-plugin-react":"^7.35.0","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-simple-import-sort":"^12.1.1","jest":"^29.7.0","prettier":"^3.3.3","react-native-svg":"^15.8.0","ts-node":"^10.9.2","tsx":"^4.19.2","typescript":"^5.6.3"},"publishConfig":{"access":"public"},"exports":{".":{"import":"./dist/mjs/index.js","require":"./dist/cjs/index.js","types":"./dist/types/index.d.ts"}},"types":"dist/types/index.d.ts","_id":"@ashaik92/rn-donut-chart@1.1.0","bugs":{"url":"https://github.com/ashaik92/rn-donut-chart/issues"},"_integrity":"sha512-MeYZqms5w5lbtZOi9a4omlFXz3VOD9oNqliX50rpz/RLDyKRdbBhA/VoqeVRVXUey3qGkh6OPHySd3dYlMzzjA==","_resolved":"/Users/arshadshaik/Documents/SOURCE/github-personal/rn-donut-chart/ashaik92-rn-donut-chart-1.1.0.tgz","_from":"file:ashaik92-rn-donut-chart-1.1.0.tgz","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-MeYZqms5w5lbtZOi9a4omlFXz3VOD9oNqliX50rpz/RLDyKRdbBhA/VoqeVRVXUey3qGkh6OPHySd3dYlMzzjA==","shasum":"a7922d4d4b4b0df0cc231c43ae09e3791ab86c4d","tarball":"https://registry.npmjs.org/@ashaik92/rn-donut-chart/-/rn-donut-chart-1.1.0.tgz","fileCount":53,"unpackedSize":3708404,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDZ5J3HsO645dCuvMXmAXEHlgvU2KtE8UEmEOxPRppRNgIgD0CGWaAWxcCoFr02z2oumJjbHZjSA1rU0V2LFV++eA4="}]},"_npmUser":{"name":"ashaik92","email":"arshadshaik992@gmail.com"},"directories":{},"maintainers":[{"name":"ashaik92","email":"arshadshaik992@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-donut-chart_1.1.0_1758090588729_0.23447137087931003"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-17T06:29:48.629Z","1.1.0":"2025-09-17T06:29:48.968Z","modified":"2025-09-17T06:29:49.211Z"},"maintainers":[{"name":"ashaik92","email":"arshadshaik992@gmail.com"}],"description":"An animated donut/pie chart library for React Native and Expo","homepage":"https://github.com/ashaik92/rn-donut-chart#readme","keywords":["react-native","react","animation","donut-chart","pie-chart","expo","typescript","svg","charts"],"repository":{"type":"git","url":"git+https://github.com/ashaik92/rn-donut-chart.git"},"author":{"name":"Arshad Shaik","email":"ashaik92@example.com"},"bugs":{"url":"https://github.com/ashaik92/rn-donut-chart/issues"},"license":"MIT","readme":"# React Native Donut Chart\n\nA React Native library for creating beautiful, responsive donut charts that animate when data changes. \n\n✨ **Fully compatible with Expo and the latest React Native versions!**\n\n![Screenshot](media/donut.gif)\n\n## Features\n\n- 🎯 **Expo Compatible** - Works seamlessly with Expo SDK 50+\n- ⚡ **Smooth Animations** - Beautiful animated transitions when data changes\n- 🎨 **Customizable** - Full control over colors, gaps, stroke width, and more\n- 📱 **Responsive** - Automatically adapts to container size\n- 💪 **TypeScript** - Built with TypeScript for excellent developer experience\n- 🔧 **Modern** - Uses latest React Native and React versions\n\n## Installation\n\n### For Expo Projects\n\n```bash\nnpm install @ashaik92/rn-donut-chart react-native-svg\n# or\nyarn add @ashaik92/rn-donut-chart react-native-svg\n```\n\n### For React Native CLI Projects\n\n```bash\nnpm install @ashaik92/rn-donut-chart react-native-svg\n# or\nyarn add @ashaik92/rn-donut-chart react-native-svg\n\n# Link native dependencies\ncd ios && pod install\n```\n\n## Compatibility\n\n- **React Native**: 0.73.0+\n- **Expo SDK**: 50.0.0+\n- **React**: 18.2.0+\n- **TypeScript**: 5.0+\n\n## Usage \n\n```tsx\nimport { DonutChart } from '@ashaik92/rn-donut-chart';\nimport { Easing } from 'react-native';\n\n<DonutChart\n  delay={0}\n  duration={1500}\n  strokeWidth={12}\n  strokeLinecap=\"round\"\n  gap={5} // Custom gap between sections\n  style={styles.chartContainer}\n  data={[{ \n    label: \"rent\", \n    value: 2000, \n    stroke: \"rgb(228, 69, 69)\", \n    style: styles.sectionStyle\n  }, {\n    label: \"food\",\n    value: 800,\n    stroke: [\"#FF6B6B\", \"#4ECDC4\"], // Gradient support\n  }]}\n  easing={Easing.out(Easing.exp)}\n  onMeasure={(dimensions: number) => {\n    console.log('Chart dimensions:', dimensions);\n  }}>\n  <Text>Center Content</Text>\n</DonutChart>\n```\n\n## API Reference\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `ChartDatum[]` | **Required** | Array of data objects for chart sections |\n| `delay` | `number` | `0` | Millisecond delay before animation starts |\n| `duration` | `number` | `1500` | Animation duration in milliseconds |\n| `strokeWidth` | `number` | `25` | Width of the donut arcs |\n| `strokeLinecap` | `'round' \\| 'square' \\| 'butt'` | `'round'` | Line cap style for arcs |\n| `gap` | `number` | `strokeWidth * 2` | Gap between chart sections (new feature!) |\n| `easing` | `EasingFunction` | `Easing.inOut(Easing.exp)` | Animation easing function |\n| `style` | `StyleProp<ViewStyle>` | `undefined` | Styles for the container view |\n| `onMeasure` | `(dimensions: number) => void` | `undefined` | Callback with resolved chart dimensions |\n| `children` | `ReactNode` | `undefined` | Content to render in the center of the donut |\n\n### Data Format\n\n```tsx\ninterface ChartDatum {\n  label: string;          // Unique identifier for the section\n  value: number;          // Numeric value for the section\n  stroke?: string | string[]; // Color or gradient colors\n  style?: StyleProp<ViewStyle>; // Custom styles for the section\n}\n```\n\n## What's New in v1.1.0\n\n- ✅ **Expo SDK 52 Compatibility** - Full support for latest Expo\n- ✅ **Custom Gap Parameter** - Control spacing between chart sections\n- ✅ **React 19 Support** - Compatible with latest React versions\n- ✅ **Modern TypeScript** - Updated to TypeScript 5.6\n- ✅ **Improved Types** - Better type safety and IntelliSense\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Contributing\n\nContributions are welcome! This is a community-maintained fork focused on Expo compatibility and modern React Native support.\n","readmeFilename":"README.md","_rev":"1-3f0ee9e68deca8e1dd4af29e0b023383"}