Change border width of progress step indicators using react-native-progress-steps

Question

I'm trying to set the border width of the progress step indicators when using react-native-progress-steps (https://github.com/colbymillerdev/react-native-progress-steps) – not the width of the connecting line but the border of each step circle. There is no mention of styling of these in the documentation. Any workarounds?

Answer 1

You can override the default border-width and any other styling of StepsIcon by going to

> node_modules\react-native-progress-steps\src\ProgressSteps\StepIcon.js

and at line number 153, override the borderWidth with the value of your choice.

Example:

//StepIcon.js
return (
      <View style={{ flexDirection: 'column', alignItems: 'center' }}>
        {/* below you can see that I have appended the border width of 10*/}
        <View style={{ ...styles.circleStyle, ...{borderWidth: this.props.isActiveStep?10:0} }}> 
          <Text style={styles.circleText}>
            {this.props.isCompletedStep ? (
              <Text style={{ color: this.props.completedCheckColor }}>&#10003;</Text>
            ) : (
              <Text style={styles.stepNum}>{this.props.stepNum}</Text>
            )}
          </Text>
//....
)