react-native-stepper

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-native-stepper

(★ 14)

Material UI Stepper implementation for React Native

react-native-stepper Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Stepper

> Typescript friendly, Material UI Stepper implementation in React Native.

> The aim is to develop with all features of stepper as provided in the [Material UI Guidelines](https://material.io/archive/guidelines/components/steppers.html). But, the v1 does not have all those features. But ready to be used in production as an alternative.

> For the time being, only `vertical` stepper is supported.

> If you are a developer, please contribute to make this project more useful for everyone!

> Create issues for any bugs or feature requests.

View [Demo Here](https://snack.expo.io/@mocioun/react-native-material-ui-stepper)

## Installation

`yarn add@material.ui/react-native-stepper`

`npm i@material.ui/react-native-stepper --save`

## Parameters

**StepperContainer**

| Param       | Type                       | Default     | Description                               |
| ----------- | -------------------------- | ----------- | ----------------------------------------- |
| layout      | 'vertical' or 'horizontal' | `vertical`  | layout                                    |
| themeColor  | string                     | `blue[500]` | theme color                               |
| buttonStyle | object                     | `{}`        | style object that is passed to the button |
| children    | StepView[]                 | `null`      | Step Views                                |

**StepView**

| Param                | Type                   | Default     | Description                                                                                                                                                                                      |
| -------------------- | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| title                | string                 | ''          | Step Title                                                                                                                                                                                       |
| subTitle (optional)  | string                 | ''          | Step Sub Title                                                                                                                                                                                   |
| children             | React.Node             | `null`      | React Node to display as step content                                                                                                                                                            |
| onNext(optional)     | `() => boolean|string` | `() =>true` | if onNext is given this will be called when next button from the step is pressed, and goes to the next step/submit only if this returns true. If it returns a string, it will be shown as error  |
| onPrevious(optional) | `() => boolean|string` | `() =>true` | if onPrevious is given this will be called when back button from the step is pressed, and goes to the previous step only if this returns true. If it returns a string, it will be shown as error |

## Usage

```js
import { StepperContainer, StepView } from '@material.ui/react-native-stepper'
```

```js
<StepperContainer>
  <StepView title='Intro' subTitle='The intro details'>
    <Text>Step 1 Contents</Text>
  </StepView>
  <StepView title='Second' onNext={() => true} subTitle='Name and other details'>
    <Text>Step 2 Contents</Text>
  </StepView>
  <StepView title='Third Step' subTitle='Some lines'>
    <Text>Step 3 Contents …!</Text>
  </StepView>
  <StepView title='Last Step' subTitle='Finishing lines'>
    <Text>Step 4 Contents …!</Text>
  </StepView>
</StepperContainer>
```

## Notes

- If TapOnTitle is allowed, the user can navigate to back to the previous steps with a tap on the title of the step.
- When TapOnTitle is enabled, the back button is hidden by default. But back button will be showing in steps which have the prop of onPrevious available

## License

react-native-stepper

react-native-stepper Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-stepper

react-native-stepper Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README