react-native-semicircle-slider-color-picker

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

``shell
npm i react-native-semicircle-slider-color-picker
`

Usage

`jsx
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()
const [color, setColor] = useState()

const colorChanged = (value: number) => {
//console.log('here is value', value)
setColorValue(value)
};

return (

thumbColor={color?.hexColor?? 'grey'}
trackStrokeWidth={20}
gestureDisabled={false}
trackRadius={150}
circleType={"Top"}
value={colorValue}
onValueChange={value => colorChanged(value)}
onChangeColor={color => setColor(color)}
/>

);
};

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