jsx - Unable to get renderStepIndicator working on react-native-step-indicator

Question

I think I am not understanding the documentation correctly.

The documentation says: that is takes a Function that return a position: Number, or a stepStatus: which takes a String to render custom content inside step

My goal is to render a check mark instead of a number as it is by default. I tried to return a string of 'test' and it does not work.

        <StepIndicator
            customStyles={customStyles}
            currentPosition={this.state.currentPosition}
            stepCount={this.state.stepCount}
            renderStepIndicator={() => {
            this.renderStepIndicator();
            }}
            labels={labels}
          />

and this is the function that return a string

     renderStepIndicator() {
         return 'test';
      }

I am not sure what I am missing here. also I want to return an icon of checkmark. I have seen people doin git but I am not sure how if this only takes a string or an integer.

Answer 1

Here this function returns two parameters step position and step status. You can use this function like this,

<StepIndicator
    customStyles={customStyles}
    currentPosition={this.state.currentPosition}
    stepCount={this.state.stepCount}
    renderStepIndicator={(stepPosition,stepStatus) => {
       this.renderStepIndicator(stepPosition,stepStatus);
    }}
    labels={labels}
 />

And the render function is like,

renderStepIndicator(stepPosition, stepStatus) {
  return <Icon name={"check"} size={20} color={stepStatus === 'finished' ? "green" : "gray"} /> ;
}

This function render check icon. If you step was complete it show green check otherwise gray check.

For more details you can check this example,

https://github.com/24ark/react-native-step-indicator/blob/master/example/src/HorizontalStepIndicator.tsx