# react-native-step

> Create toast messages

Latest version **1.0.2** (published 2021-04-20) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-04-20 |
| First published | 2021-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Mateus Conceição |
| Maintainers | fera765 |

## Links

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

## Dependencies (1)

- [rn-css](https://npm.io/package/rn-css.md) ^1.2.1

## Recent versions

- 1.0.2 (latest) — 2021-04-20
- 1.0.1 — 2021-04-20
- 1.0.0 — 2021-04-20

## README

<h1 align="center">React Native Step</h1>

<p align="center">
  <img alt="Principal linguagem do projeto" src="https://img.shields.io/github/languages/top/fera765/react-native-step?color=56BEB8">

  <img alt="Quantidade de linguagens utilizadas" src="https://img.shields.io/github/languages/count/fera765/react-native-step?color=56BEB8">

  <img alt="Tamanho do repositório" src="https://img.shields.io/github/repo-size/fera765/react-native-step?color=56BEB8">

  <img alt="Licença" src="https://img.shields.io/github/license/fera765/react-native-step?color=56BEB8">

  <img alt="Github issues" src="https://img.shields.io/github/issues/fera765/react-native-step?color=56BEB8" />

  <img alt="Github forks" src="https://img.shields.io/github/forks/fera765/react-native-step?color=56BEB8" />

  <img alt="Github stars" src="https://img.shields.io/github/stars/fera765/react-native-step?color=56BEB8" />
</p>

<!-- Status -->

<!-- <h4 align="center">
	🚧  React Native Step 🚀 Em construção...  🚧
</h4>

<hr> -->



<p align="center">
  <a href="#wrench-installation">Installation</a> &#xa0; | &#xa0;
  <a href="#sparkles-functionalities">Functionalities</a> &#xa0; | &#xa0;
  <a href="#blush-simple-documentation">Documentation</a> &#xa0; | &#xa0;
  <a href="#memo-license">License</a> &#xa0; | &#xa0;
  <a href="#rocket-technology">Technology</a> &#xa0; | &#xa0;
  <a href="https://github.com/fera765" target="_blank">Autor</a>
  &#xa0; | &#xa0;
  <a href="https://github.com/fera765/react-native-step/exemple" target="_blank">Demo</a>
</p>

<p align="center">
<img src="https://raw.githubusercontent.com/fera765/react-native-step/main/demo/exemplo.gif" />
</p>

<br>

## :wrench: Installation ##


```bash
# Install React Native Step

yarn add react-native-step

# or if you prefer

npm install react-native-step



# Install React Native Vector Icons

yarn add react-native-vector-icons

# or if you prefer

npm install react-native-vector-icons

# Any problem with icons, try to link
react-native link react-native-vector-icons
# or
npx react-native link react-native-vector-icons

```

## :sparkles: Functionalities ##

:heavy_check_mark: Creating simple step navigation.

## :blush: Simple documentation ##

```ts
  //Accepts the settings below
  stepPreferences: {
    // The color of the step indicator
    colorPoint: string = '#000',
    // Color icon step indicator
    iconColor: string =  '#fff',
  }

  //The home page
  stepIndex: number = 0

```

## :star: Example ##

```tsx
  import React from 'react';
  import StepIndicator, {IStepPreferences} from 'react-native-step';
  const App = () => {
    const pref: IStepPreferences = {
      colorPoint: '#000',
    }
    return (
      <View style={{flex: 1}}>
        <StepIndicator stepIndex={2} stepPreferences={pref}>
          <Preparing />
          <Sending />
          <HasArrived />
          <Finished />
        </StepIndicator>
      </View>
    )
  };

  export default App;
```

## :rocket: Technology ##

The following tools were used in the construction of the project:

- [Node.js](https://nodejs.org/en/)
- [React Native](https://reactnative.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vector Icons](https://www.npmjs.com/package/react-native-vector-icons/)

## :memo: License ##


This project is under MIT license. See the archive [LICENSE](LICENSE.md) for more details.


Done with :heart: per <a href="https://github.com/fera765" target="_blank">Mateus Conceição</a>

&#xa0;

<a href="#top">Back to the top
</a>

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