react-native-pizza-chart v1.0.5

React Native Pizza Chart

A customizable and animated pizza chart component for React Native applications.

Features

• 🍕 Beautiful animated pizza chart with customizable slices
• 📊 Animated legend with scrollable items
• 🎨 Customizable colors, gradients, and animations
• 🌓 Dark mode support
• 📱 Responsive design that adapts to different screen sizes
• ⚙️ Highly configurable with many customization options

Installation

npm install react-native-pizza-chart
# or
yarn add react-native-pizza-chart

Dependencies

This package requires react-native-svg as a peer dependency:

npm install react-native-svg
# or
yarn add react-native-svg

Usage

import React from 'react';
import {View, SafeAreaView} from 'react-native';
import {StorageChart, defaultStorageData} from 'react-native-pizza-chart';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <StorageChart
          data={defaultStorageData}
          totalStorage={100}
          animationDuration={1500}
          animationSpeed={1.5}
          showEmptySpace={true}
          showPizza={true}
          showLegend={true}
          title="Storage Chart"
          emptySpaceTitle="Free Space"
        />
      </View>
    </SafeAreaView>
  );
};

export default App;

Props

Data Format

Each item in the data array should follow this format:

type StorageItem = {
  name: string; // Name of the item
  size: number; // Size of the item
  color: string; // Main color (hex or rgba)
  gradientStart: string; // Gradient start color
  gradientEnd: string; // Gradient end color
  innerColor: string; // Color for the inner part of the slice
};

Customization

You can customize the appearance of the chart by modifying the data items or by using the provided props.

Example with Custom Data

const customData = [
  {
    name: 'Photos',
    size: 32.5,
    color: '#FF6B6B',
    gradientStart: '#FF8E8E',
    gradientEnd: '#FF5252',
    innerColor: 'rgba(255, 107, 107, 0.2)',
  },
  {
    name: 'Videos',
    size: 45.2,
    color: '#4ECDC4',
    gradientStart: '#6BE3DA',
    gradientEnd: '#41B3AC',
    innerColor: 'rgba(78, 205, 196, 0.2)',
  },
  // Add more items as needed
];

// Then use it in your component
<StorageChart data={customData} totalStorage={128} />;

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.