Segmented Round Display For React Native

A creative segmented round (arc) display UI component for React Native. Powered by React Native SVG Library.

Features:

• One segment
• Multiple segments
• Fill animation
• Control of fill animation duration
• Animated tag with value
• Custom value formater
• Configurable colors
• Configurable ARC radius and total size in degrees
• Configurable space between arc segments

Install & Import:

# Yarn
$ yarn add react-native-segmented-round-display

# NPM
$ npm i react-native-segmented-round-display --save

import React from 'react';
import {SafeAreaView, ScrollView, StatusBar} from 'react-native';
import SegmentedRoundDisplay from 'react-native-segmented-round-display';

Basic usage:

const App = () => {
  const examples = [
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 40,
        },
      ],
    },
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 80,
        },
        {
          total: 30,
          filled: 15,
        },
      ],
    },
    {
      displayValue: true,
      formatValue: (value) => `R$ ${value.toFixed(2)}`,
      segments: [
        {
          total: 80,
          filled: 80,
        },
        {
          total: 30,
          filled: 30,
        },
        {
          total: 100,
          filled: 40,
        },
      ],
    }
  ];
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          {examples.map((example, i) => (
            <SegmentedRoundDisplay key={i} {...example} />
          ))}
        </ScrollView>
      </SafeAreaView>
    </>
  );
};
export default App;

All default props.

segments: [],
filledArcWidth: 7,
emptyArcWidth: 7,
arcSpacing: 7,
totalArcSize: 280,
radius: 100,
emptyArcColor: "#ADB1CC",
filledArcColor: "#5ECCAA",
animationDuration: 1000,
animated: true,
incompleteArcColor: "#23318C",
displayValue: false,
valueBoxColor: "#23318C",
valueFontColor: "#FFFFFF"

Preview:

Download Details:

Author: ricardovcorrea

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ricardovcorrea/react-native-segmented-round-display

License: MIT