[3.0] Setting thumbColor overrides active fill color
adamhari opened this issue · comments
Description
In 2.x versions, setting the thumbColor, atleast on the default thumb, would set the color of the ring surrounding the thumb, but the inner color would still reflect the color selection.
In 3.0, setting the thumbColor will control the fill color and the surrounding ring color.
Is there a way to control the default thumb's outer ring color without overriding the fill color like in 2.x?
Thank you for all the incredible work you've done with this library!
Steps to reproduce
Render a Panel3 with the thumbColor prop
Snack or a link to a repository
https://snack.expo.dev/@adamhari-kashoo/reanimated-color-picker
(visit Panel3 Brightness)
Reanimated Color Picker version
3.0.0
React Native version
0.73.2
React Native Reanimated version
3.6.1
React Native Gesture Handler version
2.14.0
Platforms
Web
JavaScript runtime
JSC
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Debug mode
@adamhari Thank you, The thumbColor prop is supposed to override the active color and replace it with a fixed color, but for some reason, useAnimatedStyle always prioritized. Now, this is fixed in version 3. I think if you want to change the borderColor, you can use thumbStyle or thumbInnerStyle depending on the thumb shape, let me know if that fixes your issue.
It seems like neither the border or background color will override the ring color using thumbStyle or thumbInnerStyle. The only way to control the ring which changes from black/white relative to the active color is by using thumbColor, so it cannot be controlled independently in 3.0.
Sorry I misunderstood. I thought you wanted to change the borderColor. Unfortunately, you can't change the ring color directly. To fix this issue, I mapped the backgroundColor style in thumbStyle to change the ring background color in this PR #70
@adamhari Can you confirm if the issue is resolved, please? I have published the changes to NPM.
npm i reanimated-color-picker@next@adamhari Can you confirm if the issue is resolved, please? I have published the changes to NPM.
npm i reanimated-color-picker@next
The issue is resolved. I noticed a couple of things while I was testing the Ring thumb for this:
boundedThumbrestricts the outer ring from overflowing from the top/left, but the bottom/right are restricted when the inner thumb portion touches the edge (ring overflows out)thumbColorsets both the ring border color and the semi-opaque background color that exists between the ring and the center of the thumb (this wasn't the case in 2.x)
For the first issue, the boundedThumb one, I couldn't replicate it. I noticed that it goes outside the panel temporarily only when it's active and the scale animation is applied. However, for the second issue, I made sure that the thumbColor prop only changes the inner circle's background color.
Ahh ok, yeah the thumb only exceeds the bounds from the right/bottom when the active scale is applied.
Fixed in #70