rezg-react-native-progress-stepper

A simple and fully customizable React Native component to create stepper ui.

Installation

1npm install rezg-react-native-progress-stepper

Usage

1import Stepper from "rezg-react-native-progress-stepper";
2
3// ...
4import React, { useState } from "react";
5import { Alert, StyleSheet, Text, View } from "react-native";
6import Stepper from "rezg-react-native-progress-stepper";
7
8const MyComponent = (props: {
9  title: string;
10  progressBarVisibility?: boolean;
11}) => {
12  return (
13    <View>
14      <Text>{props.title}</Text>
15    </View>
16  );
17};
18
19const content = [
20  <MyComponent title="Component 1" />,
21  <MyComponent title="Component 2" />,
22  <MyComponent title="Component 3" />,
23  <MyComponent title="Component 4" progressBarVisibility={true} />,
24];
25
26const App = () => {
27  const [active, setActive] = useState(0);
28
29  return (
30    <View
31      style={{
32        marginVertical: 80,
33        marginHorizontal: 20,
34      }}
35    >
36      <Stepper
37        active={active}
38        content={content}
39        onBack={() => setActive((p) => p - 1)}
40        onFinish={() => Alert.alert("Finish")}
41        onNext={() => setActive((p) => p + 1)}
42        formContentStyle={styles.formContentStyle}
43        buttonStyle={styles.buttonStyle}
44        //? if you want previous button as a arrow, use below two attributes and upload arrow img from folder
45        previousButtonArrowStyle={styles.previousButtonArrowStyle}
46        previousButtonArrowImg={require("../assets/arrow-circle.png")}
47        //? if you want previous button as a text, uncomment below attribute and do not use above arrow attributes
48        // previousButtonTextStyle={styles.previousButtonTextStyle}
49        //?
50        innerStepStyle={styles.innerStepStyle}
51        outerStepStyle={styles.outerStepStyle}
52        stepNumber={true}
53      />
54    </View>
55  );
56};
57const styles = StyleSheet.create({
58  formContentStyle: {
59    top: 20,
60    borderRadius: 30,
61    height: "85%",
62  },
63  buttonStyle: {
64    backgroundColor: "#173907",
65    borderWidth: 0,
66    color: "#FFFFFF",
67    width: "100%",
68    top: -10,
69    alignItems: "center",
70  },
71  previousButtonArrowStyle: {
72    position: "absolute",
73    top: -60,
74    left: -15,
75    width: 50,
76    height: 50,
77    transition: "all .2s",
78  },
79  previousButtonTextStyle: {
80    color: "#173907",
81    fontWeight: "bold",
82    position: "absolute",
83    top: 50,
84    left: 10,
85    fontSize: 25,
86  },
87  innerStepStyle: {
88    backgroundColor: "#173907",
89    width: 23,
90    height: 23,
91    borderRadius: 30,
92  },
93  outerStepStyle: {
94    borderColor: "#173907",
95    borderStyle: "dashed",
96    width: 30,
97    height: 30,
98    borderRadius: 30,
99  },
100});
101export default App;
102import React, { useState } from "react";
103import { Alert, StyleSheet, Text, View } from "react-native";
104import Stepper from "rezg-react-native-progress-stepper";
105
106const MyComponent = (props: {
107  title: string;
108  progressBarVisibility?: boolean;
109}) => {
110  return (
111    <View>
112      <Text>{props.title}</Text>
113    </View>
114  );
115};
116
117const content = [
118  <MyComponent title="Component 1" />,
119  <MyComponent title="Component 2" />,
120  <MyComponent title="Component 3" />,
121  <MyComponent title="Component 4" progressBarVisibility={true} />,
122];
123
124const App = () => {
125  const [active, setActive] = useState(0);
126
127  return (
128    <View
129      style={{
130        marginVertical: 80,
131        marginHorizontal: 20,
132      }}
133    >
134      <Stepper
135        active={active}
136        content={content}
137        onBack={() => setActive((p) => p - 1)}
138        onFinish={() => Alert.alert("Finish")}
139        onNext={() => setActive((p) => p + 1)}
140        formContentStyle={styles.formContentStyle}
141        buttonStyle={styles.buttonStyle}
142        //? if you want previous button as a arrow, use below two attributes and upload arrow img from folder
143        previousButtonArrowStyle={styles.previousButtonArrowStyle}
144        previousButtonArrowImg={require("../assets/arrow-circle.png")}
145        //? if you want previous button as a text, uncomment below attribute and do not use above arrow attributes
146        // previousButtonTextStyle={styles.previousButtonTextStyle}
147        //?
148        innerStepStyle={styles.innerStepStyle}
149        outerStepStyle={styles.outerStepStyle}
150        stepNumber={true}
151      />
152    </View>
153  );
154};
155const styles = StyleSheet.create({
156  formContentStyle: {
157    top: 20,
158    borderRadius: 30,
159    height: "85%",
160  },
161  buttonStyle: {
162    backgroundColor: "#173907",
163    borderWidth: 0,
164    color: "#FFFFFF",
165    width: "100%",
166    top: -10,
167    alignItems: "center",
168  },
169  previousButtonArrowStyle: {
170    position: "absolute",
171    top: -60,
172    left: -15,
173    width: 50,
174    height: 50,
175    transition: "all .2s",
176  },
177  previousButtonTextStyle: {
178    color: "#173907",
179    fontWeight: "bold",
180    position: "absolute",
181    top: 50,
182    left: 10,
183    fontSize: 25,
184  },
185  innerStepStyle: {
186    backgroundColor: "#173907",
187    width: 23,
188    height: 23,
189    borderRadius: 30,
190  },
191  outerStepStyle: {
192    borderColor: "#173907",
193    borderStyle: "dashed",
194    width: 30,
195    height: 30,
196    borderRadius: 30,
197  },
198});
199export default App;
200
201
202

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

chore: initial commit