@roseline124/react-native-progress-bar

react-native-progress-bar

Lightweight react-native progress bar using react-native-svg.

Demo

Prerequisites

⭐️ Peer Dependencies

• react-native-svg

Installation

$ npm install @roseline124/react-native-progress-bar
$ yarn add @roseline124/react-native-progress-bar

Example

you can refer example code in this repository.

import { ProgressBar } from 'react-native-progress-bar'

<ProgressBar
    progress={0.3}
    width="100%"
    height={20}
    borderWidth={0}
    color={color}
    unfilledColor="#eee"
    indeterminate={true}
    textProps={{
        text: `30%`,
        fontSize: 13,
        fontWeight: 'bold',
        color: 'yellow',
        textAlign: 'middle',
    }}
/>

Props

Prop	Description	Default
animated	Whether or not to animate changes to progress.	true
borderColor	Color of outer border.	color
borderRadius	Radius of progress bar.	height/2
borderWidth	Width of outer border, set to 0 to remove.	0
color	Fill color of the indicator.	rgba(0, 122, 255, 1)
lineCap	The end of the indicator. (square or round)	round
width	Width of the bar. (number or percentage)	100%
height	Height of the bar.	6
loop	If set to true, the indicator will spin and progress prop will be ignored.	false
loopAnimationDuration	Sets animation duration in milliseconds when loop is set.	1000
progress	Progress of whatever the indicator is indicating. A number between 0 and 1.	0
unfilledColor	Color of the remaining progress.	rgba(0,0,0,0)
onLayout	Handle the event when component is mounted	None
containerStyle	Style of the View wrapping ProgressBar	None
animationType	Animation Type ('decay' or 'timing' or 'spring')	None
animationConfig	Animation Config	None
textProps	Refer the ProgressBarTextProps interface.	None

Test in local

1. pnpm build
2. pnpm pack
3. pnpm install {relative_path}/react-native-progress-bar-1.x.x.tgz
4. test the library

I can't found the way to link the local library to example project. The pnpm link is not working. If you know the best way to deal with this issue, please let me know!

I'm fine thank you and you.(this is korean joke.)