callstack / callstack/react-native-slider

Render custom component above thumb

Abierto
#605 0 comentarios 1 reacción 1 asignado Reclamado por @BartoszKlonowski Ver en GitHub
question
Lenguaje dominante
TypeScript
Estrellas
1.4k
Forks
295
Merge medio
5 min
PR fusionados (30 d)
1

Descripción

## 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?

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.