From 5d9e456de37043311f0c9174c65d696055881cc4 Mon Sep 17 00:00:00 2001
From: BartoszKlonowski <Bartosz.Klonowski@callstack.com>
Date: Fri, 19 Jan 2024 14:57:34 +0100
Subject: [PATCH] Provide customized steps indicator with LTR support

---
 example/src/Examples.tsx                  | 36 +++++++++++++++++++++++
 package/src/Slider.tsx                    |  1 +
 package/src/components/StepsIndicator.tsx |  5 +++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
index 7dc4f2ec..dcead190 100644
--- a/example/src/Examples.tsx
+++ b/example/src/Examples.tsx
@@ -205,6 +205,36 @@ const SlidingCustomStepsAnotherThumbImageNumbersExample = (
   );
 };
 
+const InvertedSliderWithStepMarker = (props: SliderProps) => {
+  return (
+    <View>
+      <SliderExample
+        {...props}
+        minimumValue={0}
+        maximumValue={15}
+        step={1}
+        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>
+          );
+        }}
+        inverted
+        minimumTrackTintColor={'#123456'}
+        maximumTrackTintColor={'#654321'}
+      />
+    </View>
+  );
+};
+
 const SlidingCustomStepsThumbImageWithNumbersAndDifferentWidth = (
   props: SliderProps,
 ) => {
@@ -466,6 +496,12 @@ export const examples: Props[] = [
       return <SlidingCustomStepsThumbImageWithNumbersAndDifferentWidth />;
     },
   },
+  {
+    title: 'Inverted slider direction with steps number and thumbImage',
+    render() {
+      return <InvertedSliderWithStepMarker />;
+    },
+  },
   {
     title: 'Inverted slider direction',
     render() {
diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx
index 78961a52..7b4d0502 100644
--- a/package/src/Slider.tsx
+++ b/package/src/Slider.tsx
@@ -297,6 +297,7 @@ const SliderComponent = (
           renderStepNumber={localProps.renderStepNumber}
           thumbImage={localProps.thumbImage}
           StepMarker={localProps.StepMarker}
+          isLTR={localProps.inverted}
         />
       ) : null}
       <RCTSliderNativeComponent
diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index 4b5c4602..06c2d763 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -14,6 +14,7 @@ export const StepsIndicator = ({
   StepMarker,
   renderStepNumber,
   thumbImage,
+  isLTR,
 }: {
   options: number[];
   sliderWidth: number;
@@ -21,6 +22,7 @@ export const StepsIndicator = ({
   StepMarker?: FC<MarkerProps>;
   renderStepNumber?: boolean;
   thumbImage?: ImageSource;
+  isLTR?: boolean;
 }) => {
   const stepNumberFontStyle = {
     fontSize:
@@ -28,6 +30,7 @@ export const StepsIndicator = ({
         ? constants.STEP_NUMBER_TEXT_FONT_SMALL
         : constants.STEP_NUMBER_TEXT_FONT_BIG,
   };
+  const values = isLTR ? options.reverse() : options;
   return (
     <View
       pointerEvents="none"
@@ -35,7 +38,7 @@ export const StepsIndicator = ({
         styles.stepsIndicator,
         {marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING},
       ]}>
-      {options.map((i, index) => {
+      {values.map((i, index) => {
         return (
           <Fragment key={index}>
             <View style={styles.stepIndicatorElement}>