# rna-steps

> React Native Steps Component

Latest version **1.0.8** (published 2018-10-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install rna-steps
pnpm add rna-steps
yarn add rna-steps
bun add rna-steps
```

## 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.8 |
| Published | 2018-10-24 |
| First published | 2018-10-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | htoniv |
| Maintainers | htoniv |

## Links

- npm: https://www.npmjs.com/package/rna-steps
- Repository: https://github.com/vinothkumarrenganathan/rna-steps
- Homepage: https://github.com/vinothkumarrenganathan/rna-steps#readme
- Issues: https://github.com/vinothkumarrenganathan/rna-steps/issues
- npm.io page: https://npm.io/package/rna-steps

## Recent versions

- 1.0.8 (latest) — 2018-10-24
- 1.0.7 — 2018-10-23
- 1.0.6 — 2018-10-22
- 1.0.5 — 2018-10-19
- 1.0.4 — 2018-10-17
- 1.0.3 — 2018-10-17
- 1.0.2 — 2018-10-17
- 1.0.1 — 2018-10-17
- 1.0.0 — 2018-10-16

## README

# rna-steps

React-Native steps component.

## Installation and Basic Usage

```bash
npm install --save rna-steps
```

## For multiple select
```jsx
import ReactSteps, { Step } from 'rna-steps';

// Based upon values given in the array the corresponding index Step component will be expanded.  

state = {
    currentPosition: [0, 2]
}

componentWillMount() {
    Step(this.props)
}

// Handling currentPosition based on onPress event
handleChange = (value) => {
    this.setState({currentPosition: value})
}

<ReactSteps currentPosition={this.state.currentPosition} multiple={true} onHandleChange={this.handleChange} circleBgColor="#299DC6" dashedBorderColor="#BCBCBC">
    <Step title="First">
        <Text>Hello</Text>
        <Text>World</Text>
    </Step>
    <Step title="Second">
        <TextInput style={{height: 40}} placeholder="Something Type here"/>
    </Step>
    <Step title="Third">
        <Text>Some text goes here</Text>
    </Step>
</ReactSteps>
```

## For single select
```jsx
import ReactSteps, { Step } from 'rna-steps';

// Based upon values given the corresponding index `Step` component will be expanded.  

state = {
    currentPosition: 1
}

componentWillMount() {
    Step(this.props)
}

// Handling currentPosition based on onPress event
handleChange = (value) => {
    this.setState({currentPosition: value})
}

<ReactSteps currentPosition={this.state.currentPosition} multiple={false} onHandleChange={this.handleChange} circleBgColor="#299DC6" dashedBorderColor="#BCBCBC">
    <Step title="First">
        <Text>Hello</Text>
        <Text>World</Text>
    </Step>
    <Step title="Second">
        <TextInput style={{height: 40}} placeholder="Something Type here"/>
    </Step>
    <Step title="Third">
        <Text>Some text goes here</Text>
    </Step>
</ReactSteps>
```

## Screenshot attached
<img src="https://github.com/vinothkumarrenganathan/rna-steps/blob/master/images/rna-steps.gif" alt="Built for react-native" width="280" height="500">

## Development for environments 
### For Android
```bash
react-native run-android
```

### For Ios
```bash
react-native run-ios
```

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