1.0.1 • Published 2 years ago

@aguycalled/react-native-segmented-round-display v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

react-native-segmented-round-display

Version NPM STARS

react-native-segmented-round-display provides a simple ARC component, drawn with react-native-svg, it can have one or more segments and its easy configurable.

Example

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
  • [React Web version](https://github.com/ricardovcorrea/react-segmented-round-display "React Web version")

Installation

first

This package uses react-native-svg to draw SVG`s, so please install it following this installation manual.

then

yarn add react-native-segmented-round-display

or

npm install react-native-segmented-round-display --save

Usage

Here's a simple example. To render output like this:

Usage example ios Usage example android

import React from 'react';
import {SafeAreaView, ScrollView, StatusBar} from 'react-native';

import SegmentedRoundDisplay from 'react-native-segmented-round-display';

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;

Common props

NameTypeDefaultDescription
segmentsArray of { total: int, filled: int }[]segments to be rendered
filledArcWidthint7thickness of filled arc
emptyArcWidthint7thickness of empty arc
arcSpacingint7space between segments
totalArcSizeint280total arc size in degrees
radiusint150radius of the arc
emptyArcColorstring#ADB1CCcolor of empty arc
filledArcColorstring#5ECCAAcolor of filled arc
incompleteArcColorstring#23318Ccolor of incomplete arc
animatedbooltrueenable/disable segments fill animation
animationDurationint1000duration of fill animation in MS
displayValueboolfalseenable/disable the value display
formatValuefunction{}function to formar the value
valueBoxColorstring#23318Ccolor of box that holds the value if displayValue = true
valueFontColorstring#FFFFFFcolor of text of value if displayValue = true
stylesStyles object{}styles to be applied to container

Run example

git clone https://github.com/ricardovcorrea/react-native-segmented-round-display.git
cd react-native-segmented-round-display/example
yarn

cd ios && pod install
cd .. 

yarn start
react-native run-ios

Contributors

Ricardo Vaz Corrêa