# react-native-railroad

> A simple railroad component.

Latest version **1.0.7** (published 2022-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-railroad
pnpm add react-native-railroad
yarn add react-native-railroad
bun add react-native-railroad
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-10-22 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Nagendra Limbu |
| Maintainers | js_limbu |
| Keywords | railroad |

## Links

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

## Recent versions

- 1.0.7 (latest) — 2022-10-22
- 1.0.6 — 2017-12-07
- 1.0.5 — 2017-12-06
- 1.0.4 — 2017-12-06
- 1.0.3 — 2017-12-06
- 1.0.2 — 2017-11-29
- 1.0.1 — 2017-11-29
- 1.0.0 — 2017-11-28

## README

# react-native-railroad

#### This is a simple RailRoad component for react-native applications using `<Animated.View />` that can be configured through props.

![](res/railroad.png)

![](res/circular_railroad.png)

## Usage

```
npm install --save react-native-railroad
```
After installing the package simply import it and use it as a RailRoad component. 

RailRoad is a stateless functional component.
```
import { RailRoad } from 'react-native-railroad';

<RailRoad 
    index={2}
    maxIndex={3}
    circleSize={10}
    color="#fbb121"
    shape='circle'
    mode='exclusive'
/>
```

## Props

Props | Default Values | Behaviour
----- | -------------- | --------
maxIndex|4| Total units in the railroad.
color|"#e6e600"| The color to be applied mark the current state in the railroad. 
index|2|It marks the stages in the railroad. For a value of index=2 on a maxIndex value=4, the specified color will be applied to mark the two out of the max four units of the railroad.
shape|'circle'|Currently only two shapes can be used i.e. 'line' and  'circle'.
circleSize|10|Must be provided if shape has been defined as 'circle'.
mode|'exclusive' or 'inclusive'| 'Inclusive' mode will render all the shapes with the provided colors till the index value that marks the current stage in the railroad whereas 'exclusive' mode only colors the shape at index value and the remaining shapes wont be styled.
emptyFill|"#ccc"|If a color is provided the empty shapes will be styled with it or else an opaque style will be applied with a borderWidth of 1 and color value of '#adad85'.

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