DOCSEARCHbyAlgolia
Submit Docs

react-native-step-indicator

repository·master·Indexed 23 days ago

https://github.com/24ark/react-native-step-indicator

A React Native implementation of a step indicator widget compatible with ViewPager, Flatlist, and ListView. It supports horizontal and vertical orientations, custom step and label rendering via renderStepIndicator and renderLabel props, and extensive visual customization through the customStyles prop to control colors, sizes, and stroke widths for different step statuses (current, finished, and unfinished).

Tokens
2K
Snippets
2
Records
10
Agent score
81%

What's inside react-native-step-indicator

  2. Use the StepIndicator component

    master

    The StepIndicator component is used to display a progress indicator for steps. It is compatible with ViewPager and ListView. You must manage the currentPosition in your component state and update it (e.g., via an onPageChange callback from a ViewPager) to reflect the active step.

    import StepIndicator from 'react-native-step-indicator';

const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize:30,
  // ... other style keys
};

// In your component class/function:
// 1. Maintain currentPosition in state
// 2. Pass currentPosition, labels, and customStyles to StepIndicator
// 3. Update state when the user navigates (e.g., onPageChange)

<StepIndicator
     customStyles={customStyles}
     currentPosition={this.state.currentPosition}
     labels={labels}
/>

  3. Customize StepIndicator styles

    master

    You can deeply customize the appearance of the StepIndicator using the customStyles prop. This prop accepts a DefaultStepIndicatorStyles object which controls colors, sizes, stroke widths, and font properties for various states (current, finished, unfinished).

    Commonly used style keys include:

    • stepIndicatorSize: Base size for indicators.
    • currentStepIndicatorSize: Size of the indicator for the active step.
    • stepIndicatorFinishedColor / stepIndicatorUnFinishedColor / stepIndicatorCurrentColor: Colors for the indicator circles.
    • separatorStrokeWidth: Width of the progress bar line.
    • labelSize / labelColor: Styling for the step text labels.
    • labelAlign: Alignment for labels ('center', 'flex-start', 'flex-end', 'stretch', 'baseline').

  6. Configure StepIndicatorProps

    master

    The StepIndicator component accepts the following props to control its behavior and content:

    • currentPosition (number, default: 0): The index of the current active step.
    • stepCount (number, default: 5): The total number of steps in the indicator.
    • direction ('horizontal' | 'vertical', default: 'horizontal'): The orientation of the steps.
    • labels (string[]): An array of strings to be used as labels for each step.
    • customStyles (StepIndicatorStyles): An object containing custom styling configurations.
    • onPress (function): A callback function triggered when a step is tapped. Receives the step index as an argument.
    • renderStepIndicator (function): A function to render custom content inside a step circle. Receives an object with position (number) and stepStatus (string).
    • renderLabel (function): A function to render custom labels for each step. Receives an object with position (number), stepStatus (string), label (string), and currentPosition (number).

  8. Render custom step labels

    master

    To customize how labels are displayed, use the renderLabel prop. This function is called for each label in the labels array and provides context about the specific step being rendered.

    The callback receives:

    • position: The index of the step.
    • stepStatus: The status of the step ('current', 'finished', or 'unfinished').
    • label: The string value from the labels array.
    • currentPosition: The overall current active step index.

  9. Use the StepIndicator component

    master

    The StepIndicator component is the primary entry point for creating step-based progress indicators in React Native. It supports both horizontal and vertical orientations, custom step rendering, and custom label rendering. You can control the current step via currentPosition and handle interactions through the onPress callback.

    Key features:

    • Orientation: Set via direction ('horizontal' or 'vertical').
    • Customization: Use renderStepIndicator to replace the default numbered circles and renderLabel to customize how step labels are displayed.
    • Interactivity: The onPress prop returns the index of the step that was tapped.

  10. Customize StepIndicatorStyles

    master

    Use the customStyles prop to pass a StepIndicatorStyles object for fine-grained control over the indicator's appearance.

    Circle & Stroke Styles

    • stepIndicatorSize (number, default: 30): Size of step indicator circle.
    • currentStepIndicatorSize (number, default: 40): Size of the current step indicator circle.
    • stepStrokeWidth (number, default: 3): Thickness of the stroke around each step.
    • currentStepStrokeWidth (number, default: 3): Thickness of the stroke around the current step.
    • stepStrokeCurrentColor (string, default: '#fe7013'): Stroke color for the current step.
    • stepStrokeFinishedColor (string, default: '#fe7013'): Stroke color for finished steps.
    • stepStrokeUnFinishedColor (string, default: '#aaaaaa'): Stroke color for unfinished steps.

    Separator Styles

    • separatorStrokeWidth (number, default: 2): Stroke thickness of the separator between steps.
    • separatorStrokeUnfinishedWidth (number, default: 0): Stroke thickness of the separator between unfinished steps.
    • separatorStrokeFinishedWidth (number, default: 0): Stroke thickness of the separator between finished steps.
    • separatorFinishedColor (string, default: '#fe7013'): Color of separator for finished items.
    • separatorUnFinishedColor (string, default: '#aaaaaa'): Color of separator for unfinished items.

    Step Indicator (Circle) Colors

    • stepIndicatorFinishedColor (string, default: '#fe7013'): Color of the circle for finished steps.
    • stepIndicatorUnFinishedColor (string, default: '#ffffff'): Color of the circle for unfinished steps.
    • stepIndicatorCurrentColor (string, default: '#ffffff'): Color of the circle for the current step.

    Label Styles

    • labelColor (string, default: '#000000'): Color of the label text.
    • currentStepLabelColor (string, default: '#4aae4f'): Color of the current step label.
    • labelSize (number, default: 13): Font size for the labels.
    • labelAlign ('center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline', default: 'center'): Label alignment.
    • labelFontFamily (string): Label fontFamily for custom fonts.
    • stepIndicatorLabelFontSize (number, default: 15): Font size of the number inside the circle for each step.
    • currentStepIndicatorLabelFontSize (number, default: 15): Font size of the number inside the circle for the current step.
    • stepIndicatorLabelCurrentColor (string, default: '#ffffff'): Color of label for the current step.
    • stepIndicatorLabelFinishedColor (string, default: '#ffffff'): Color of labels that their steps are finished.
    • stepIndicatorLabelUnFinishedColor (string, default: 'rgba(255,255,255,0.5)'): Color of labels that their steps are unfinished.