I'm trying to get the result of the colour picker so that I can constantly update the colour of a card in a separate component. The colour picker is for the colour of the card! I've tried a few things, but most come back as undefined or as an error. The issue is whate to put in setCardColour() I have this.currentColor but that doesn't work. Any ideas?
This is the function for when the colour changes :
function changeCardColour() {
setCardColour(this.currentColour)
console.log(cardColour)
}
This is the Colour picker itself :
<ColourPicker
color = {cardColour}
swatches = {false}
style = {styles.colourWheel}
onColorChange = {changeCardColour}
/>
You need to change code like,
function changeCardColour(selectedColour) {
setCardColour(selectedColour)
}
According to doc,
onColorChange: (color) => {} callback function for slider and wheel thumb movement.
const RoundedColorPicker = () => {
const [currentColor, setCurrentColor] = useState('#000');
const onColorChange = (selectedColor: string) => {
setCurrentColor(selectedColor);
};
return (
<SafeAreaView style={RoundedColorPickerStyle.container}>
<View
style={[
RoundedColorPickerStyle.currentColorContainer,
{backgroundColor: currentColor},
]}
/>
<Text>Current Color:{currentColor}</Text>
<ColorPicker
color={currentColor}
swatchesOnly={false}
onColorChange={onColorChange}
thumbSize={40}
sliderSize={40}
noSnap={true}
row={false}
/>
</SafeAreaView>
);
};
I use like this way and it is working fine for me.