{"id":13472702,"url":"https://github.com/marcocesarato/react-native-input-spinner","last_synced_at":"2025-05-16T08:03:07.736Z","repository":{"id":43580283,"uuid":"190638283","full_name":"marcocesarato/react-native-input-spinner","owner":"marcocesarato","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.","archived":false,"fork":false,"pushed_at":"2024-03-21T02:57:06.000Z","size":2029,"stargazers_count":413,"open_issues_count":21,"forks_count":34,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-10T20:01:48.128Z","etag":null,"topics":["android","component","decimal","expo","float","input","int","ios","number","numeric","react","react-native","reactnative","selector","spinner","step","stepper"],"latest_commit_sha":null,"homepage":"https://marcocesarato.github.io/react-native-input-spinner/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcocesarato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-06T19:30:24.000Z","updated_at":"2025-05-03T08:23:25.000Z","dependencies_parsed_at":"2024-01-16T07:22:32.833Z","dependency_job_id":"d8918c80-0c45-48d0-aa17-b5286673706e","html_url":"https://github.com/marcocesarato/react-native-input-spinner","commit_stats":{"total_commits":276,"total_committers":16,"mean_commits":17.25,"dds":0.5217391304347826,"last_synced_commit":"bff7bcef78d59d86f70bd5767486350adf7e4283"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcocesarato","download_url":"https://codeload.github.com/marcocesarato/react-native-input-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253474206,"owners_count":21914227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","component","decimal","expo","float","input","int","ios","number","numeric","react","react-native","reactnative","selector","spinner","step","stepper"],"created_at":"2024-07-31T16:00:57.199Z","updated_at":"2025-05-16T08:03:07.712Z","avatar_url":"https://github.com/marcocesarato.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"images/logo_full.png\" width=\"100%\"/\u003e\n\n### If this project has helped you out, please support us with a star 🌟\n\n\u003cbr\u003e\n\n[![NPM version](http://img.shields.io/npm/v/react-native-input-spinner.svg?style=for-the-badge)](http://npmjs.org/package/react-native-input-spinner)\n[![Package Quality](https://npm.packagequality.com/shield/react-native-input-spinner.svg?style=for-the-badge)](https://packagequality.com/#?package=react-native-input-spinner)\n[![js-prittier-style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://prettier.io/)\n[![Compatibility](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20expo-blue.svg?style=for-the-badge)](http://npmjs.org/package/react-native-input-spinner)\n\n\u003c/div\u003e\n\n## 📘 Description\n\n**Author:** Marco Cesarato\n\n**Github:** https://github.com/marcocesarato/react-native-input-spinner\n\nAn extendible input number spinner component for react-native highly customizable.\nThis component enhance a text input for entering numeric values, with increase and decrease buttons.\n\nTry it on the published demo web app: [https://marcocesarato.github.io/react-native-input-spinner/](https://marcocesarato.github.io/react-native-input-spinner/)\n\n_Compatible with: Android, iOS, Windows, Web and Expo._\n\n## 📖 Install\n\nInstall the library from npm or yarn just running one of the following command lines:\n\n| npm                                             | yarn                                  |\n| ----------------------------------------------- | ------------------------------------- |\n| `npm install react-native-input-spinner --save` | `yarn add react-native-input-spinner` |\n\n[![NPM](https://nodei.co/npm/react-native-input-spinner.png?mini=true)](https://nodei.co/npm/react-native-input-spinner/)\n\n## 💻 Usage\n\n```javascript\nimport InputSpinner from \"react-native-input-spinner\";\n\n// Example\n\u003cInputSpinner\n\tmax={10}\n\tmin={2}\n\tstep={2}\n\tcolorMax={\"#f04048\"}\n\tcolorMin={\"#40c5f4\"}\n\tvalue={this.state.number}\n\tonChange={(num) =\u003e {\n\t\tconsole.log(num);\n\t}}\n/\u003e;\n```\n\nFor more examples check the `Example` directory the `App.js` file\n\n## 🎨 Screenshots\n\n| Default props + Min \u0026 Max colors | Not rounded, showBorder, Min \u0026 Max colors |\n| -------------------------------- | ----------------------------------------- |\n| \u003cimg src=\"images/example.png\" /\u003e | \u003cimg src=\"images/example_2.png\" /\u003e        |\n\n### High customization\n\n| Skins                                     | Customization                          |\n| ----------------------------------------- | -------------------------------------- |\n| \u003cimg src=\"images/skins.png\" width=\"500\"/\u003e | \u003cimg src=\"images/customization.png\" /\u003e |\n\n## ⚡️ Example\n\n### Web\n\n[https://marcocesarato.github.io/react-native-input-spinner/](https://marcocesarato.github.io/react-native-input-spinner/)\n\n### Expo\n\nClone or download repo and after:\n\n```shell\ncd Example\nyarn install # or npm install\nexpo start\n```\n\nOpen 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.\n\n[Example App Screenshot](images/example_app.png)\n\n## 💡 Props\n\nCheck the \"[Props List](PROPS.md)\" file to have the complete list of component props ordered by name.\n\n### Structure\n\n\u003cimg src=\"images/structure.png\" /\u003e\n\n### Handlers\n\n| Handler           | Description                                                                   | Func                   |\n| ----------------- | ----------------------------------------------------------------------------- | ---------------------- |\n| `onBlur`          | Callback that is called when the text input is blurred.                       | (e) =\u003e { ... }         |\n| `onChange`        | Callback that is called when the number of the Spinner change.                | (num) =\u003e { ... }       |\n| `onDecrease`      | Callback that is called when decrease button is clicked get value decreased.  | (decreased) =\u003e { ... } |\n| `onFocus`         | Callback that is called when the text input is focused.                       | (e) =\u003e { ... }         |\n| `onIncrease`      | Callback that is called when increase button is clicked get value increased . | (increased) =\u003e { ... } |\n| `onKeyPress`      | Callback that is called when a key is pressed.                                | (e) =\u003e { ... }         |\n| `onLongPress`     | Callback that is called when holding the right or the left button             | Function               |\n| `onMax`           | Callback that is called when max is reached get max number permitted.         | (max) =\u003e { ... }       |\n| `onMin`           | Callback that is called when min is reached get min number permitted.         | (min) =\u003e { ... }       |\n| `onSubmitEditing` | Callback that is called when the text input's submit button is pressed        | (e) =\u003e { ... }         |\n\n### Props\n\n| Property               | Description                                                                                                                    | Type             | Default | Note                              |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ------- | --------------------------------- |\n| `accelerationDelay`    | Delay time before start the `onLongPress` event and increase or decrease and continually                                       | Number           | `1000`  |                                   |\n| `append`               | Custom element before right button                                                                                             | Component        |         |                                   |\n| `autoFocus`            | If `true`, focuses the input on `componentDidMount`.                                                                           |                  | `false` |                                   |\n| `continuity`           | On min value is reached next decrease value will be the max value, if max is reached next increase value will be the min value | Boolean          | `false` |                                   |\n| `disabled`             | Disable the Spinner or not                                                                                                     | Boolean          | `false` |                                   |\n| `editable`             | Set if input number field is editable or not                                                                                   | Boolean          | `true`  |                                   |\n| `emptied`              | Set if input can be empty                                                                                                      | Boolean          | `false` |                                   |\n| `initialValue`         | Initial value of the Spinner                                                                                                   | String\u003cbr\u003eNumber | `0`     |                                   |\n| `inputProps`           | Customized TextInput Component props                                                                                           | Object           | `null`  | Could overwrite other props       |\n| `leftButtonProps`      | Customized left button (Touchable Component) props                                                                             | Object           | `null`  | Could overwrite other props       |\n| `maxLength`            | Limits the maximum number of characters that can be entered.                                                                   | Number           |         |                                   |\n| `max`                  | Max number permitted                                                                                                           | String\u003cbr\u003eNumber | `null`  |                                   |\n| `min`                  | Min value permitted                                                                                                            | String\u003cbr\u003eNumber | `0`     |                                   |\n| `placeholder`          | The string that will be rendered when text input value is equal to zero                                                        | String           | `null`  |                                   |\n| `placeholderTextColor` | The text color of the placeholder string.                                                                                      | String           | `null`  |                                   |\n| `precision`            | Max numbers permitted after comma                                                                                              | Integer          | `2`     |                                   |\n| `prepend`              | Custom element after left button                                                                                               | Component        |         |                                   |\n| `returnKeyLabel`       | Sets the return key to the label. Use it instead of `returnKeyType`.                                                           | String           |         |                                   |\n| `returnKeyType`        | Determines how the return key should look. On Android you can also use `returnKeyLabel`                                        | String           |         |                                   |\n| `rightButtonProps`     | Customized right button (Touchable Component) props                                                                            | Object           | `null`  | Could overwrite other props       |\n| `selectTextOnFocus`    | If `true`, all text will automatically be selected on focus.                                                                   | Bool             | `false` |                                   |\n| `selectionColor`       | The highlight and cursor color of the text input.                                                                              | String           | `null`  |                                   |\n| `step`                 | Value to increment or decrement the current spinner value                                                                      | String\u003cbr\u003eNumber | `1`     |                                   |\n| `longStep`             | Value to increment or decrement the current spinner value `onLongPress`                                                        | String\u003cbr\u003eNumber | `step`  |                                   |\n| `speed`                | Speed acceleration ratio of increase or decrease `onLongPress`                                                                 | Number           | `7`     | (value from `1` to `10`)          |\n| `buttonTextProps`      | Customized text button props                                                                                                   | Object           | `null`  |                                   |\n| `typingTime`           | Time before debounce and trigger `onChange` event                                                                              | Number           | `750`   |                                   |\n| `type`                 | Type of spinner                                                                                                                | String           | `int`   | Can be `int` or `real`/`float`... |\n| `value`                | Controlled value of the Spinner                                                                                                | String\u003cbr\u003eNumber | `0`     |                                   |\n| `formatter`            | An optional function that is called to format the value for display                                                            | Function         | `null`  | Should return a `string`.  `editable` must be `false`.          |\n\n#### Screenshots\n\n\u003cimg src=\"images/append.png\"/\u003e\n\n##### Description\n\n- Top spinner with a child\n- Bottom spinner with `prepend` and `append`\n\n### Props Styles\n\n| Property           | Description                   | Type   | Default | Note                                          |\n| ------------------ | ----------------------------- | ------ | ------- | --------------------------------------------- |\n| `buttonPressStyle` | Button style on Pressed state | Object |         | Could overwrite other props                   |\n| `buttonStyle`      | Button style                  | Object |         | Could overwrite other props                   |\n| `inputStyle`       | Text Input style              | Object |         | Could overwrite other props                   |\n| `skin`             | Skin layout                   | String |         | `clean`, `modern`, `paper`, `round`, `square` |\n| `style`            | Container style               | Object |         | Could overwrite other props                   |\n\n### Props Colors\n\n| Property               | Description                                                | Type   | Default       | Note |\n| ---------------------- | ---------------------------------------------------------- | ------ | ------------- | ---- |\n| `background`           | Custom input text background color                         | String | `transparent` |\n| `buttonPressTextColor` | Custom color of the button of the Spinner on Pressed state | String | Auto          |\n| `buttonTextColor`      | Custom color of the label's button of the Spinner          | String | Auto          |\n| `colorAsBackground`    | Use color as background                                    | Bool   | `false`       |\n| `colorLeft`            | Custom color of the Spinner left button                    | String | `#3E525F`     |\n| `colorMax`             | Custom color of the Spinner when reach max value           | String |               |\n| `colorMin`             | Custom color of the Spinner when reach min value           | String |               |\n| `colorPress`           | Custom color of the Spinner button on touch press          | String | `#3E525F`     |\n| `colorRight`           | Custom color of the Spinner right button                   | String | `#3E525F`     |\n| `color`                | Custom color of the Spinner                                | String | `#3E525F`     |\n| `textColor`            | Custom input text number color                             | String | Auto          |\n\n#### Screenshots\n\n\u003cimg src=\"images/button_press.gif\" /\u003e\n\n##### Description\n\n- Spinner with `color`, `buttonTextColor`, `colorPress` and `buttonPressTextColor` custom colors\n\n### Props Container Style\n\n| Property     | Description                           | Type    | Default | Note                                             |\n| ------------ | ------------------------------------- | ------- | ------- | ------------------------------------------------ |\n| `height`     | Custom height of the Spinner          | Number  | `50`    |\n| `shadow`     | Show container shadow                 | Boolean | `false` | Use with `background` like `background={\"#FFF\"}` |\n| `showBorder` | Show the border of the Spinner or not | Boolean | `false` | Use with `rounded={false}`                       |\n| `style`      | Container style                       | Object  |         | Could overwrite other props                      |\n| `width`      | Custom width of the Spinner           | Number  | `150`   |\n\n### Props Buttons Style\n\n| Property                | Description                                                        | Type      | Default        | Note                        |\n| ----------------------- | ------------------------------------------------------------------ | --------- | -------------- | --------------------------- |\n| `activeOpacity`         | Opacity of underlay on pressed button                              | Number    | `0.85`         |\n| `arrows`                | Labels on button will be (\u003c and \u003e) instead of (+ and -)            | Boolean   | `false`        |\n| `buttonFontFamily`      | Custom fontFamily of buttons of the Spinner                        | String    | System Default |\n| `buttonFontSize`        | Custom fontSize of buttons of the Spinner                          | Number    | `14`           |\n| `buttonLeftDisabled`    | Disable left button                                                | Boolean   | `false`        |                             |\n| `buttonLeftImage`       | Custom element on the button left of the spinner                   | Component |                | Could overwrite other props |\n| `buttonLeftText`        | Custom text on the button left of the spinner                      | String    |                |\n| `buttonPressLeftImage`  | Custom element on the button left of the spinner on pressed state  | Component |                | Could overwrite other props |\n| `buttonPressRightImage` | Custom element on the button right of the spinner on pressed state | Component |                | Could overwrite other props |\n| `buttonPressStyle`      | Button Style on Pressed state (Plus and Minus buttons)             | Object    |                |\n| `buttonPressTextColor`  | Custom color of the button of the Spinner on Pressed state         | String    | `#FFFFFF`      |\n| `buttonRightDisabled`   | Disable right button                                               | Boolean   | `false`        |                             |\n| `buttonRightImage`      | Custom element on the button right of the spinner                  | Component |                | Could overwrite other props |\n| `buttonRightText`       | Custom text on the button right of the spinner                     | String    |                |\n| `buttonStyle`           | Button Style (Plus and Minus buttons)                              | Object    |                |\n| `buttonTextColor`       | Custom color of the labels's button of the Spinner                 | String    | `#FFFFFF`      |\n| `buttonPressTextStyle`  | Button Style on Pressed state (Plus and Minus buttons)             | Object    |                | Could overwrite other props |\n| `buttonTextStyle`       | Button text Style state (Plus and Minus buttons)                   | Object    |                | Could overwrite other props |\n| `rounded`               | Use circular button                                                | Boolean   | `true`         |\n\n### Props Text Input Style\n\n| Property     | Description                                        | Type   | Default        | Note                      |\n| ------------ | -------------------------------------------------- | ------ | -------------- | ------------------------- |\n| `background` | Custom input text background color                 | String | `transparent`  |\n| `fontFamily` | Custom fontFamily of the text input of the Spinner | String | System Default |\n| `fontSize`   | Custom fontSize of the text input of the Spinner   | Number | `14`           |\n| `inputStyle` | Text Input style                                   | Object |                | Can overwrite other props |\n| `textColor`  | Custom input text number color                     | String | `#000000`      |\n\n## 🤔 How to contribute\n\nHave an idea? Found a bug? Please raise to [ISSUES](https://github.com/marcocesarato/react-native-input-spinner/issues).\nContributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.\n\n\u003cp align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://nodei.co/npm/react-native-input-spinner/\" rel=\"nofollow\"\u003e\n        \u003cimg align=\"center\" src=\"https://nodei.co/npm/react-native-input-spinner.png?downloads=true\u0026downloadRank=true\" width=\"384\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-input-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcocesarato%2Freact-native-input-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-input-spinner/lists"}