From 82b08756dd29ee895041a1307846ec45dc2efa4f Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Tue, 8 Oct 2024 13:06:38 +0200
Subject: [PATCH 01/11] Add new fields to MarkerProps for custom component

---
 package/typings/index.d.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/package/typings/index.d.ts b/package/typings/index.d.ts
index abae2dcb..34ac70ae 100644
--- a/package/typings/index.d.ts
+++ b/package/typings/index.d.ts
@@ -22,14 +22,18 @@ export interface SliderRef {
 
 export type TrackMarksProps = {
   isTrue: boolean;
+  index: number;
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps> | boolean;
-  currentValue?: number;
+  currentValue: number;
 };
 
 export type MarkerProps = {
   stepMarked: boolean;
   currentValue?: number;
+  index?: number;
+  min?: number;
+  max?: number;
 };
 
 export interface SliderPropsIOS extends ReactNative.ViewProps {

From 3fc274c97f1e9aabae2dc711c55d488f7c7b2c9c Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Tue, 8 Oct 2024 13:13:49 +0200
Subject: [PATCH 02/11] Implement min, max and index into Custom Component
 value

---
 package/src/components/StepsIndicator.tsx |  7 +++++--
 package/src/components/TrackMark.tsx      | 19 +++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index a28b12c6..35b471a7 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -18,7 +18,7 @@ export const StepsIndicator = ({
 }: {
   options: number[];
   sliderWidth: number;
-  currentValue?: number;
+  currentValue: number;
   StepMarker?: FC<MarkerProps>;
   renderStepNumber?: boolean;
   thumbImage?: ImageSource;
@@ -41,13 +41,16 @@ export const StepsIndicator = ({
       {values.map((i, index) => {
         return (
           <Fragment key={index}>
-            <View style={styles.stepIndicatorElement}>
+            <View style={styles.stepIndicatorElement} key={`${index}-View`}>
               <SliderTrackMark
                 key={`${index}-SliderTrackMark`}
                 isTrue={currentValue === i}
+                index={i}
                 thumbImage={thumbImage}
                 StepMarker={StepMarker}
                 currentValue={currentValue}
+                min={options[0]}
+                max={options[options.length - 1]}
               />
               {renderStepNumber ? (
                 <StepNumber
diff --git a/package/src/components/TrackMark.tsx b/package/src/components/TrackMark.tsx
index bd87b237..de06b72a 100644
--- a/package/src/components/TrackMark.tsx
+++ b/package/src/components/TrackMark.tsx
@@ -5,25 +5,40 @@ import {styles} from '../utils/styles';
 export type MarkerProps = {
   stepMarked: boolean;
   currentValue?: number;
+  index?: number;
+  min?: number;
+  max?: number;
 };
 
 export type TrackMarksProps = {
   isTrue: boolean;
+  index: number;
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps>;
-  currentValue?: number;
+  currentValue: number;
+  min: number;
+  max: number;
 };
 
 export const SliderTrackMark = ({
   isTrue,
+  index,
   thumbImage,
   StepMarker,
   currentValue,
+  min,
+  max,
 }: TrackMarksProps) => {
   return (
     <View style={styles.trackMarkContainer}>
       {StepMarker ? (
-        <StepMarker stepMarked={isTrue} currentValue={currentValue} />
+        <StepMarker
+          stepMarked={isTrue}
+          index={index}
+          currentValue={currentValue}
+          min={min}
+          max={max}
+        />
       ) : null}
       {thumbImage && isTrue ? (
         <View style={styles.thumbImageContainer}>

From a47d755414211c582b3216c246f8b487a44aa801 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Tue, 8 Oct 2024 13:14:35 +0200
Subject: [PATCH 03/11] Provide new custom component with the example in
 example app

---
 example/src/Examples.tsx | 80 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
index d0448042..47458edf 100644
--- a/example/src/Examples.tsx
+++ b/example/src/Examples.tsx
@@ -294,6 +294,22 @@ const MyStepMarker: FC<MarkerProps> = ({stepMarked, currentValue}) => {
   );
 };
 
+const CustomComponent: FC<MarkerProps> = ({stepMarked, currentValue, index, max}) => {
+  if (stepMarked) {
+    return (
+      <View style={styles.customComponentFrame}>
+        <View style={[styles.customComponentLeftFrame, styles.filled]}>
+          <Text style={styles.trackText}>{index}</Text>
+        </View>
+        <View style={[styles.customComponentRightFrame, styles.empty]}>
+          <Text style={styles.trackText}>{max}</Text>
+        </View>
+        <Text style={[styles.trackText, {position: "absolute", left: 18}]}>/</Text>
+      </View>);
+  }
+  return currentValue > index ? ( <View style={[styles.trackDot, styles.filled]}></View>) : (<View style={[styles.trackDot, styles.empty]}></View>);
+};
+
 const SliderExampleWithCustomMarker = (props: SliderProps) => {
   const [value, setValue] = useState(props.value ?? CONSTANTS.MIN_VALUE);
 
@@ -318,6 +334,27 @@ const SliderExampleWithCustomMarker = (props: SliderProps) => {
     </View>
   );
 };
+const SliderExampleWithCustomComponentAndFilledSteps = (props: SliderProps) => {
+  const [value, setValue] = useState(props.value || 50);
+
+  return (
+    <View style={{alignItems: 'center'}}>
+      <Text style={styles.text}>{value && +value.toFixed(3)}</Text>
+      <Slider
+        step={CONSTANTS.STEP}
+        style={[styles.slider, props.style]}
+        minimumValue={CONSTANTS.MIN_VALUE}
+        maximumValue={CONSTANTS.MAX_VALUE}
+        StepMarker={CustomComponent}
+        {...props}
+        value={value}
+        onValueChange={setValue}
+        minimumTrackTintColor={'#00629A'}
+        maximumTrackTintColor={'#979EA4'}
+      />
+    </View>
+  );
+};
 
 const SliderExampleWithCustomMarkerWithDefaultProps = (props: SliderProps) => {
   const [value, setValue] = useState(props.value ?? CONSTANTS.MIN_VALUE);
@@ -349,6 +386,43 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     margin: 0,
   },
+  trackText: {
+    color: "#FFFFFF",
+    fontSize: 10,
+    justifyContent: "center",
+    alignSelf: "center",
+    top: 12
+  },
+  trackDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 10,
+    top: 4,
+  },
+  empty: {
+    backgroundColor: '#B3BFC9',
+  },
+  filled: {
+    backgroundColor: '#00629A',
+  },
+  customComponentFrame: {
+    flex: 1,
+    flexDirection: 'row',
+    top: -10,
+    opacity: 0.95
+  },
+  customComponentLeftFrame: {
+    height: 40,
+    width: 20,
+    borderTopLeftRadius: 40,
+    borderBottomLeftRadius: 40,
+  },
+  customComponentRightFrame: {
+    height: 40,
+    width: 20,
+    borderTopRightRadius: 40,
+    borderBottomRightRadius: 40,
+  },
   divider: {
     width: 2,
     height: 20,
@@ -638,6 +712,12 @@ export const examples: Props[] = [
     title: 'Custom step marker but default step and min/max values',
     render() {
       return <SliderExampleWithCustomMarkerWithDefaultProps />;
+    }
+  },
+  {
+    title: 'Custom component with steps filled when passed',
+    render() {
+      return <SliderExampleWithCustomComponentAndFilledSteps />;
     },
   },
   {

From 09b81e9019eab2717f54e0096a5d30936e6817c5 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Tue, 8 Oct 2024 13:27:29 +0200
Subject: [PATCH 04/11] Provide currentValue with defined value of Slider

---
 package/src/Slider.tsx         | 4 ++--
 package/src/utils/constants.ts | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx
index 9c1b8fa4..1e6d3ae7 100644
--- a/package/src/Slider.tsx
+++ b/package/src/Slider.tsx
@@ -211,7 +211,7 @@ const SliderComponent = (
     ...localProps
   } = props;
   const [currentValue, setCurrentValue] = useState(
-    props.value ?? props.minimumValue,
+    props.value || props.minimumValue || constants.SLIDER_DEFAULT_INITIAL_VALUE,
   );
   const [width, setWidth] = useState(0);
 
@@ -350,7 +350,7 @@ const SliderComponent = (
 const SliderWithRef = React.forwardRef(SliderComponent);
 
 SliderWithRef.defaultProps = {
-  value: 0,
+  value: constants.SLIDER_DEFAULT_INITIAL_VALUE,
   minimumValue: 0,
   maximumValue: 1,
   step: 0,
diff --git a/package/src/utils/constants.ts b/package/src/utils/constants.ts
index 6dd27a09..9cc7d4c1 100644
--- a/package/src/utils/constants.ts
+++ b/package/src/utils/constants.ts
@@ -1,6 +1,7 @@
 import {Platform} from 'react-native';
 
 export const constants = {
+  SLIDER_DEFAULT_INITIAL_VALUE: 0,
   MARGIN_HORIZONTAL_PADDING: 0.05,
   STEP_NUMBER_TEXT_FONT_SMALL: 8,
   STEP_NUMBER_TEXT_FONT_BIG: 12,

From 43e67c4e5c7e66783588dd5d69d6c90211fd5f08 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 14:05:09 +0100
Subject: [PATCH 05/11] Update package name ref in example lockfile

---
 example/package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/package-lock.json b/example/package-lock.json
index 38be536d..3656f6cb 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -49,6 +49,7 @@
       }
     },
     "../package": {
+      "name": "@react-native-community/slider",
       "version": "4.5.5",
       "license": "MIT",
       "devDependencies": {

From 130e36017d6de38b532364a46a84f7f3a82dedba Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 14:19:47 +0100
Subject: [PATCH 06/11] Fix the typing and styling

---
 example/src/Examples.tsx             | 193 +++++++++++++++------------
 package/src/components/TrackMark.tsx |   8 +-
 package/typings/index.d.ts           |   8 +-
 3 files changed, 117 insertions(+), 92 deletions(-)

diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
index 47458edf..b21552fd 100644
--- a/example/src/Examples.tsx
+++ b/example/src/Examples.tsx
@@ -1,4 +1,4 @@
-import React, {FC, useState} from 'react';
+import React, {FC, useCallback, useState} from 'react';
 import {Text, View, StyleSheet, Image} from 'react-native';
 import Slider, {MarkerProps, SliderProps} from '@react-native-community/slider';
 
@@ -70,6 +70,18 @@ const SlidingCompleteExample = (props: SliderProps) => {
 };
 
 const SlidingStepsExample = (props: SliderProps) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrue}>
+        <View style={styles.innerTrue} />
+      </View>
+    ) : (
+      <View style={styles.outer}>
+        <View style={styles.inner} />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -78,17 +90,7 @@ const SlidingStepsExample = (props: SliderProps) => {
         maximumValue={4}
         step={1}
         tapToSeek
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrue}>
-              <View style={styles.innerTrue} />
-            </View>
-          ) : (
-            <View style={styles.outer}>
-              <View style={styles.inner} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#112233'}
         maximumTrackTintColor={'#00FF00'}
       />
@@ -97,6 +99,18 @@ const SlidingStepsExample = (props: SliderProps) => {
 };
 
 const SlidingStepsNumbersExample = (props: SliderProps) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrue}>
+        <View style={styles.innerTrue} />
+      </View>
+    ) : (
+      <View style={styles.outer}>
+        <View style={styles.inner} />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -106,17 +120,7 @@ const SlidingStepsNumbersExample = (props: SliderProps) => {
         step={1}
         tapToSeek
         renderStepNumber
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrue}>
-              <View style={styles.innerTrue} />
-            </View>
-          ) : (
-            <View style={styles.outer}>
-              <View style={styles.inner} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#123456'}
         maximumTrackTintColor={'#00FF00'}
       />
@@ -125,6 +129,18 @@ const SlidingStepsNumbersExample = (props: SliderProps) => {
 };
 
 const SlidingStepsSmallNumbersExample = (props: SliderProps) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrueSmall}>
+        <View style={styles.innerTrueSmall} />
+      </View>
+    ) : (
+      <View style={styles.outerSmall}>
+        <View style={styles.innerSmall} />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -134,17 +150,7 @@ const SlidingStepsSmallNumbersExample = (props: SliderProps) => {
         step={1}
         tapToSeek
         renderStepNumber
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrueSmall}>
-              <View style={styles.innerTrueSmall} />
-            </View>
-          ) : (
-            <View style={styles.outerSmall}>
-              <View style={styles.innerSmall} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#123456'}
         maximumTrackTintColor={'#00FF00'}
       />
@@ -153,6 +159,17 @@ const SlidingStepsSmallNumbersExample = (props: SliderProps) => {
 };
 
 const SlidingCustomStepsThumbImageNumbersExample = (props: SliderProps) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrue}>
+        <View style={styles.innerTrue} />
+      </View>
+    ) : (
+      <View style={styles.outer}>
+        <View style={styles.inner} />
+      </View>
+    );
+  }, []);
   return (
     <View>
       <SliderExample
@@ -163,17 +180,7 @@ const SlidingCustomStepsThumbImageNumbersExample = (props: SliderProps) => {
         tapToSeek
         renderStepNumber
         thumbImage={require('./resources/ck-icon.png')}
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrue}>
-              <View style={styles.innerTrue} />
-            </View>
-          ) : (
-            <View style={styles.outer}>
-              <View style={styles.inner} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#123456'}
         maximumTrackTintColor={'#654321'}
       />
@@ -184,6 +191,18 @@ const SlidingCustomStepsThumbImageNumbersExample = (props: SliderProps) => {
 const SlidingCustomStepsAnotherThumbImageNumbersExample = (
   props: SliderProps,
 ) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrueSmall}>
+        <View style={styles.innerTrueSmall} />
+      </View>
+    ) : (
+      <View style={styles.outerSmall}>
+        <View style={styles.innerSmall} />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -194,17 +213,7 @@ const SlidingCustomStepsAnotherThumbImageNumbersExample = (
         tapToSeek
         renderStepNumber
         thumbImage={require('./resources/twitter-small.png')}
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrueSmall}>
-              <View style={styles.innerTrueSmall} />
-            </View>
-          ) : (
-            <View style={styles.outerSmall}>
-              <View style={styles.innerSmall} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#123456'}
         maximumTrackTintColor={'#654321'}
       />
@@ -213,6 +222,18 @@ const SlidingCustomStepsAnotherThumbImageNumbersExample = (
 };
 
 const InvertedSliderWithStepMarker = (props: SliderProps) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={styles.outerTrueSmall}>
+        <View style={styles.innerTrueSmall} />
+      </View>
+    ) : (
+      <View style={styles.outerSmall}>
+        <View style={styles.innerSmall} />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -223,17 +244,7 @@ const InvertedSliderWithStepMarker = (props: SliderProps) => {
         tapToSeek
         renderStepNumber
         thumbImage={require('./resources/twitter-small.png')}
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={styles.outerTrueSmall}>
-              <View style={styles.innerTrueSmall} />
-            </View>
-          ) : (
-            <View style={styles.outerSmall}>
-              <View style={styles.innerSmall} />
-            </View>
-          );
-        }}
+        StepMarker={renderStepMarker}
         inverted
         minimumTrackTintColor={'#123456'}
         maximumTrackTintColor={'#654321'}
@@ -245,6 +256,14 @@ const InvertedSliderWithStepMarker = (props: SliderProps) => {
 const SlidingCustomStepsThumbImageWithNumbersAndDifferentWidth = (
   props: SliderProps,
 ) => {
+  const renderStepMarker = useCallback(({stepMarked}: MarkerProps) => {
+    return stepMarked ? (
+      <View style={[styles.innerTrue, {top: 3}]} />
+    ) : (
+      <View style={[styles.inner, {top: 3}]} />
+    );
+  }, []);
+
   return (
     <View>
       <SliderExample
@@ -255,13 +274,7 @@ const SlidingCustomStepsThumbImageWithNumbersAndDifferentWidth = (
         style={{width: 200}}
         tapToSeek
         renderStepNumber
-        StepMarker={({stepMarked}) => {
-          return stepMarked ? (
-            <View style={[styles.innerTrue, {top: 3}]} />
-          ) : (
-            <View style={[styles.inner, {top: 3}]} />
-          );
-        }}
+        StepMarker={renderStepMarker}
         minimumTrackTintColor={'#ABCDEF'}
         maximumTrackTintColor={'#001122'}
       />
@@ -294,7 +307,12 @@ const MyStepMarker: FC<MarkerProps> = ({stepMarked, currentValue}) => {
   );
 };
 
-const CustomComponent: FC<MarkerProps> = ({stepMarked, currentValue, index, max}) => {
+const CustomComponent: FC<MarkerProps> = ({
+  stepMarked,
+  currentValue,
+  index,
+  max,
+}) => {
   if (stepMarked) {
     return (
       <View style={styles.customComponentFrame}>
@@ -304,10 +322,17 @@ const CustomComponent: FC<MarkerProps> = ({stepMarked, currentValue, index, max}
         <View style={[styles.customComponentRightFrame, styles.empty]}>
           <Text style={styles.trackText}>{max}</Text>
         </View>
-        <Text style={[styles.trackText, {position: "absolute", left: 18}]}>/</Text>
-      </View>);
+        <Text style={[styles.trackText, {position: 'absolute', left: 18}]}>
+          /
+        </Text>
+      </View>
+    );
   }
-  return currentValue > index ? ( <View style={[styles.trackDot, styles.filled]}></View>) : (<View style={[styles.trackDot, styles.empty]}></View>);
+  return currentValue > index ? (
+    <View style={[styles.trackDot, styles.filled]} />
+  ) : (
+    <View style={[styles.trackDot, styles.empty]} />
+  );
 };
 
 const SliderExampleWithCustomMarker = (props: SliderProps) => {
@@ -387,11 +412,11 @@ const styles = StyleSheet.create({
     margin: 0,
   },
   trackText: {
-    color: "#FFFFFF",
+    color: '#FFFFFF',
     fontSize: 10,
-    justifyContent: "center",
-    alignSelf: "center",
-    top: 12
+    justifyContent: 'center',
+    alignSelf: 'center',
+    top: 12,
   },
   trackDot: {
     width: 10,
@@ -409,7 +434,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     top: -10,
-    opacity: 0.95
+    opacity: 0.95,
   },
   customComponentLeftFrame: {
     height: 40,
@@ -712,7 +737,7 @@ export const examples: Props[] = [
     title: 'Custom step marker but default step and min/max values',
     render() {
       return <SliderExampleWithCustomMarkerWithDefaultProps />;
-    }
+    },
   },
   {
     title: 'Custom component with steps filled when passed',
diff --git a/package/src/components/TrackMark.tsx b/package/src/components/TrackMark.tsx
index de06b72a..e9e4c52d 100644
--- a/package/src/components/TrackMark.tsx
+++ b/package/src/components/TrackMark.tsx
@@ -4,10 +4,10 @@ import {styles} from '../utils/styles';
 
 export type MarkerProps = {
   stepMarked: boolean;
-  currentValue?: number;
-  index?: number;
-  min?: number;
-  max?: number;
+  currentValue: number;
+  index: number;
+  min: number;
+  max: number;
 };
 
 export type TrackMarksProps = {
diff --git a/package/typings/index.d.ts b/package/typings/index.d.ts
index 34ac70ae..0b548440 100644
--- a/package/typings/index.d.ts
+++ b/package/typings/index.d.ts
@@ -30,10 +30,10 @@ export type TrackMarksProps = {
 
 export type MarkerProps = {
   stepMarked: boolean;
-  currentValue?: number;
-  index?: number;
-  min?: number;
-  max?: number;
+  currentValue: number;
+  index: number;
+  min: number;
+  max: number;
 };
 
 export interface SliderPropsIOS extends ReactNative.ViewProps {

From 06809acbf6b20797d98d2c08d3718631113bcba8 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 14:38:22 +0100
Subject: [PATCH 07/11] Adjust the pods lockfile

---
 example/ios/Podfile.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index bf740a51..cd43d463 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -1806,10 +1806,10 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 1dca942403ed9342f98334bf4c3621f011aa7946
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
   FBLazyVector: be7314029d6ec6b90f0f75ce1195b8130ed9ac4f
   fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
   hermes-engine: 0555a84ea495e8e3b4bde71b597cd87fbb382888
   RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
   RCTDeprecation: 2c5e1000b04ab70b53956aa498bf7442c3c6e497
@@ -1874,4 +1874,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 1a52083da6c006694389963dc5ddd0deab10abc9
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.14.2

From e80a0b3a669dca92df6287648ecb48903b5a2981 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 14:38:35 +0100
Subject: [PATCH 08/11] Remove the redundant example

---
 example/src/Examples.tsx | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
index b21552fd..9f67eea6 100644
--- a/example/src/Examples.tsx
+++ b/example/src/Examples.tsx
@@ -381,27 +381,6 @@ const SliderExampleWithCustomComponentAndFilledSteps = (props: SliderProps) => {
   );
 };
 
-const SliderExampleWithCustomMarkerWithDefaultProps = (props: SliderProps) => {
-  const [value, setValue] = useState(props.value ?? CONSTANTS.MIN_VALUE);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>{value && +value.toFixed(3)}</Text>
-      <Slider
-        style={[styles.slider, props.style]}
-        thumbImage={require('./resources/empty.png')}
-        tapToSeek
-        {...props}
-        value={value}
-        onValueChange={setValue}
-        StepMarker={MyStepMarker}
-        minimumTrackTintColor={'#00629A'}
-        maximumTrackTintColor={'#979EA4'}
-      />
-    </View>
-  );
-};
-
 export default SliderExample;
 
 const styles = StyleSheet.create({
@@ -733,12 +712,6 @@ export const examples: Props[] = [
       return <SliderExampleWithCustomMarker />;
     },
   },
-  {
-    title: 'Custom step marker but default step and min/max values',
-    render() {
-      return <SliderExampleWithCustomMarkerWithDefaultProps />;
-    },
-  },
   {
     title: 'Custom component with steps filled when passed',
     render() {

From ae34ca0a12dd3a901356f47606ffe8ca19419ec8 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 15:23:43 +0100
Subject: [PATCH 09/11] Optimize the StepsIndicator a bit by rendering only the
 changed

---
 package/src/components/StepsIndicator.tsx | 79 ++++++++++++++---------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index 35b471a7..be3b0eaf 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -1,4 +1,4 @@
-import React, {FC, Fragment} from 'react';
+import React, {FC, Fragment, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {StepNumber} from './StepNumber';
 import {MarkerProps, SliderTrackMark} from './TrackMark';
@@ -24,13 +24,52 @@ export const StepsIndicator = ({
   thumbImage?: ImageSource;
   isLTR?: boolean;
 }) => {
-  const stepNumberFontStyle = {
-    fontSize:
-      options.length > 9
-        ? constants.STEP_NUMBER_TEXT_FONT_SMALL
-        : constants.STEP_NUMBER_TEXT_FONT_BIG,
-  };
+  const stepNumberFontStyle = useMemo(() => {
+    return {
+      fontSize:
+        options.length > 9
+          ? constants.STEP_NUMBER_TEXT_FONT_SMALL
+          : constants.STEP_NUMBER_TEXT_FONT_BIG,
+    };
+  }, [options.length]);
   const values = isLTR ? options.reverse() : options;
+
+  const renderStepIndicator = useCallback(
+    (i: number, index: number) => {
+      return (
+        <Fragment key={index}>
+          <View style={styles.stepIndicatorElement} key={`${index}-View`}>
+            <SliderTrackMark
+              key={`${index}-SliderTrackMark`}
+              isTrue={currentValue === i}
+              index={i}
+              thumbImage={thumbImage}
+              StepMarker={StepMarker}
+              currentValue={currentValue}
+              min={options[0]}
+              max={options[options.length - 1]}
+            />
+            {renderStepNumber ? (
+              <StepNumber
+                i={i}
+                style={stepNumberFontStyle}
+                key={`${index}th-step`}
+              />
+            ) : null}
+          </View>
+        </Fragment>
+      );
+    },
+    [
+      currentValue,
+      StepMarker,
+      options,
+      thumbImage,
+      renderStepNumber,
+      stepNumberFontStyle,
+    ],
+  );
+
   return (
     <View
       pointerEvents="none"
@@ -38,31 +77,7 @@ export const StepsIndicator = ({
         styles.stepsIndicator,
         {marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING},
       ]}>
-      {values.map((i, index) => {
-        return (
-          <Fragment key={index}>
-            <View style={styles.stepIndicatorElement} key={`${index}-View`}>
-              <SliderTrackMark
-                key={`${index}-SliderTrackMark`}
-                isTrue={currentValue === i}
-                index={i}
-                thumbImage={thumbImage}
-                StepMarker={StepMarker}
-                currentValue={currentValue}
-                min={options[0]}
-                max={options[options.length - 1]}
-              />
-              {renderStepNumber ? (
-                <StepNumber
-                  i={i}
-                  style={stepNumberFontStyle}
-                  key={`${index}th-step`}
-                />
-              ) : null}
-            </View>
-          </Fragment>
-        );
-      })}
+      {values.map((i, index) => renderStepIndicator(i, index))}
     </View>
   );
 };

From 8e252df43dd2437fb47d93cc3b196acbf863d0ae Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 17:29:54 +0100
Subject: [PATCH 10/11] Describe the custom components in details in README

---
 .../resources/CustomStepMarker-Component.png  | Bin 0 -> 12713 bytes
 .../resources/CustomStepMarker-Default.png    | Bin 0 -> 7270 bytes
 .../CustomStepMarker-StepnNumber.png          | Bin 0 -> 10406 bytes
 README.md                                     |  99 +++++++++++++++++-
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 .github/Examples/resources/CustomStepMarker-Component.png
 create mode 100644 .github/Examples/resources/CustomStepMarker-Default.png
 create mode 100644 .github/Examples/resources/CustomStepMarker-StepnNumber.png

diff --git a/.github/Examples/resources/CustomStepMarker-Component.png b/.github/Examples/resources/CustomStepMarker-Component.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a1d5d11db69cef1e8d9409a3929f4790e316897
GIT binary patch
literal 12713
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

literal 0
HcmV?d00001

diff --git a/.github/Examples/resources/CustomStepMarker-Default.png b/.github/Examples/resources/CustomStepMarker-Default.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8f6771629bc5b88395b9460e7c87fb7188c37a8
GIT binary patch
literal 7270
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
bmkifdP7p6B8BBkFUoz4&*R8yLFY12)Qg6i2

literal 0
HcmV?d00001

diff --git a/.github/Examples/resources/CustomStepMarker-StepnNumber.png b/.github/Examples/resources/CustomStepMarker-StepnNumber.png
new file mode 100644
index 0000000000000000000000000000000000000000..30341cb8f1c9b5ce21cdbc7bf24408eddceeca14
GIT binary patch
literal 10406
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

literal 0
HcmV?d00001

diff --git a/README.md b/README.md
index 1035d099..e4828773 100644
--- a/README.md
+++ b/README.md
@@ -107,11 +107,106 @@ 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> `renderStepNumber` | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | No | iOS, Android, Windows |
+| [`StepMarker`](#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>` | No | iOS, Android, Windows |
+| [`renderStepNumber`](#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) | | | |
 
+## Custom step marker and step numbers
+
+| | |
+| - | - |
+| It is possible to render default step numbers under your slider and to render custom step component and step marker.<br/>This can be achieved by using: | <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-Default.png" alt="default" /> |
+
+### `renderStepNumber`
+
+| | |
+| - | - |
+|Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track.<br/>Two font sizes are available and they will be selected automatically depending on the overall number of steps. | <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-StepnNumber.png" alt="renderStepNumber" /> |
+
+### `StepMarker`
+
+| | |
+| - | - |
+| Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length. <br/>This `StepMarker` prop accepts your custom component and provides it with the following parameters: |  <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-Component.png" alt="stepMarker" /> |
+
+
+<table>
+<tr>
+<td>
+
+```typescript
+  stepMarked: boolean;
+```
+
+</td>
+<td>
+
+Indicates whether that custom step is the one that the thum is currently on.
+<br/>If user drags or clicks on that step, thumb will be moved there and the `stepMarked` parameter will be set to `true`.
+<br/>Use it, to differentiate between rendering your custom thumb component, or your custom step marker.
+
+</td>
+</tr>
+<tr>
+<td>
+
+```typescript
+  currentValue: number;
+```
+
+</td>
+<td>
+Contains the `number` type saying at which value of the Slider the thumb currently is.
+<br/>Use it, for example, to render the Slider value on every step marker, or to render different step marker's variant depending on the Thumb position.
+
+</td>
+</tr>
+<tr>
+<td>
+
+```typescript
+  index: number;
+```
+
+</td>
+<td>
+
+Contains the index at which this exact instantiation of your custom step marker was rendered at.
+<br/>Use it if you would like to render step number within the step marker, or, for example, if you want to render many variants of step marker depending on their positions along the Slider's width.
+
+</td>
+</tr>
+<tr>
+<td>
+
+```typescript
+  min: number;
+```
+
+</td>
+<td>
+
+Minimum value of the Slider. It is equal to `minimumValue` and has the same default if not set.
+
+</td>
+</tr>
+<tr>
+<td>
+
+```typescript
+  max: number;
+```
+
+</td>
+<td>
+
+Maximum value of the Slider. It is equal to `maximumValue` and has the same default if not set.
+
+</td>
+</tr>
+</table>
+
 ## Roadmap and Progress
 
 There's a Project board available [here](https://github.com/callstack/react-native-slider/projects/1) which contains all reported issues organized into columns regarding their status.

From a96ed392132dccb8fd99e2727695f9e4d873fb85 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 17 Jan 2025 17:33:02 +0100
Subject: [PATCH 11/11] Simplify README by not using the screenshots

---
 README.md | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index e4828773..d40eebc3 100644
--- a/README.md
+++ b/README.md
@@ -114,22 +114,18 @@ To use this library you need to ensure you are using the correct version of Reac
 
 ## Custom step marker and step numbers
 
-| | |
-| - | - |
-| It is possible to render default step numbers under your slider and to render custom step component and step marker.<br/>This can be achieved by using: | <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-Default.png" alt="default" /> |
+It is possible to render default step numbers under your slider and to render custom step component and step marker.
+<br/>This can be achieved by using:
 
 ### `renderStepNumber`
 
-| | |
-| - | - |
-|Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track.<br/>Two font sizes are available and they will be selected automatically depending on the overall number of steps. | <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-StepnNumber.png" alt="renderStepNumber" /> |
+Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track.
+<br/>Two font sizes are available and they will be selected automatically depending on the overall number of steps.
 
 ### `StepMarker`
 
-| | |
-| - | - |
-| Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length. <br/>This `StepMarker` prop accepts your custom component and provides it with the following parameters: |  <img width="350" height="auto" src="./.github/Examples/resources/CustomStepMarker-Component.png" alt="stepMarker" /> |
-
+Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length.
+<br/>This `StepMarker` prop accepts your custom component and provides it with the following parameters:
 
 <table>
 <tr>