Provide customized steps indicator with LTR support

callstack · Jan 19, 2024 · 5d9e456 · 5d9e456
1 parent 9c40711
commit 5d9e456
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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
@@ -14,28 +14,31 @@ export const StepsIndicator = ({
   StepMarker,
   renderStepNumber,
   thumbImage,
+  isLTR,
 }: {
   options: number[];
   sliderWidth: number;
   currentValue?: number;
   StepMarker?: FC<MarkerProps>;
   renderStepNumber?: boolean;
   thumbImage?: ImageSource;
+  isLTR?: boolean;
 }) => {
   const stepNumberFontStyle = {
     fontSize:
       options.length > 9
         ? constants.STEP_NUMBER_TEXT_FONT_SMALL
         : constants.STEP_NUMBER_TEXT_FONT_BIG,
   };
+  const values = isLTR ? options.reverse() : options;
   return (
     <View
       pointerEvents="none"
       style={[
         styles.stepsIndicator,
         {marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING},
       ]}>
-      {options.map((i, index) => {
+      {values.map((i, index) => {
         return (
           <Fragment key={index}>
             <View style={styles.stepIndicatorElement}>