# react-native-stepper-ui-js > Stepper Component for React Native Latest version **0.1.4** (published 2022-11-25) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-stepper-ui-js pnpm add react-native-stepper-ui-js yarn add react-native-stepper-ui-js bun add react-native-stepper-ui-js ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.4 | | Published | 2022-11-25 | | First published | 2022-11-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 26.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | danilrafiqi | | Maintainers | fez2000 | | Keywords | react-native, ios, android | ## Links - npm: https://www.npmjs.com/package/react-native-stepper-ui-js - Repository: https://github.com/fez2000/react-native-stepper-ui-js - Homepage: https://github.com/fez2000/react-native-stepper-ui-js#readme - Issues: https://github.com/fez2000/react-native-stepper-ui-js/issues - npm.io page: https://npm.io/package/react-native-stepper-ui-js ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 0.1.4 (latest) — 2022-11-25 - 0.1.3 — 2022-11-24 - 0.1.2 — 2022-11-24 - 0.1.1 — 2022-11-24 - 0.1.0 — 2022-11-24 ## README # react-native-stepper-ui-js [![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/) [![Version](http://img.shields.io/npm/v/react-native-stepper-ui.svg)](https://www.npmjs.com/package/react-native-stepper-ui-js) [![Download](http://img.shields.io/npm/dm/react-native-stepper-ui.svg)](https://www.npmjs.com/package/react-native-stepper-ui-js) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/danilrafiqi/react-native-stepper-ui-js/master/LICENSE) A simple and fully customizable React Native component to create stepper ui. - Work for android and IOS - Support typescript - Customizable ## Table of contents - [react-native-stepper-ui-js](#react-native-stepper-ui-js) - [Table of contents](#table-of-contents) - [Example](#example) - [Installation](#installation) - [Usage](#usage) - [Props](#props) ## Example | Example One | Example Two | Example Three | | :---------------------------------------: | :---------------------------------------: | :---------------------------------------: | | ![](assets/react-native-stepper-ui-1.png) | ![](assets/react-native-stepper-ui-2.png) | ![](assets/react-native-stepper-ui-3.png) | ## Installation If using yarn: ``` yarn add react-native-stepper-ui-js ``` If using npm: ``` npm i react-native-stepper-ui-js ``` ## Usage ```javascript import React, { useState } from 'react'; import { Text, View } from 'react-native'; import Stepper from 'react-native-stepper-ui-js'; const MyComponent = (props) => { return ( {props.title} ); }; const content = [ , , , ]; const App = () => { const [active, setActive] = useState(0); return ( setActive((p) => p - 1)} onFinish={() => alert('Finish')} onNext={() => setActive((p) => p + 1)} /> ); }; export default App; ``` ## Props | Name | Type | Description | Default | | ------------------ | :------------: | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `active` | number | index stepper active | `undefined` | | `content` | ReactElement[] | Component that render to stepper | `undefined` | | `onNext` | Function | Function called when the next step button is pressed | `undefined` | | `onBack` | Function | Function called when the back step button is pressed | `undefined` | | `onFinish` | Function | Function called when the finish step button is pressed | `undefined` | | `wrapperStyle?` | ViewStyle | Wrapper component style | `{}` | | `stepStyle?` | ViewStyle | Step component style | `{backgroundColor: '#1976d2', width: 30, height: 30, borderRadius: 30, justifyContent: 'center', alignItems: 'center', opacity: 1}` | | `stepTextStyle?` | TextStyle | Step Text component style | `{color: 'white'}` | | `buttonStyle?` | ViewStyle | Button component style | `{ padding: 10, borderRadius: 4, alignSelf: 'flex-start', marginRight: 10, backgroundColor: '#a1a1a1'}` | | `buttonTextStyle?` | TextStyle | Button Text component style | `{color: 'white'}` | | `showButton?` | boolean | show button | `true` | | `i18n` | object | button lang | `{'back': 'Back','next': 'Next','finish': 'Finish'` | `icons` | object | button set icona | `{ "PENDING":"?", "SUCCESS": "✓", }` | | `pendingState` | boolean | enable pending icon on active step | `true` | | `stepsIcons` | object | step icon default number | `{"1":1}` | --- _Source: https://npm.io/package/react-native-stepper-ui-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._