# react-native-customizable-stepper

> A highly customizable stepper component for react-native

Latest version **0.1.2** (published 2021-10-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-customizable-stepper
pnpm add react-native-customizable-stepper
yarn add react-native-customizable-stepper
bun add react-native-customizable-stepper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-10-03 |
| First published | 2021-10-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 69.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Shlok Agarwalla |
| Maintainers | shlokagarwal |
| Keywords | react-native-stepper, stepper-material-react-native, react-native, stepper |

## Links

- npm: https://www.npmjs.com/package/react-native-customizable-stepper
- Repository: https://github.com/shlokagarwal/react-native-customizable-stepper
- Homepage: https://github.com/shlokagarwal/react-native-customizable-stepper#readme
- Issues: https://github.com/shlokagarwal/react-native-customizable-stepper/issues
- npm.io page: https://npm.io/package/react-native-customizable-stepper

## Dependencies (1)

- [rn-tooltip](https://npm.io/package/rn-tooltip.md) ^3.0.1

## Recent versions

- 0.1.2 (latest) — 2021-10-03
- 0.1.1 — 2021-10-03
- 0.1.0 — 2021-10-03

## README

# react-native-customizable-stepper
A highly customizable stepper component for react-native

![Alt text](Screenshot.png "Screenshot")

## Installation
```
npm i react-native-customizable-stepper
```

## Usage Snippet

Make sure the images imported are single-colored png files 

```
import step1Icon from '../../../assets/img/step1.png';
import step2Icon from '../../../assets/img/step2.png';
import step3Icon from '../../../assets/img/step3.png';
import step4Icon from '../../../assets/img/step4.png';

const stepDetailsList = [
    { stepName: "Order confirmed", iconImg: step1Icon },
    { stepName: "Order accepted", iconImg: step2Icon },
    { stepName: "Driver assigned", iconImg: step3Icon },
    { stepName: "Order delivered", iconImg: step4Icon },
]
```
```
<View style={{ height: 50, width: 100 }}>
    <Stepper 
        successColor="#339933" 
        failedColor="#ff0000" 
        numberOfSteps={4} 
        lastActivated={2} 
        lastFailed={3} 
        stepDetailsList={stepDetailsList} 
        hoverBackground="grey" hoverTextColor="white"
    />
</View>
```

# Props

## successColor

The color which should be used to highlight the successful steps

## failedColor

The color which should be used to highlight the failed steps

## numberOfSteps

The number of steps required to display. The library automatically utilises the complete space to give the optimum size for each step bubble

## lastActivated

Last Successful Step. If there are 4 steps and the last successful step was 2, please enter 2

## hoverBackground
Text hover bubble background color that needs to be displayed on touch of the step

## hoverTextColor
Text color on the hover

## lastFailedStep

Last Failed Step. If there are 4 steps and the last successful step was 2, and the last failed step was 3, please enter 3.
If there are no successful steps, it will still work

## stepDetailsList

This property can be used to give an array of details for each step, each of which includes

### stepName
Name of the step, which should be shown upon hover
### iconImg
Pass the image/icon to be displayed inside the step bubble here

---
_Source: https://npm.io/package/react-native-customizable-stepper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._