Material UI Stepper implementation for React Native

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. 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

Installation

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

or

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
onPrevious(optional)	`() => boolean	string`	() =>true

Usage

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

<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

Download Details:

Author: vazra

Source Code: https://github.com/vazra/react-native-stepper

#react-native #react #mobile-apps