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