React Native Step Indicator

A simple react-native Step Indicator widget with custom styling using react-native-reanimated for introducing custom animations, in the manner we have it as a peer dependency, and implemented completely with typescript.

Installation

1npm install rn-steps-indicator react-native-reanimated

Simple Usage

1import StepIndicator from 'rn-steps-indicator';
2
3// ...
4
5const steps = ["This is my label", "This is my other label", "This is the third label"]
6
7const defaultStyles = {
8    completed: {
9        label: {
10            fontSize: 14,
11            fontFamily: 'Roboto'
12        };
13        indicator: {
14            borderWidth: 1,
15            size: 30,
16            color: 'red',
17        };
18        stroke: {};
19    },
20    uncompleted: {
21        label: {
22            fontSize: 14,
23            fontFamily: 'Roboto'
24        };
25        indicator: {
26            borderWidth: 1,
27            size: 30,
28            color: 'blue',
29        };
30        stroke: {
31            style: 'dashed'
32            thickness: 3,
33        };
34    },
35    current: {
36        label: {
37            fontSize: 18,
38            fontFamily: 'Roboto'
39        };
40        indicator: {
41            borderWidth: 3,
42            size: 45,
43            color: 'green',
44        };
45    }
46}
47
48const MyRNStepIndicator = () => {
49    return (
50        <StepIndicator
51            steps={steps}
52            currentStep={currentStep}
53            setCurrentStep={setCurrentStep}
54            customStyles={defaultStyles}
55        />
56    )
57}
58
59export default MyRNStepIndicator;

Customizing Indicator and Label

1import StepIndicator from 'rn-steps-indicator';
2
3// ...
4
5const steps = ["This is my label", "This is my other label", "This is the third label"]
6
7const defaultStyles = {
8    ...
9}
10
11const renderCustomLabel = (step, status) => {
12    switch (status) {
13        case 'current':
14            return (
15            <Text style={styles.customStepIndicatorLabel}>{step}</Text>
16            );
17        case 'completed':
18        case 'uncompleted':
19        default:
20            return null;
21    }
22}
23
24const renderCustomIndicator = (step, status) => {
25    switch (status) {
26        case 'current':
27            return <Ionicons name="analytics-sharp" />;
28        case 'completed':
29            return <Ionicons name="checkmark" />;
30        case 'uncompleted':
31        default:
32            return null;
33    }
34}
35
36const MyRNStepIndicator = () => {
37    return (
38        <StepIndicator
39            steps={steps}
40            currentStep={currentStep}
41            setCurrentStep={setCurrentStep}
42            customStyles={defaultStyles}
43            renderLabel={renderCustomLabel}
44            renderStepIndicator={renderCustomIndicator}
45        />
46    )
47}
48
49export default MyRNStepIndicator;

Step Indicator Properties

Name	Description	Type	Default
horizontal	Used for defining the direction of the step indicator	Boolean	true
steps	Array of steps used in the step indicator	String[]	[]
currentStep	Current position of the steps	Number	0
setCurrentStep	Function for updating the current position	Function (stepPosition: number)	() => {}
renderLabel	Function that receives step and stepStatus as params and expects an element or null being returned as a custom label	Function(step: Step, status: StepStatus)	undefined
renderStepIndicator	Function that receives step and stepStatus as params and expects an element or null being returned as a custom indicator	String[]	true
customStyles	Styles for customizing as the user wishes, the step indicator	StepIndicatorStyles	{}

Custom Styles

Name	Type	Default
completed	StepStyles	{}
current	StepStyles	{}
uncompleted	StepStyles	{}

Completed Styles

Name	Type	Default
label	TextStyle	{}
indicator	IndicatorStyles	{}
stroke	StrokeStyles	{}

Indicator

Name	Type	Default
borderWidth	Number	2
size	Number	30
textStyle	TextStyle	{}
color	String	'skyblue'

Stroke

Name	Type	Default
style	'solid' or 'dashed'	'solid'
dashStyles	DashStyle	{}
thickness	Number	4
color	String	'skyblue'

DashStyles

Name	Type	Default
gap	Number	2
length	Number	4
thickness	Number	1
color	String	'gray'

Current Styles

Name	Type	Default
label	TextStyle	{ fontSize: 18, fontWeight: '700' }
indicator	IndicatorStyles	{}
stroke	StrokeStyles	{}

Indicator

Name	Type	Default
borderWidth	Number	4
size	Number	40
textStyle	TextStyle	{}
color	String	'green'

Uncompleted Styles

Name	Type	Default
label	TextStyle	{}
indicator	IndicatorStyles	{}
stroke	StrokeStyles	{}

Indicator

Name	Type	Default
borderWidth	Number	2
size	Number	30
textStyle	TextStyle	{}
color	String	'gray'

Stroke

Name	Type	Default
style	'solid' or 'dashed'	'solid'
dashStyles	DashStyle	{}
thickness	Number	2
color	String	''gray

DashStyles

Name	Type	Default
gap	Number	2
length	Number	4
thickness	Number	1
color	String	'gray'

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library