- Using NPM
npm install @volkenomakers/progress-steps
- or:
- Using Yarn
yarn add @volkenomakers/progress-steps
import React from "react";
import { View, Button, Text } from "react-native";
import ProgressSteps from "@volkenomakers/progress-steps";
const ProgressStapsApp = () => {
return (
<ProgressSteps
onFinish={() => console.log("finished")}
indicatorColor="#FFF"
indicatorHeight={5}
containerStyle={{ flex: 1, backgroundColor: "#3498db", paddingTop: 24 }}
indicatorContainerStyle={{
backgroundColor: "#3498db",
paddingVertical: 10,
}}
renderEndButton={(onPress) => (
<Button color={"#FFF"} title={"Done"} onPress={onPress} />
)}
renderNextButton={(onPress) => (
<Button color={"#FFF"} title={"Next"} onPress={onPress} />
)}
>
<Step title="First step" />
<Step title="Step2" />
<Step title="Step3" />
<Step title="Last step" />
</ProgressSteps>
);
};
export default ProgressStapsApp;
const Step = ({ title }) => {
return (
<View
style={{
backgroundColor: "#EEE",
alignItems: "center",
justifyContent: "center",
flex: 1,
}}
>
<Text style={{ fontSize: 40 }}>{title}</Text>
</View>
);
};
Property name | Type | Description |
---|---|---|
onFinish | Function | callback to be called when the user click to the end button |
indicatorContainerStyle | Object | Custom style for the container of indicators |
containerStyle | Object | Custom style for the View container |
indicatorColor | String | color of the indicators |
indicatorHeight | Number | height of the indicators |
renderNextButton | Function | render the next button |
renderEndButton | String | render the end button |
ISC Licensed