React Native Input Spinner

react-native-input-spinner

NPM version
npm download
js-standard-style

Github: https://github.com/marcocesarato/react-native-input-spinner

Author: Marco Cesarato

Description

An extendible input number spinner component for react-native.

This component enhance a text input for entering numeric values, with increase and decrease buttons.

Install

npm

npm install react-native-input-spinner --save

Yarn

yarn add react-native-input-spinner

Usage

// Require
include InputSpinner from 'react-native-input-spinner';

// Example
<InputSpinner
	max={10}
	min={2}
	step={2}
	colorMax={"#f04048"}
	colorMin={"#40c5f4"}
	value={this.state.number}
	onChange={(num)=>{console.log(num)}}

Run example

Clone or download repo and after:

cd Example
yarn install # or npm install
expo start

Open Expo Client on your device. Use it to scan the QR code printed by expo start. You may have to wait a minute while your project bundles and loads for the first time.

Screenshots

Handlers

HandlerDescription
onChangeGet the number of the Spinner
onMaxWhen max is reached get max number permitted
onMinWhen min is reached get min number permitted
onIncreaseWhen increase button is clicked get value increased
onDecreaseWhen decrease button is clicked get value decreased

Props

PropertyDescriptionTypeDefaultNote
maxMax number permittedString
Number
0
minMin value permittedString
Number
99
typeType of spinnerString‘int’Can be real or int
precisionMax numbers permitted after commaInteger2
stepValue to increment or decrement the current spinner valueString
Number
1
valueControlled value of the SpinnerString
Number
0
disabledDisable the Spinner or notBooleanfalse
editableSet if input number field is editable or notBooleantrue

Props style

PropertyDescriptionTypeDefaultNote
styleContainer styleObjectCan overwrite width and showBorder
arrowLabels on button will be arrows (< and >) instead of plus and minusBoolean
widthCustom width of the SpinnerNumber150
heightCustom height of the SpinnerNumber50
colorCustom color of the SpinnerString‘#3e525f’
colorMinCustom color of the Spinner when reach min valueString
colorMaxCustom color of the Spinner when reach max valueString
backgroundBackground color of number buttonString’transparent’
roundedUse circular buttonBooleantrue
showBorderShow the border of the Spinner or notBooleanfalseUse with rounded={false}
textColorCustom number colorString‘#000000′
inputStyleInput Style (Text number at middle)Object
fontSizeCustom fontSize of the text input in the SpinnerNumber14
buttonFontSizeCustom fontSize of buttons in the SpinnerNumber14
buttonTextColorCustom color of the button in the SpinnerString‘white’
buttonStyleButton Style (Plus and Minus buttons)Object