Circular Gauge

3 types Circular Slider Component for React Native.

Support type

• Amount: amount of the total amount
• Percent: percentages of total amount
• Duration: start and end in total amount

Installation

npm install --save @zaradev/react-native-circular-slider

or

yarn add @zaradev/react-native-circular-slider

Peer Dependencies

• react-natie-reanimated(v2)
• react-native-gesture-handler

Example

Anatomy

The name refers to Material UI.

Usage

const [size, setSize] = useState(200);
const [amount, setAmount] = useState(25);
const [percents, setPercents] = useState([40, 30, 20, 10]);
const [duration, setDuration] = useState({
  start: 10,
  end: 50,
});
const [clockwise, setClockwise] = useState(true);

return (
  <>
    <AmountSlider
      size={size}
      amount={amount}
      onChange={setAmount}
      clockwise={clockwise}
    />
    <PercentSlider
      percents={percents}
      size={size}
      onChange={setPercents}
      clockwise={clockwise}
    />
    <DurationSlider
      size={size}
      duration={duration}
      onChange={setDuration}
      clockwise={clockwise}
    />
  </>
);

Properties

Amount

Name	Description	Type	Required	Default
amount		number	✅
thumbColor	color of thumb	string	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	ReactNode	❌
filledColor	color of filled gauge	string	❌	#FFE5B4
onChange	called when the amount value is changed	function(amount: number)	❌

Percent

Name	Description	Type	Required	Default
percents		number[]	✅
thumbColor	color of thumb	string[]	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	ReactNode[]	❌
filledColor	color of filled gauge	string[]	❌	#FFE5B4
onChange	Called when the percents value is changed	function(percents: number[])	❌

Duration

Name	Description	Type	Required	Default
duration		{start: number; end: number;}	✅
thumbColor	color of thumb	string	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	{start: ReactNode, end: ReactNode}	❌
filledColor	color of filled gauge	string	❌	#FFE5B4
onChange	Called when the duration value is changed	function(duration: {start: number; end: number;})	❌

Common

Name	Description	Type	Required	Default
size	size of slider	number	✅
clockwise	rotation direction	boolean	❌	true

Track Options

Name	Description	Type	Required	Default
width	width of track	number	❌	10% of size
color	color of track	string	❌	#7F8487

Tick Mark Options

Name	Description	Type	Required	Default	Amount	Percent	Duration
show	If you need to render Tick Mark	Boolean	❌	false	✅	✅	✅
total	maximum value of slider	Number	❌	100	✅	❌	✅
unit	Tick Mark division unit	Number	❌	5	✅	❌	✅
color	color of Tick Mark	String	❌	#7F8487	✅	✅	✅
length	legnth of Tick Mark	Number	❌	10	✅	✅	✅
thickness	thickness of Tick Mark	Boolean	❌	2	✅	✅	✅
showText	If you need to render Tick Mark units	String	❌	show option value	✅	✅	✅
textSize	size of text	Number	❌	10	✅	✅	✅
textColor	color of text	Number	❌	#191919	✅	✅	✅

Reference

YouTuber William Candillon's "can-it-be-done-in-react-native" lecture was very helpful.

• youtube: Apple Bedtime - “Can it be done in React Native?”
• github: can-it-be-done-in-react-native(Bedtime)

License

MIT