Become an AceSign inSign up
marcocesarato/ react-native-input-spinner (v1.4.10) 19 days ago
Android numeric JavaScript iOS React Native stepper reactnative React spinner
View on GitHub
Need help with react-native-input-spinner?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

marcocesarato
134 Stars 14 Forks GNU General Public License v3.0 161 Commits 5 Opened issues

Description

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.

Services available

!
?

Need anything else?

Contributors list

Marco Cesarato marcocesarato
# 178,869
React N...
React
Android
numeric
 143 commits
Scott Spuler OneHatRepo
# 626,767
JavaScr...
React
cypress
React N...
 1 commit
Giannis Macheras LuckyLuke19
# 61,619
Objecti...
C
React
Shell
 1 commit
Indri Muska indrimuska
# 63,764
CSS
TypeScr...
Shell
timepic...
 1 commit
Gabriel Fabrício fabriond
# 267,572
Groovy
Kotlin
Shell
React N...
 1 commit
Imgbot ImgBotApp
# 2,836
Flutter
assembl...
spotify
gc
 1 commit

NPM version npm Package Quality js-prittier-style Compatibility

NPM

If this project has helped you out, please support us with a star 🌟

📘 Description

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

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
|

💻 Usage

import InputSpinner from "react-native-input-spinner";


// Example
 {
        console.log(num);
    }}
/>;

For more examples check the 

Example
directory the 
App.js
file

🎨 Screenshots

| Default props + Min & Max colors | Not rounded, showBorder, Min & Max colors | | -------------------------------- | ----------------------------------------- | | | |

High customization

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

Example app

💡 Props

Check the "Props List" file to have the complete list of component props ordered by name.

Structure

Handlers

| 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) => { ... } |

Props

| Property | Description | Type | Default | Note | | ---------------------- | ---------------------------------------------------------------------------------------- | ---------------- | ------- | --------------------------------- | | 

accelerationDelay
| Delay time before start the 
onLongPress
event 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
Number | 
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
Number | 
null
| | 
min
| Min value permitted | String
Number | 
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
Number | 
1
| | 
speed
| Speed acceleration ratio of increase or decrease 
onLongPress
| Number | 
7
| (value from 
1
to 
10
) | | 
typingTime
| Time before debounce and trigger 
onChange
event | Number | 
750
| | | 
type
| Type of spinner | String | 
int
| Can be 
int
or 
real
/
float
... | | 
value
| Controlled value of the Spinner | String
Number | 
0
| |

Screenshots

Description
  • Top spinner with a child
  • Bottom spinner with 
    prepend
    and 
    append

Props Styles

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

Props Colors

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

Screenshots

Description
  • Spinner with 
    color
    , 
    buttonTextColor
    , 
    colorPress
    and 
    buttonPressTextColor
    custom colors

Props Container Style

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

Props Buttons Style

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

Props Text Input Style

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

🤔 How to contribute

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.