Description:
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:
