# react-native-stepper-ui [![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) [![Download](http://img.shields.io/npm/dm/react-native-stepper-ui.svg)](https://www.npmjs.com/package/react-native-stepper-ui) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/danilrafiqi/react-native-stepper-ui/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 1. [Example](#example) 2. [Installation](#installation) 3. [Usage](#usage) 4. [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 ``` If using npm: ``` npm i react-native-stepper-ui ``` ## Usage ```javascript import React, { useState } from "react"; import Stepper from "react-native-stepper-ui"; import { View, Alert, Text } from "react-native"; const MyComponent = (props) => { return ( {props.title} ); }; const content = [ , , , ]; const App = () => { const [active, setActive] = useState(0); return ( setActive((p) => p + 1)} onBack={() => setActive((p) => p - 1)} onFinish={() => Alert.alert("Finish")} /> ); }; 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` |

	Stars	Issues	Version	Updated	Created
react-native-gifted-listview			0.0.15	8 years ago	9 years ago
react-native-step-indicator	1,398	84	1.0.3	4 years ago	7 years ago
react-native-stepper-ui			0.0.9	4 years ago	4 years ago

react-native-gifted-listview vs react-native-step-indicator vs react-native-stepper-ui

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past