51 lines
No EOL
1.4 KiB
TypeScript
51 lines
No EOL
1.4 KiB
TypeScript
import { StyleSheet } from "react-native";
|
|
import ColorPicker, { BrightnessSlider, HueSlider, Preview, SaturationSlider, } from "reanimated-color-picker";
|
|
|
|
export type CustomColorPickerProperties = {
|
|
currentColor?: string | null,
|
|
handleColorChange: (color: string) => void | undefined,
|
|
}
|
|
|
|
const CustomColorPicker = (properties: CustomColorPickerProperties) => {
|
|
return (
|
|
<ColorPicker
|
|
value={properties.currentColor ?? generateRandomColor()}
|
|
onChange={(color) => {
|
|
properties.handleColorChange(color["hex"])
|
|
}}
|
|
style={styles.colorPickerStyle}
|
|
sliderThickness={30}
|
|
thumbSize={40}
|
|
thumbShape= "circle">
|
|
<Preview
|
|
style={[styles.previewStyle]}
|
|
textStyle={{ fontSize: 18 }}
|
|
colorFormat="hex"
|
|
hideInitialColor/>
|
|
|
|
<HueSlider style={[styles.sliderStyle]}/>
|
|
<BrightnessSlider style={[styles.sliderStyle]}/>
|
|
<SaturationSlider style={[styles.sliderStyle]}/>
|
|
</ColorPicker>
|
|
);
|
|
}
|
|
|
|
const generateRandomColor = (): string => {
|
|
return '#' + Math.floor(Math.random()*16777215).toString(16);
|
|
}
|
|
|
|
export default CustomColorPicker;
|
|
|
|
const styles = StyleSheet.create({
|
|
colorPickerStyle: {
|
|
justifyContent: 'center',
|
|
},
|
|
sliderStyle: {
|
|
margin: 10,
|
|
},
|
|
previewStyle: {
|
|
margin: 10,
|
|
height: 50,
|
|
borderRadius: 10,
|
|
}
|
|
}); |