callstack / callstack/react-native-slider

Render custom component above thumb

Đang mở
#605 0 bình luận 1 reaction 1 người được giao Được @BartoszKlonowski nhận Xem trên GitHub
question
Ngôn ngữ chính
TypeScript
Star
1.4k
Fork
295
Merge trung bình
5 phút
Pull request đã merge (30 ngày)
1

Mô tả

## Ask your Question

i have requirement to render custom component with dynamic value above the thumb like this

![image](https://github.com/callstack/react-native-slider/assets/46083126/fbb45fb7-eb3a-43a2-8ae4-f80a8b7d72b6)

I took a look at the [code](https://github.com/callstack/react-native-slider/blob/main/package/src/components/TrackMark.tsx) and there is no way for now to render custom component/element above the thumb.

maybe we can do something like this?

```diff
export const SliderTrackMark = ({
isTrue,
thumbImage,
StepMarker,
+ index
+ renderAboveThumbComponent
}: TrackMarksProps) => {
return (

{StepMarker ? : null}
{thumbImage && isTrue ? (
<>
+ {renderAboveThumbComponent(index)}




) : null}

);
};

```

API name inspired by https://github.com/miblanchard/react-native-slider/blob/cb80d87c7f80f27856613e18459c80c70d638df7/README.md?plain=1#L88

maybe one consideration, from windows example
there is already a box with step value rendered above the thumb.
![image](https://github.com/callstack/react-native-slider/assets/46083126/e4c4252e-3334-4de0-b741-272cb8477b2c)

is it gonna be a conflict if we implement this?
or is there a better way to handle this case?

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.