React Native Donut Chart

A React Native library for creating beautiful, responsive donut charts that animate when data changes.

✨ Fully compatible with Expo and the latest React Native versions!

Features

• 🎯 Expo Compatible - Works seamlessly with Expo SDK 50+
• ⚡ Smooth Animations - Beautiful animated transitions when data changes
• 🎨 Customizable - Full control over colors, gaps, stroke width, and more
• 📱 Responsive - Automatically adapts to container size
• 💪 TypeScript - Built with TypeScript for excellent developer experience
• 🔧 Modern - Uses latest React Native and React versions

Installation

For Expo Projects

npm install @ashaik92/rn-donut-chart react-native-svg
# or
yarn add @ashaik92/rn-donut-chart react-native-svg

For React Native CLI Projects

npm install @ashaik92/rn-donut-chart react-native-svg
# or
yarn add @ashaik92/rn-donut-chart react-native-svg

# Link native dependencies
cd ios && pod install

Compatibility

• React Native: 0.73.0+
• Expo SDK: 50.0.0+
• React: 18.2.0+
• TypeScript: 5.0+

Usage

import { DonutChart } from '@ashaik92/rn-donut-chart';
import { Easing } from 'react-native';

<DonutChart
  delay={0}
  duration={1500}
  strokeWidth={12}
  strokeLinecap="round"
  gap={5} // Custom gap between sections
  style={styles.chartContainer}
  data={[{ 
    label: "rent", 
    value: 2000, 
    stroke: "rgb(228, 69, 69)", 
    style: styles.sectionStyle
  }, {
    label: "food",
    value: 800,
    stroke: ["#FF6B6B", "#4ECDC4"], // Gradient support
  }]}
  easing={Easing.out(Easing.exp)}
  onMeasure={(dimensions: number) => {
    console.log('Chart dimensions:', dimensions);
  }}>
  <Text>Center Content</Text>
</DonutChart>

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | ChartDatum[] | Required | Array of data objects for chart sections | | delay | number | 0 | Millisecond delay before animation starts | | duration | number | 1500 | Animation duration in milliseconds | | strokeWidth | number | 25 | Width of the donut arcs | | strokeLinecap | 'round' \| 'square' \| 'butt' | 'round' | Line cap style for arcs | | gap | number | strokeWidth * 2 | Gap between chart sections (new feature!) | | easing | EasingFunction | Easing.inOut(Easing.exp) | Animation easing function | | style | StyleProp<ViewStyle> | undefined | Styles for the container view | | onMeasure | (dimensions: number) => void | undefined | Callback with resolved chart dimensions | | children | ReactNode | undefined | Content to render in the center of the donut |

Data Format

interface ChartDatum {
  label: string;          // Unique identifier for the section
  value: number;          // Numeric value for the section
  stroke?: string | string[]; // Color or gradient colors
  style?: StyleProp<ViewStyle>; // Custom styles for the section
}

What's New in v1.1.0

• ✅ Expo SDK 52 Compatibility - Full support for latest Expo
• ✅ Custom Gap Parameter - Control spacing between chart sections
• ✅ React 19 Support - Compatible with latest React versions
• ✅ Modern TypeScript - Updated to TypeScript 5.6
• ✅ Improved Types - Better type safety and IntelliSense

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! This is a community-maintained fork focused on Expo compatibility and modern React Native support.