Description:
This is a React Native component to create animated and beautiful radial sliders and speedometers using SVG.
How to use it:
1. Install and import the component.
# Yarn $ yarn add react-native-radial-slider react-native-svg # NPM $ npm install react-native-radial-slider react-native-svg
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { RadialSlider } from 'react-native-radial-slider';2. Create radial sliders or speedometers in your app:
// Default
const RadialVariant = () => {
const [speed, setSpeed] = useState(0);
return (
<View style={styles.container}>
<RadialSlider value={speed} min={0} max={200} onChange={setSpeed} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
export default RadialVariant;// Radial Circle Silder
const RadialVariant = () => {
const [speed, setSpeed] = useState(0);
return (
<View style={styles.container}>
<RadialSlider
variant={'radial-circle-slider'}
value={speed}
min={0}
max={200}
onChange={setSpeed}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
export default RadialVariant;// Speedometer
const SpeedoMeterVariant = () => {
const [speed, setSpeed] = useState(0);
return (
<View style={styles.container}>
<RadialSlider
variant={'speedometer'}
value={speed}
min={0}
max={200}
onChange={setSpeed}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
export default SpeedoMeterVariant;3. Available props to customize the radial sliders.
radius: 100,
min: 0,
max: 100,
step: 1,
value: 0,
title: '',
subTitle: 'Goal',
unit: 'kCal',
thumbRadius: 18,
thumbColor: Colors.blue,
thumbBorderWidth: 5,
thumbBorderColor: Colors.white,
markerLineSize: 50,
sliderWidth: 18,
sliderTrackColor: Colors.grey,
lineColor: Colors.grey,
lineSpace: 3,
linearGradient: [
{ offset: '0%', color: Colors.skyBlue },
{ offset: '100%', color: Colors.darkBlue },
],
onChange: (_v: number) => {},
onComplete: (_v: number) => {},
openingRadian: Math.PI / 3,
disabled: false,
isHideSlider: false,
isHideTitle: false,
isHideSubtitle: false,
isHideValue: false,
isHideTailText: false,
isHideButtons: false,
isHideLines: false,
isHideMarkerLine: false,
isHideCenterContent: false,
fixedMarker: false,
variant: 'default',
markerValueInterval: 10,Preview:
