@wz-mobile/rn-gauge NPM

🍩 React Native Beautiful Gauge ✨

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

Preview

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
Use your own needle component

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
showGaugeCenter	boolean		Show gauge center

Use your own needle component

This sample shows you how to use a custom needle component, it's recommended to set showGaugeCenter to true to fine tune the parameters passed to getNeedleStyle function.

const SimpleNeedle: GaugeProps['renderNeedle'] = ({ getNeedleStyle }) => (
  <>
    <Animated.View style={[getNeedleStyle(80, 80, 14.5, 0, -7.6)]}>
      <AnimatedImage
        style={{ width: 80, height: 80 }}
        resizeMode="contain"
        source={SimpleNeedleImage}
      />
    </Animated.View>
  </>
);