An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.
Author: Marco Cesarato
Github: https://github.com/marcocesarato/react-native-input-spinner
An extendible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.
Compatible with: Android, iOS, Windows, Web and Expo.
Install the library from npm or yarn just running one of the following command lines:
| npm | yarn | | ----------------------------------------------- | ------------------------------------- | |
npm install react-native-input-spinner --save|
yarn add react-native-input-spinner|
import InputSpinner from "react-native-input-spinner";// Example { console.log(num); }} />;
For more examples check the
Exampledirectory the
App.jsfile
| Default props + Min & Max colors | Not rounded, showBorder, Min & Max colors |
| -------------------------------- | ----------------------------------------- |
| |
|
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.
Check the "Props List" file to have the complete list of component props ordered by name.
| Handler | Description | Func | | ----------------- | ----------------------------------------------------------------------------- | ---------------------- | |
onBlur| Callback that is called when the text input is blurred. | (e) => { ... } | |
onChange| Callback that is called when the number of the Spinner change. | (num) => { ... } | |
onDecrease| Callback that is called when decrease button is clicked get value decreased. | (decreased) => { ... } | |
onFocus| Callback that is called when the text input is focused. | (e) => { ... } | |
onIncrease| Callback that is called when increase button is clicked get value increased . | (increased) => { ... } | |
onKeyPress| Callback that is called when a key is pressed. | (e) => { ... } | |
onLongPress| Callback that is called when holding the right or the left button | Function | |
onMax| Callback that is called when max is reached get max number permitted. | (max) => { ... } | |
onMin| Callback that is called when min is reached get min number permitted. | (min) => { ... } | |
onSubmitEditing| Callback that is called when the text input's submit button is pressed | (e) => { ... } |
| Property | Description | Type | Default | Note | | ---------------------- | ---------------------------------------------------------------------------------------- | ---------------- | ------- | --------------------------------- | |
accelerationDelay| Delay time before start the
onLongPressevent and increase or decrease and continually | Number |
750| | |
append| Custom element before right button | Component | | | |
autofocus| If
true, focuses the input on
componentDidMount. | |
false| | |
disabled| Disable the Spinner or not | Boolean |
false| | |
editable| Set if input number field is editable or not | Boolean |
true| | |
emptied| Set if input can be empty | Boolean |
false| | |
initialValue| Initial value of the Spinner | String
0| | |
inputProps| Customized TextInput Component props | Object |
null| Could overwrite other props | |
leftButtonProps| Customized left button (Touchable Component) props | Object |
null| Could overwrite other props | |
maxLength| Limits the maximum number of characters that can be entered. | Number | | | |
max| Max number permitted | String
null| |
min| Min value permitted | String
0| |
placeholder| The string that will be rendered when text input value is equal to zero | String |
null| | |
placeholderTextColor| The text color of the placeholder string. | String |
null| | |
precision| Max numbers permitted after comma | Integer |
2| |
prepend| Custom element after left button | Component | | |
returnKeyLabel| Sets the return key to the label. Use it instead of
returnKeyType. | String | | | |
returnKeyType| Determines how the return key should look. On Android you can also use
returnKeyLabel| String | | |
rightButtonProps| Customized right button (Touchable Component) props | Object |
null| Could overwrite other props | |
selectTextOnFocus| If
true, all text will automatically be selected on focus. | Bool |
false| | |
selectionColor| The highlight and cursor color of the text input. | String |
null| | |
step| Value to increment or decrement the current spinner value | String
1| |
speed| Speed acceleration ratio of increase or decrease
onLongPress| Number |
7| (value from
1to
10) | |
typingTime| Time before debounce and trigger
onChangeevent | Number |
750| | |
type| Type of spinner | String |
int| Can be
intor
real/
float... | |
value| Controlled value of the Spinner | String
0| |
prependand
append
| Property | Description | Type | Default | Note | | ------------------ | ----------------------------- | ------ | ------- | --------------------------- | |
buttonPressStyle| Button style on Pressed state | Object | | Could overwrite other props | |
buttonStyle| Button style | Object | | Could overwrite other props | |
inputStyle| Text Input style | Object | | Could overwrite other props | |
style| Container style | Object | | Could overwrite other props |
| Property | Description | Type | Default | Note | | ---------------------- | ---------------------------------------------------------- | ------ | ------------- | ---- | |
background| Custom input text background color | String |
transparent| |
buttonPressTextColor| Custom color of the button of the Spinner on Pressed state | String |
#FFFFFF| |
buttonTextColor| Custom color of the labels's button of the Spinner | String |
#FFFFFF| |
colorLeft| Custom color of the Spinner left button | String |
#3E525F| |
colorMax| Custom color of the Spinner when reach max value | String | | |
colorMin| Custom color of the Spinner when reach min value | String | | |
colorPress| Custom color of the Spinner button on touch press | String |
#3E525F| |
colorRight| Custom color of the Spinner right button | String |
#3E525F| |
color| Custom color of the Spinner | String |
#3E525F| |
textColor| Custom input text number color | String |
#000000|
color,
buttonTextColor,
colorPressand
buttonPressTextColorcustom colors
| Property | Description | Type | Default | Note | | ------------ | ------------------------------------- | ------- | ------- | --------------------------- | |
height| Custom height of the Spinner | Number |
50| |
showBorder| Show the border of the Spinner or not | Boolean |
false| Use with
rounded={false}| |
style| Container style | Object | | Could overwrite other props | |
width| Custom width of the Spinner | Number |
150|
| Property | Description | Type | Default | Note | | ----------------------- | ------------------------------------------------------------------ | --------- | -------------- | --------------------------- | |
activeOpacity| Opacity of underlay on pressed button | Number |
0.85| |
arrows| Labels on button will be (< and >) instead of (+ and -) | Boolean |
false| |
buttonFontFamily| Custom fontFamily of buttons of the Spinner | String | System Default | |
buttonFontSize| Custom fontSize of buttons of the Spinner | Number |
14| |
buttonLeftDisabled| Disable left button | Boolean |
false| | |
buttonLeftImage| Custom element on the button left of the spinner | Component | | Could overwrite other props | |
buttonLeftText| Custom text on the button left of the spinner | String | | |
buttonPressLeftImage| Custom element on the button left of the spinner on pressed state | Component | | Could overwrite other props | |
buttonPressRightImage| Custom element on the button right of the spinner on pressed state | Component | | Could overwrite other props | |
buttonPressStyle| Button Style on Pressed state (Plus and Minus buttons) | Object | | |
buttonPressTextColor| Custom color of the button of the Spinner on Pressed state | String |
#FFFFFF| |
buttonRightDisabled| Disable right button | Boolean |
false| | |
buttonRightImage| Custom element on the button right of the spinner | Component | | Could overwrite other props | |
buttonRightText| Custom text on the button right of the spinner | String | | |
buttonStyle| Button Style (Plus and Minus buttons) | Object | | |
buttonTextColor| Custom color of the labels's button of the Spinner | String |
#FFFFFF| |
rounded| Use circular button | Boolean |
true|
| Property | Description | Type | Default | Note | | ------------ | -------------------------------------------------- | ------ | -------------- | ------------------------- | |
background| Custom input text background color | String |
transparent| |
fontFamily| Custom fontFamily of the text input of the Spinner | String | System Default | |
fontSize| Custom fontSize of the text input of the Spinner | Number |
14| |
inputStyle| Text Input style | Object | | Can overwrite other props | |
textColor| Custom input text number color | String |
#000000|
Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.