feat: add prop to allow switch position between indicator and label

24ark · Sep 11, 2020 · 5a2c6ae · 5a2c6ae
1 parent 1df202c
commit 5a2c6ae
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ onPageChange(position){
 | `currentPosition` | Number  | Current position in steps | 0
 | ```stepCount``` | Number  | Number of steps | 5
 | ```direction``` | String  | Orientation(i.e. horizontal,vertical) | horizontal
+| ```reverseLabel``` | Boolean  | Swap position between indicator and label | false
 | ```customStyles``` | Object  | Custom styling | {}
 | ```labels``` | Array  | Labels for each step | null
 | `onPress` | Function (position: Number) | Function called when a step is pressed | null

diff --git a/src/index.tsx b/src/index.tsx
@@ -82,6 +82,7 @@ const StepIndicator = ({
   currentPosition = 0,
   stepCount = 5,
   direction = 'horizontal',
+  reverseLabel = false,
   customStyles: customStylesFromProps = defaultStyles,
   labels = [],
   onPress,
@@ -420,8 +421,8 @@ const StepIndicator = ({
       style={[
         styles.container,
         direction === 'vertical'
-          ? { flexDirection: 'row', flex: 1 }
-          : { flexDirection: 'column' },
+          ? { flexDirection: reverseLabel ? 'row-reverse' : 'row', flex: 1 }
+          : { flexDirection: reverseLabel ? 'column-reverse' : 'column' },
       ]}
     >
       {width !== 0 && (

diff --git a/src/types.ts b/src/types.ts
@@ -267,6 +267,15 @@ export interface StepIndicatorProps {
    */
   direction?: 'horizontal' | 'vertical';
 
+  /**
+   * Reverse label and indicator
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof StepIndicatorProps
+   */
+  reverseLabel?: boolean;
+
   /**
    * Styles for the component
    *