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