react-native-semicircle-slider-color-picker
This component is actually a semi circle slider but it is designed in this way that you can use it as color picker too.
Install
npm i react-native-semicircle-slider-color-picker
Usage
import React, { useState } from 'react';
import {
SafeAreaView,
Text,
StyleSheet,
} from 'react-native';
import ColorPickerSlider from 'react-native-semicircle-slider-color-picker';
const App = () => {
const [colorValue, setColorValue] = useState<number>()
const [color, setColor] = useState()
const colorChanged = (value: number) => {
//console.log('here is value', value)
setColorValue(value)
};
return (
<SafeAreaView style={styles.mainContainer}>
<ColorPickerSlider
thumbColor={color?.hexColor?? 'grey'}
trackStrokeWidth={20}
gestureDisabled={false}
trackRadius={150}
circleType={"Top"}
value={colorValue}
onValueChange={value => colorChanged(value)}
onChangeColor={color => setColor(color)}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
mainContainer: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
}
});
export default App;
Props
| Prop | Type | Optional | Default | Description |
|---|
| value | number | Yes | 0 | Initial value of the slider |
| gestureDisabled | bool | Yes | false | If true the user won't be able to move the slider |
| minimumValue | number | Yes | 0 | Initial minimum value of the slider |
| maximumValue | number | Yes | 1 | Initial maximum value of the slider |
| trackStrokeWidth | number | Yes | 22 | This is the width of slider |
| trackRadius | number | Yes | 150 | This is the Radius of Circular Slider |
| thumbRadius | number | Yes | 15 | This is the Size of Thumb |
| thumbColor | string | Yes | #fff | This is the Color of Thumb |
| onValueChange | Callback | Yes | none | OnChange Handler which returns current slider value |
| onChangeColor | Callback | Yes | none | This callback returns color on change of slider |
| circleType | string | Yes | Top | Required property to draw bottom or top circle (use "Bottom" for bottom circle and "Top" for top circle) |
| paddingVertical | number | Yes | 20 | This is the vertical padding |
| linearGradient | any | Yes | linearGradient array | Gradient to fill in the half circle |
| paddingVertical | number | Yes | 20 | This is the vertical padding |
| brightness | number | Yes | 100 | This is the brightness of color, you can also set the brightness based on different slider of brightness. |
MIT Licensed
