Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/roseline124/react-native-progress-bar
lightweight react-native progress bar
https://github.com/roseline124/react-native-progress-bar
Last synced: 13 days ago
JSON representation
lightweight react-native progress bar
- Host: GitHub
- URL: https://github.com/roseline124/react-native-progress-bar
- Owner: roseline124
- License: mit
- Created: 2024-02-14T10:40:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-08T17:03:15.000Z (8 months ago)
- Last Synced: 2024-08-09T21:50:05.310Z (3 months ago)
- Language: TypeScript
- Size: 408 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-progress-bar
Lightweight react-native progress bar using `react-native-svg`.
## Demo
## Prerequisites
⭐️ Peer Dependencies
- [react-native-svg](https://www.npmjs.com/package/react-native-svg#installation)
## Installation
```
$ npm install @roseline124/react-native-progress-bar
$ yarn add @roseline124/react-native-progress-bar
```
## Example
you can refer example code in this repository.
```typescript
import { ProgressBar } from 'react-native-progress-bar'
```
## 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.)