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

1npm install --save react-native-circular-slider-with-updates

or

1yarn add react-native-circular-slider-with-updates

Peer Dependencies

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

Example

Anatomy

The name refers to Material UI.

Usage

1const [size, setSize] = useState(200);
2const [amount, setAmount] = useState(25);
3const [percents, setPercents] = useState([40, 30, 20, 10]);
4const [duration, setDuration] = useState({
5  start: 10,
6  end: 50,
7});
8const [clockwise, setClockwise] = useState(true);
9
10return (
11  <>
12    <AmountSlider
13      size={size}
14      amount={amount}
15      onChange={setAmount}
16      clockwise={clockwise}
17    />
18    <PercentSlider
19      percents={percents}
20      size={size}
21      onChange={setPercents}
22      clockwise={clockwise}
23    />
24    <DurationSlider
25      size={size}
26      duration={duration}
27      onChange={setDuration}
28      clockwise={clockwise}
29    />
30  </>
31);

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