@volkenomakers/progress-steps

progress-steps

Add it to your project

• Using NPM npm install @volkenomakers/progress-steps
• or:
• Using Yarn yarn add @volkenomakers/progress-steps

Usage

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>
  );
};

Properties

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