Skip to content

hannigand/react-native-ui-stepper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-ui-stepper

npm version npm version

Examples

A react-native component which mirrors the functionality of UIStepper from iOS.

A stepper control provides a user interface for incrementing or decrementing a value. A stepper displays two buttons, one with a minus (“–”) symbol and one with a plus (“+”) symbol.

You can now configure your react-native-ui-stepper to be vertical

Installation

npm i react-native-ui-stepper

Usage

import UIStepper from 'react-native-ui-stepper';
...
setValue = (value) => {
  // do something with value
}
render() {
  return (
      <UIStepper
        onValueChange={(value) => { this.setValue(value) }}
      />
  )
}

You can now use custom images, from your local file system or from the Internet. See Props for more details.

Demo

Demo example

Props

Name Type Description Default
initialValue Number Start value 0
value Number Forcibly override the value 0
minimumValue Number Minimum value 0
maximumValue Number Maximum value 100
steps Number Increment value 1
displayValue Boolean Displays the stepper value between the increment and decrement button false
incrementImage String or Number Override the default increment image require('./assets/increment.png')
decrementImage String or Number Override the default decrement image require('./assets/decrement.png')
wraps Boolean When set to true, incrementing beyond the maximumValue will set the value to minimumValue and vice versa false
tintColor String Changes the color of all the non-transparent pixels to the tintColor. #0076FF
overrideTintColor Boolean When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. false
backgroundColor String Background color transparent
vertical Boolean Display a vertical UI Stepper. You must specify a height and a width. false
displayDecrementFirst Boolean Display the decrement button above the increment button, only works when vertical is true false
width Number Width 94
height Number Height 29
textColor String The desired text colour which will be used when displayValue is set to true #0076FF
fontFamily String The font family used on the value displayed when displayValue is set to true System
fontSize Number The font size used on the value displayed when displayValue is set to true 15
borderColor String Color used for the border #0076FF
borderWidth Number Width of the border 1
borderRadius Number Radius of the border 4
onValueChange Function Executed when the value changes. The value is passed as a parameter null
onIncrement Function Executed when the User clicks the increment (+) button. The value is passed as a parameter null
onDecrement Function Executed when the User clicks the decrement (+) button. The value is passed as a parameter null
onMinimumReached Function Executed when the minimumValue is reached. The value is passed as a parameter null
onMaximumReached Function Executed when the maximumValue is reached. The value is passed as a parameter null
innerRef Function A reference to the rendered UIStepper. You can use this to gain access to class-based methods. increment(), decrement(), resetValue() and setValue() are most commonly used null

Contributing

There are no requirements for contributing to the react-native-ui-stepper package. You can browse or raise issues that you are would like to contribute to.

  1. Fork the repository on Github
  2. Clone the project
  3. Commit changes to your forked branch
  4. Push your changes to your branch
  5. Submit a Pull Request so that it can be merged into react-native-ui-stepper

Run Example

$ git clone https://github.com/hannigand/react-native-ui-stepper.git
$ cd example
$ yarn # or npm install
$ react-native run-ios