react-native-segmented-progress-bar

React Native component for having segmented or multipart progress bar

Installation

yarn add react-native-segmented-progress-bar

Usage sample

This code

<SegmentedProgressBar
  showSeparatorValue
  borderRadius={3}
  values={[0, 18.5, 23.0, 27.5, 40]}
  colors={['grey', 'green', 'orange', 'red']}
  labels={['underweight','normal','overweight','obese']}
  position={21}
/>

will generate this

Properties

| Prop | Type | Description | Default | Required | | -------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | --------- | -------- | | labels | array of strings | Labels that will appear below the chart. If not defined, the label will not appear | undefined | Optional | | values | array of numbers | Cumulative numbers that define how large each segment should be | undefined | Required | | colors | array of strings (color in any format (like white or #ffffff or rgb(255,255,255))) | Number of elements in this array should be less than 1 element from value array | undefined | Required | | height | number | Height of the progress bar only not including the label | 8 | Optional | | borderRadius | number | Border Radius of the bar | undefined | Optional | | showSeparatorValue | boolean | If true, label on the top that display values of borders between each segments will be displayed | false | Optional |