react-native-progress-bar-horizontal

react-native-progress-bar-horizontal

Simple, JavaScript only, horizontal progress bar.

Installation

npm install react-native-progress-bar-horizontal

Usage

import ProgressBar from 'react-native-progress-bar-horizontal';

// Provide progress value
<ProgressBar progress={0.5} />

// Change default look
<ProgressBar
  progress={0.3}
  borderWidth={1}
  fillColor="#4C2C2E"
  unfilledColor="#AF9995"
  height={10}
  borderColor="#4C2C2E"
  duration={100}
/>

Props

Prop	Type	Description	Default
progress	number	Value of progress. It should be a number between 0 and 1.	0
animated	boolean	Should progress change be animated of not.	true
fillColor	string	Fill color of the progress indicator.	#000000
unfilledColor	string	Color of the remaining progress.	''
borderWidth	number	Width of outer border. Set to 0 to remove border.	1
borderColor	string	Color of outer border.	#000000
borderRadius	number	Border radius of outer border.	4
width	number | null	Width of progress container. Set to null to use available space.	null
height	number	Height of the progress bar.	4
duration	number	Duration of progress animation in ms. Works only if animated prop is set to true.	500

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Changelog

1.0.1 (2022-03-06)

Bug Fixes

• props formatting issue in README.md (e97fc1a)

chore

• adjust config for @release-it/conventional-changelog (83111fb)

Features

• created HorizontalProgressBar component (ae24cf1)

BREAKING CHANGES

• First release