24ark/react-native-step-indicatorPublic

NotificationsYou must be signed in to change notification settings
Fork312
Star1.5k

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

License

Apache-2.0 license

1.5k stars 312 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.circleci		.circleci
art		art
example		example
src		src
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

react-native-step-indicator

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

Features

Can be used with ViewPager and Listview
Custom Styling
Supports vertical and horizontal orientation
Supports animation between steps

example/src/HorizontalStepIndicator.tsx example/src/VerticalStepIndicator.tsx

Example

$ yarn$ yarn example ios   // For ios$ yarn example android   // For Android

Installation

npm install react-native-step-indicator --save

yarn add react-native-step-indicator

Usage

importStepIndicatorfrom'react-native-step-indicator';constlabels=["Cart","Delivery Address","Order Summary","Payment Method","Track"];constcustomStyles={stepIndicatorSize:25,currentStepIndicatorSize:30,separatorStrokeWidth:2,currentStepStrokeWidth:3,stepStrokeCurrentColor:'#fe7013',stepStrokeWidth:3,stepStrokeFinishedColor:'#fe7013',stepStrokeUnFinishedColor:'#aaaaaa',separatorFinishedColor:'#fe7013',separatorUnFinishedColor:'#aaaaaa',stepIndicatorFinishedColor:'#fe7013',stepIndicatorUnFinishedColor:'#ffffff',stepIndicatorCurrentColor:'#ffffff',stepIndicatorLabelFontSize:13,currentStepIndicatorLabelFontSize:13,stepIndicatorLabelCurrentColor:'#fe7013',stepIndicatorLabelFinishedColor:'#ffffff',stepIndicatorLabelUnFinishedColor:'#aaaaaa',labelColor:'#999999',labelSize:13,currentStepLabelColor:'#fe7013'}constructor(){this.state={currentPosition:0}}render(){return(<StepIndicatorcustomStyles={customStyles}currentPosition={this.state.currentPosition}labels={labels}/>)}onPageChange(position){this.setState({currentPosition:position});}//...

Properties

Name	Type	Description	Default
`currentPosition`	Number	Current position in steps	0
`stepCount`	Number	Number of steps	5
`direction`	String	Orientation(i.e. horizontal,vertical)	horizontal
`customStyles`	Object	Custom styling	{}
`labels`	Array	Labels for each step	null
`onPress`	Function (position: Number)	Function called when a step is pressed	null
`renderStepIndicator`	Function (position: Number, stepStatus: String)	Use this to render custom content inside step	null
`renderLabel`	Function (position: Number, stepStatus: String, label: String, currentPosition: Number)	Use this to render custom label for each step	null

Custom Styles

Name	Type	Default
`stepIndicatorSize`	Number	30
`currentStepIndicatorSize`	Number	40
`separatorStrokeWidth`	Number	3
`separatorStrokeUnfinishedWidth`	Number	0
`separatorStrokeFinishedWidth`	Number	0
`stepStrokeWidth`	Number	0
`currentStepStrokeWidth`	Number	5
`stepStrokeCurrentColor`	String	'#4aae4f'
`stepStrokeFinishedColor`	String	'#4aae4f'
`stepStrokeUnFinishedColor`	String	'#4aae4f'
`separatorFinishedColor`	String	'#4aae4f'
`separatorUnFinishedColor`	String	'#a4d4a5'
`stepIndicatorFinishedColor`	String	'#4aae4f'
`stepIndicatorUnFinishedColor`	String	'#a4d4a5'
`stepIndicatorCurrentColor`	String	'#ffffff'
`stepIndicatorLabelFontSize`	Number	15
`currentStepIndicatorLabelFontSize`	Number	15
`stepIndicatorLabelCurrentColor`	String	'#000000'
`stepIndicatorLabelFinishedColor`	String	'#ffffff'
`stepIndicatorLabelUnFinishedColor`	String	'rgba(255,255,255,0.5)'
`labelColor`	String	'#000000'
`currentStepLabelColor`	String	'#4aae4f'
`labelSize`	Number	13
`labelAlign`	String	'center'
`labelFontFamily`	String