boxmodel-native-piechart v1.0.3

Pie chart for react native.

❒ Example

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PieChart from 'boxmodel-native-piechart';

export default function App() {

    const maxDays = 30
    const daysLeft = 8

    const [percentage, setPercentage] = useState((daysLeft / maxDays) * 100)

    useEffect(() => {
        setPercentage((daysLeft / maxDays) * 100)
    }, [maxDays, daysLeft])

    const InnerComponent: React.FC<any> = () => (
        <>
            <Text style={styles.header}>{daysLeft} Days</Text>
            <Text style={styles.text}>Left to take</Text>
        </>
    )

    return (
        <View style={styles.container}>
            <PieChart
                percentage={percentage}
                size={240}
                strokeWidth={32}
                InnerComponent={InnerComponent}
                animate
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        fontWeight: 'bold',
        fontSize: 20,
        marginBottom: 8,
        color: '#000000'
    },
    text: {
        color: '#707070'
    }
});

❒ Properties