react-native-stepper-ui


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
2. Installation
3. Usage
4. Props

Example

| Example One | Example Two | Example Three |
| :---------------------------------------: | :---------------------------------------: | :---------------------------------------: |
|  |  |  |

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 (

active={active}
content={content}
onNext={() => 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` |