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-progress

Yarn:

yarn add rn-skia-progress

Dependencies Installation

1. Gesture Handler
2. React Native Reanimated
3. React Native Skia

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