0.1.1 • Published 1 year ago
rn-skia-progress v0.1.1
React Native Skia Progress
React Native library which allows use of high quality progress components based on Skia, Reanimated, Gesture Handler
Examples
Installation
npm:
npm install rn-skia-progressYarn:
yarn add rn-skia-progressDependencies Installation
Propoerties with default values and types
Progress Bar
| Name | Default | Type |
|---|---|---|
| animationDuration | 500 | number |
| backgroundColor | "#333333" | AnimatedProp |
| fontName | undefined | DataSourceParam |
| fontSize | 24 | number |
| initialProgress | undefined | number |
| isTouchable | false | boolean |
| maxProgress | 100 | number |
| onAnimationEnd | undefined | () => void |
| onProgressChange | undefined | (newProgress:string) => void |
| progress | 0 | number |
| progressColor | "#fe2e2e" | AnimatedProp<Color[]> |
| progressStrokeWidth | 16 | number |
| strokeCap | "butt" | AnimatedProp<"butt" or "round"> |
| strokeWidth | 16 | number |
| style | undefined | ViewStyle |
| textColor | "black | AnimatedProp |
| valuePrefix | "" | string |
| valueSufix | "%" | string |
| width | 200 | number |
| withText | true | boolean |
Progress Circle
| Name | Default | Type |
|---|---|---|
| animationDuration | 500 | number |
| backgroundColor | "#333333" | AnimatedProp |
| backgroundDashEffect | 20,2 | AnimatedProp<number[]> |
| fontName | undefined | DataSourceParam |
| fontSize | 32 | number |
| initialProgress | 0 | number |
| isDashed | false | boolean |
| maxProgress | 100 | number |
| onAnimationEnd | undefined | () => void |
| progress | 0 | number |
| progressColor | "fe2e2e" | AnimatedProp<Color[]> |
| progressDashEffect | 20,2 | AnimatedProp<number[]> |
| progressStrokeCap | "butt" | AnimatedProp<"butt" or "round"> |
| progressStrokeWidth | 16 | number |
| r | 70 | number |
| strokeWidth | 16 | number |
| style | undefined | ViewStyle |
| textColor | "black" | AnimatedProp |
| valuePrefix | "" | string |
| valueSufix | "%" | string |
| withText | true | boolean |
Usage
import { Progress } from "rn-skia-progress";
<Progress.ProgressBar progress={50} maxProgress={100} />;
<Progress.ProgressCircle progress={50} maxProgress={100} />;License
MIT
Made with create-react-native-library