diff --git a/README.md b/README.md index ac600e8..a2ea297 100644 --- 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 index 222aeb6..74347e9 100644 --- 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 index e7f7c06..d67d7b3 100644 --- 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 *