feat: add thumbSize to set size of thumb #752
Conversation
BartoszKlonowski
left a comment
BartoszKlonowski
left a comment
There was a problem hiding this comment.
So far I have some cosmetic comments and a question before I'll dive deeper into the implementation itself.
| /** | ||
| * Sets the size (width and height) of the thumb. | ||
| * If `thumbImage` is provided, it will be scaled to this size. | ||
| */ | ||
| thumbSize?: number; | ||
|
|
There was a problem hiding this comment.
No need to include it explicitly per each platform, especially you already included this new prop in SliderProps.
Let's remove it from here.
| /** | ||
| * Sets the size (width and height) of the thumb, in points (dp on Android). | ||
| * If you also set `thumbImage`, the image will be scaled to this size. | ||
| */ |
There was a problem hiding this comment.
We don't need to comment on props that are added here specifically for the codegen to create a component properly. We can remove this comment.
| ? 'transparent' | ||
| : props.thumbTintColor | ||
| } | ||
| thumbSize={props.thumbSize} |
There was a problem hiding this comment.
We are already spreading all {...props} in line 313, so no need to explicitly pass it here if there's no operations done on that and the name matches.
Let me know if I'm not mistaken here.
| [self->slider setThumbImage:nil]; | ||
| }]; | ||
| } | ||
| if (oldScreenProps.thumbTintColor != newScreenProps.thumbTintColor && slider.thumbSize > 0) { |
There was a problem hiding this comment.
I'm having a hard time understanding this part - can you elaborate on why do we check for thumbTintColor (again) when updateThumbImage is called and why do we limit thumbSize to bigger than 0px?
3 participants
Summary:
This PR adds a new thumbSize prop to control the thumb’s size for both with and without thumb image. It is a simple feature that I need and did patch-package in some of my projects but I didn't have a chance to contribute, I think some developers might also need it:
Test Plan:
Verify in the example list:
“Custom thumb size (no image)” renders a larger thumb (e.g. thumbSize={32}) tinted with thumbTintColor.
“Custom thumb size (scaled image)” renders the thumb image scaled to the configured size (e.g. thumbSize={60}).
Verify the same two examples behave equivalently on iOS (thumb resizes; image scales when provided).