8

GitHub - Winzana/rn-gauge: 🍩 Beautiful, customizable, performant Gauge progress...

 1 year ago
source link: https://github.com/Winzana/rn-gauge
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

doughnut React Native Beautiful Gauge sparkles

Performant, customizable, beautiful jauge component based on skia engine rocket

alt text

Preview

ios-gauge.gif
android-gauge.gif

Installation

yarn add @wz-mobile/rn-gauge

Get Started

import { Gauge } from '@wz-mobile/rn-gauge';

<Gauge
  emptyColor="#C1C1C1"
  colors={['cyan', 'magenta', 'yellow', 'red', 'white']}
  sweepAngle={250}
  strokeWidth={10}
  fillProgress={60}
  renderLabel={Label}
  size={200}
  thickness={60}
/>;

Features

  • Gradient Colors
  • Sweep Angle resizeable
  • Built on top of Skia
  • Written in TypeScript
  • Smooth Animated effect

Props

Name Type Default value Description
strokeWidth number The external stroke width of the gauge
thickness number 50 Gauge thickness
colors (required) string[] Colors filling the gauge progress
steps number[] Steps as string array to display steps on the gauge
emptyColor (required) string Color to display the empty part of the gauge
renderStep (props: { getX: GetAxisValue; getY: GetAxisValue; step: number; index: number; radius: number; rotationAngle: number; }) => Element Render step function
fillProgress (required) number The progress value of the gauge.
sweepAngle (required) number 250 Sweep angle of gauge, default is 250 ( how wide is the gauge )
renderNeedle (params: { getNeedleStyle: GetNeedleStyle; }) => ReactNode Render prop for needle component, default is null
renderLabel (required) () => ReactNode Method to render the label center of the gauge
size (required) number Size given to the component
canvasStyle StyleProp<ViewStyle> Custom Canvas style
shadowProps AnimatedProps<ShadowProps> Shadow props if wanted, could provide nice shadow effects
springConfig SpringConfig Spring config for fill progress animation

What is sweepAngle ?

alt text
  • RTL Support

Full Sample

You can check full sample in App.tsx located in the example folder for more details about implementation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK