Using <Panel5 />, when first loading the picker, the color set as "value" is not reflected in the selector.

[LagoonProject]

Description

Using <Panel5 />, when first loading the picker, the color set as "value" is not reflected in the selector. The color is indeed selected, but the selector remains on "white". This happens on some colors, not all.

For example, if setting "black", "#785800" or "#0056d6" to "value", the selector stays on those colors when the picker in loaded.

But if setting "#0041a8", "#bd3812" or "#f5ed00" to "value", the right color is set and shows in the preview, but the selector stays on the "white" square. Even though all these colors are available on the grid. Again, the value color is selected, but visually the selector stays on "white".

Steps to reproduce

1. set <ColorPicker value={'#0041a8'}
2. load <Panel5 />
3. The selector remains on "white" but the right color '#0041a8' is displayed in the Preview and is set.

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.5

React Native version

0.72.4

React Native Reanimated version

3.5.4

React Native Gesture Handler version

2.12.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

[alabsi91]

Hey, those colors "#0041a8," "#bd3812," or "#f5ed00" you mentioned are not the exact colors in the grid. You can check the grid colors here: Panel5.tsx

[LagoonProject]

Hey, those colors "#0041a8," "#bd3812," or "#f5ed00" you mentioned are not the exact colors in the grid. You can check the grid colors here: Panel5.tsx

Thanks for your answer. The colors I mentioned are the ones that appear in the preview:

For example, if I use the color "#0042A9" in "value" which is in the 'gridColors' array in your link, it will open displaying '#0041a8' instead in the Preview and the selector will be in that square as in the picture.

But if I use '#0041a8' in 'value', the selector will be on the top left "white" square.

Or maybe there's something I misunderstood.

Anyway I'm going to use the colors of the 'gridColors' array and disable the Preview text for now.

Thanks.

[alabsi91]

The issue is that the grid is looking for the exact color. The color in the preview is very close but not exact due to color conversion. All colors in the color picker are converted to the HSV (HSB) format, then converted back to the desired format, which in your case is HEX. I might implement a color comparison function with an error tolerance to match the grid colors, but I'm not sure if it's the right thing to do.

[LagoonProject]

The issue is that the grid is looking for the exact color. The color in the preview is very close but not exact due to color conversion. All colors in the color picker are converted to the HSV (HSB) format, then converted back to the desired format, which in your case is HEX. I might implement a color comparison function with an error tolerance to match the grid colors, but I'm not sure if it's the right thing to do.

Ok I get it. Indeed the color that appears in the 'onComplete' function is not the one displayed in the preview, I didn't noticed it at first.

I have not looked into the code much yet, but maybe there's a way to display the value of the color before conversion directly in the Preview instead ? So at least the color displayed in preview and the color selected have the same value.

Anyway thanks for your answers.