From 7dea081f559923f1b3e0df4dd7f3e431c66b0127 Mon Sep 17 00:00:00 2001
From: Ben Williams <git@biwills.com>
Date: Wed, 24 Apr 2024 17:41:01 -0700
Subject: [PATCH] added `value` prop to `StepMarker` component prop

---
 README.md                                 | 2 +-
 package/src/components/StepsIndicator.tsx | 1 +
 package/src/components/TrackMark.tsx      | 5 ++++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 39486671..320b676e 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ To use this library you need to ensure you are using the correct version of Reac
 | `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | No | iOS |
 | `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | No | |
 | `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | No | iOS | |
-| ⚠️ **Experimental:**</br> `StepMarker` | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>`, <br/> where <br/> `MarkerProps`: `{stepMarked: boolean}` | No | iOS, Android, Windows |
+| ⚠️ **Experimental:**</br> `StepMarker` | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>`, <br/> where <br/> `MarkerProps`: `{stepMarked: boolean; value: number}` | No | iOS, Android, Windows |
 | ⚠️ **Experimental:**</br> `renderStepNumber` | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | No | iOS, Android, Windows |
 | `ref` | Reference object. | MutableRefObject | No | web |
 | `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | | |
diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index 06c2d763..4bcb5d3b 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -44,6 +44,7 @@ export const StepsIndicator = ({
             <View style={styles.stepIndicatorElement}>
               <SliderTrackMark
                 key={`${index}-SliderTrackMark`}
+                value={i}
                 isTrue={currentValue === i}
                 thumbImage={thumbImage}
                 StepMarker={StepMarker}
diff --git a/package/src/components/TrackMark.tsx b/package/src/components/TrackMark.tsx
index 4be5197b..dbb18ebe 100644
--- a/package/src/components/TrackMark.tsx
+++ b/package/src/components/TrackMark.tsx
@@ -4,22 +4,25 @@ import {styles} from '../utils/styles';
 
 export type MarkerProps = {
   stepMarked: boolean;
+  value: number;
 };
 
 export type TrackMarksProps = {
   isTrue: boolean;
+  value: number;
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps>;
 };
 
 export const SliderTrackMark = ({
   isTrue,
+  value,
   thumbImage,
   StepMarker,
 }: TrackMarksProps) => {
   return (
     <View style={styles.trackMarkContainer}>
-      {StepMarker ? <StepMarker stepMarked={isTrue} /> : null}
+      {StepMarker ? <StepMarker stepMarked={isTrue} value={value} /> : null}
       {thumbImage && isTrue ? (
         <View style={styles.thumbImageContainer}>
           <Image source={thumbImage} style={styles.thumbImage} />