Rezg-react-native-progress-stepper NPM

rezg-react-native-progress-stepper

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

Installation

npm install rezg-react-native-progress-stepper

Usage

import Stepper from "rezg-react-native-progress-stepper";

// ...
import React, { useState } from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import Stepper from "rezg-react-native-progress-stepper";

const MyComponent = (props: {
  title: string;
  progressBarVisibility?: boolean;
}) => {
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  );
};

const content = [
  <MyComponent title="Component 1" />,
  <MyComponent title="Component 2" />,
  <MyComponent title="Component 3" />,
  <MyComponent title="Component 4" progressBarVisibility={true} />,
];

const App = () => {
  const [active, setActive] = useState(0);

  return (
    <View
      style={{
        marginVertical: 80,
        marginHorizontal: 20,
      }}
    >
      <Stepper
        active={active}
        content={content}
        onBack={() => setActive((p) => p - 1)}
        onFinish={() => Alert.alert("Finish")}
        onNext={() => setActive((p) => p + 1)}
        formContentStyle={styles.formContentStyle}
        buttonStyle={styles.buttonStyle}
        //? if you want previous button as a arrow, use below two attributes and upload arrow img from folder
        previousButtonArrowStyle={styles.previousButtonArrowStyle}
        previousButtonArrowImg={require("../assets/arrow-circle.png")}
        //? if you want previous button as a text, uncomment below attribute and do not use above arrow attributes
        // previousButtonTextStyle={styles.previousButtonTextStyle}
        //?
        innerStepStyle={styles.innerStepStyle}
        outerStepStyle={styles.outerStepStyle}
        stepNumber={true}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  formContentStyle: {
    top: 20,
    borderRadius: 30,
    height: "85%",
  },
  buttonStyle: {
    backgroundColor: "#173907",
    borderWidth: 0,
    color: "#FFFFFF",
    width: "100%",
    top: -10,
    alignItems: "center",
  },
  previousButtonArrowStyle: {
    position: "absolute",
    top: -60,
    left: -15,
    width: 50,
    height: 50,
    transition: "all .2s",
  },
  previousButtonTextStyle: {
    color: "#173907",
    fontWeight: "bold",
    position: "absolute",
    top: 50,
    left: 10,
    fontSize: 25,
  },
  innerStepStyle: {
    backgroundColor: "#173907",
    width: 23,
    height: 23,
    borderRadius: 30,
  },
  outerStepStyle: {
    borderColor: "#173907",
    borderStyle: "dashed",
    width: 30,
    height: 30,
    borderRadius: 30,
  },
});
export default App;
import React, { useState } from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import Stepper from "rezg-react-native-progress-stepper";

const MyComponent = (props: {
  title: string;
  progressBarVisibility?: boolean;
}) => {
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  );
};

const content = [
  <MyComponent title="Component 1" />,
  <MyComponent title="Component 2" />,
  <MyComponent title="Component 3" />,
  <MyComponent title="Component 4" progressBarVisibility={true} />,
];

const App = () => {
  const [active, setActive] = useState(0);

  return (
    <View
      style={{
        marginVertical: 80,
        marginHorizontal: 20,
      }}
    >
      <Stepper
        active={active}
        content={content}
        onBack={() => setActive((p) => p - 1)}
        onFinish={() => Alert.alert("Finish")}
        onNext={() => setActive((p) => p + 1)}
        formContentStyle={styles.formContentStyle}
        buttonStyle={styles.buttonStyle}
        //? if you want previous button as a arrow, use below two attributes and upload arrow img from folder
        previousButtonArrowStyle={styles.previousButtonArrowStyle}
        previousButtonArrowImg={require("../assets/arrow-circle.png")}
        //? if you want previous button as a text, uncomment below attribute and do not use above arrow attributes
        // previousButtonTextStyle={styles.previousButtonTextStyle}
        //?
        innerStepStyle={styles.innerStepStyle}
        outerStepStyle={styles.outerStepStyle}
        stepNumber={true}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  formContentStyle: {
    top: 20,
    borderRadius: 30,
    height: "85%",
  },
  buttonStyle: {
    backgroundColor: "#173907",
    borderWidth: 0,
    color: "#FFFFFF",
    width: "100%",
    top: -10,
    alignItems: "center",
  },
  previousButtonArrowStyle: {
    position: "absolute",
    top: -60,
    left: -15,
    width: 50,
    height: 50,
    transition: "all .2s",
  },
  previousButtonTextStyle: {
    color: "#173907",
    fontWeight: "bold",
    position: "absolute",
    top: 50,
    left: 10,
    fontSize: 25,
  },
  innerStepStyle: {
    backgroundColor: "#173907",
    width: 23,
    height: 23,
    borderRadius: 30,
  },
  outerStepStyle: {
    borderColor: "#173907",
    borderStyle: "dashed",
    width: 30,
    height: 30,
    borderRadius: 30,
  },
});
export default App;