0.1.1 • Published 1 year ago

rn-skia-progress v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

NameDefaultType
animationDuration500number
backgroundColor"#333333"AnimatedProp
fontNameundefinedDataSourceParam
fontSize24number
initialProgressundefinednumber
isTouchablefalseboolean
maxProgress100number
onAnimationEndundefined() => void
onProgressChangeundefined(newProgress:string) => void
progress0number
progressColor"#fe2e2e"AnimatedProp<Color[]>
progressStrokeWidth16number
strokeCap"butt"AnimatedProp<"butt" or "round">
strokeWidth16number
styleundefinedViewStyle
textColor"blackAnimatedProp
valuePrefix""string
valueSufix"%"string
width200number
withTexttrueboolean

Progress Circle

NameDefaultType
animationDuration500number
backgroundColor"#333333"AnimatedProp
backgroundDashEffect20,2AnimatedProp<number[]>
fontNameundefinedDataSourceParam
fontSize32number
initialProgress0number
isDashedfalseboolean
maxProgress100number
onAnimationEndundefined() => void
progress0number
progressColor"fe2e2e"AnimatedProp<Color[]>
progressDashEffect20,2AnimatedProp<number[]>
progressStrokeCap"butt"AnimatedProp<"butt" or "round">
progressStrokeWidth16number
r70number
strokeWidth16number
styleundefinedViewStyle
textColor"black"AnimatedProp
valuePrefix""string
valueSufix"%"string
withTexttrueboolean

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