Narcoleptic Pasta Manufacturer

    @shipt/segmented-arc-for-react-native

    1.0.1 • Public • Published

    Segmented Arc for React Native

    Segmented arc component for React Native. Check out our documentation below to learn how to get started.

    Example app demo

    example

    Table of Contents

    🚀 Installation

    There are two steps to get this package up and running.

    1. Install react-native-svg library by following their instructions.

    2. Install @shipt/segmented-arc-for-react-native:

    yarn add @shipt/segmented-arc-for-react-native

    or if you prefer to use npm:

    npm install --save @shipt/segmented-arc-for-react-native

    🎉 Usage

    Here is a basic example of how to use this component. It covers all the main features.

    import React, { useState } from 'react';
    import { View, Text, Pressable } from 'react-native';
    import { SegmentedArc } from '@shipt/segmented-arc-for-react-native';
    
    const App = () => {
      const [showArcRanges, setShowArcRanges] = useState(false);
    
      const segments = [
        {
          scale: 0.25,
          filledColor: '#FF746E',
          emptyColor: '#F2F3F5',
          data: { label: 'Red' }
        },
        {
          scale: 0.25,
          filledColor: '#F5E478',
          emptyColor: '#F2F3F5',
          data: { label: 'Yellow' }
        },
        {
          scale: 0.25,
          filledColor: '#78F5CA',
          emptyColor: '#F2F3F5',
          data: { label: 'Green' }
        },
        {
          scale: 0.25,
          filledColor: '#6E73FF',
          emptyColor: '#F2F3F5',
          data: { label: 'Blue' }
        }
      ];
    
      const ranges = ['10', '20', '30', '40', '50'];
    
      const _handlePress = () => {
        setShowArcRanges(!showArcRanges);
      };
    
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <SegmentedArc
            segments={segments}
            fillValue={70}
            isAnimated={true}
            animationDelay={1000}
            showArcRanges={showArcRanges}
            ranges={ranges}
          >
            {metaData => (
              <Pressable onPress={_handlePress} style={{ alignItems: 'center' }}>
                <Text style={{ fontSize: 16, paddingTop: 16 }}>{metaData.lastFilledSegment.data.label}</Text>
                <Text style={{ lineHeight: 80, fontSize: 24 }}>More info</Text>
              </Pressable>
            )}
          </SegmentedArc>
        </View>
      );
    };
    
    export default App;

    Try this example yourself here.

    📖 Props

    Name Type Default Description
    fillValue number (0-100) 0 Current progress value
    segments Array of { scale: number, filledColor: string, emptyColor: string, data: object } [] Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, and emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment. See example above.
    filledArcWidth number 8 Thickness of progress line
    emptyArcWidth number 8 Thickness of background line
    spaceBetweenSegments number 2 Space between segments
    arcDegree number 180 Degree of arc
    radius number 100 Arc radius
    isAnimated bool true Enable/disable progress animation
    animationDuration number 1000 Progress animation duration
    animationDelay number 0 Progress animation delay
    ranges Array of strings [] Arc ranges (segments) display values
    rangesTextColor string '#000000' Color of ranges text
    rangesTextStyle object { fontSize: 12 } Ranges text styling
    showArcRanges bool false Show/hide arc ranges
    middleContentContainerStyle object {} Extra styling for the middle content container
    capInnerColor string '#28E037' Cap's inner color
    capOuterColor string '#FFFFFF' Cap's outer color
    children function Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above.

    📋 Attributions

    Read the Attributions here.

    👏 Contributing

    Please read our CONTRIBUTING.md for details on our community guidelines and the process for submitting pull requests to us.

    🧑‍💻 Maintainers

    To find out who our Maintainers are, check out MAINTAINERS.md.

    🚅 Versioning

    We use SemVer for versioning. For the versions available, see the tags on this repository.

    To update versions, run the yarn version and follow the prompts.

    📄 License

    This project is licensed under the MIT License - see the LICENSE.md file for details.

    📜 Notice

    Check out NOTICE.md.

    🔒 Security

    Check out SECURITY.md.

    Install

    npm i @shipt/segmented-arc-for-react-native

    DownloadsWeekly Downloads

    261

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    42.2 kB

    Total Files

    23

    Last publish

    Collaborators

    • gabrielle.benefield
    • dtgreene
    • richardgrehan
    • marcedev
    • owen.roberts
    • mpshipt
    • jholland
    • daniellevert
    • brianmrc
    • aaron.mcmahan
    • hunter.wesson
    • sari-shipt
    • fromeror
    • samin25
    • rkyle35242
    • thomas.mahle
    • charlespark4395
    • regancloper
    • gregorysantini
    • abo-sh
    • fathimamusthafa
    • fatemab
    • jdmadison
    • magacula
    • dennis.hutchinson
    • dennisliu
    • shyam-shipt
    • gabriel-shipt
    • hwu-shipt
    • jonathan.che
    • cam-shipt
    • jkhusanov
    • jamessayer
    • orlando.felix
    • johnrowe
    • ians-shipt
    • jisdell
    • austin.metzkes
    • ishaanpota
    • srease
    • bdaniel710
    • cdfunderburk
    • duncsully
    • kartikk
    • jflayhart
    • shipt-npm-ci-user
    • alan.kenyon
    • jessicalynnkim
    • zachbullock
    • vnguyenshipt
    • mobile-devs
    • dgshipt
    • jchang2014
    • daw13
    • hjboylan
    • parkerroan
    • kattikartikreddy7
    • smwest87
    • shipt-ci
    • cfilby
    • gmpowell
    • shipt-randall
    • anerishah3110
    • sammahr
    • jhuggart-shipt
    • benniven
    • hazalozcan
    • jurchfield
    • elenasparacio
    • jaredbenskins
    • marquessv
    • rosswaycaster
    • tcore
    • joshuakg
    • dericcain
    • joshualondon
    • cstipes
    • kartik-shipt
    • jscodeshipt
    • coreybrandon
    • andrewpetrovics
    • derrick-lewis
    • robby.white
    • dlennardshipt
    • mgalindob
    • monicaparrillo
    • danigalvez
    • jonealshipt
    • chaceburnette
    • adere1
    • kobbya
    • wshirey_shipt
    • hankandre-shipt
    • eric.dowell.shipt