{"id":51476233,"url":"https://github.com/xamous/react-native-smooth-pincode-input","last_synced_at":"2026-07-06T21:26:56.727Z","repository":{"id":40420459,"uuid":"146074881","full_name":"xamous/react-native-smooth-pincode-input","owner":"xamous","description":"A cross-platform, smooth, lightweight, customizable PIN code input component for React Native.","archived":false,"fork":false,"pushed_at":"2024-05-03T09:36:09.000Z","size":716,"stargazers_count":415,"open_issues_count":73,"forks_count":147,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-11-23T03:25:35.099Z","etag":null,"topics":["android","ios","javascript","password","pin","pincode","react","react-native","textinput"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xamous.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":"2018-08-25T07:20:57.000Z","updated_at":"2025-10-30T09:57:02.000Z","dependencies_parsed_at":"2024-06-18T13:38:22.418Z","dependency_job_id":"12e22c1a-2b40-4c65-a553-fb33889c8e99","html_url":"https://github.com/xamous/react-native-smooth-pincode-input","commit_stats":{"total_commits":54,"total_committers":19,"mean_commits":"2.8421052631578947","dds":0.6481481481481481,"last_synced_commit":"a84ee0f714816a2cf815895c21dd59e0227d0874"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xamous/react-native-smooth-pincode-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamous%2Freact-native-smooth-pincode-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamous%2Freact-native-smooth-pincode-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamous%2Freact-native-smooth-pincode-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamous%2Freact-native-smooth-pincode-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xamous","download_url":"https://codeload.github.com/xamous/react-native-smooth-pincode-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamous%2Freact-native-smooth-pincode-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35206987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","ios","javascript","password","pin","pincode","react","react-native","textinput"],"created_at":"2026-07-06T21:26:55.484Z","updated_at":"2026-07-06T21:26:56.716Z","avatar_url":"https://github.com/xamous.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Smooth Pincode Input\n\nA cross-platform, smooth, lightweight, customizable PIN code input component for React Native.\n\nMost PIN code inputs components implemented by combining several TextInputs. They works, however, not good enough. When user types fast, or system sluggish, characters may lost when component switching focus between TextInputs. User need to type over and over again to get a correct input, gave a frustrated user experience.\n\n**React Native Smooth Pincode Input** implemented with a different approach - It's based on single TextInput but only render it as seperated fields. In other words, it looks like a PIN code input, but works as smooth as a native TextInput.\n\n**React Native Smooth Pincode Input** is also highly customizable. By exposing cells and text stylesheets, it can be fully customized to fit in your app design. Password mode also supported with customizable mask characters as well as placeholders.\n\n- Checkout the [example/](https://github.com/xamous/react-native-smooth-pincode-input/tree/master/example) for demo app.\n\n## Features\n\n- Smooth typing without losing inputs\n- Customizable cell style\n- Customizable text style\n- Password mode\n- Customizable password mask and placeholder characters\n- Built in animations (Credit to [react-native-animatable](https://github.com/oblador/react-native-animatable))\n\n## Installation\n\n```sh\n# yarn\nyarn add react-native-smooth-pincode-input\n\n# npm\nnpm i react-native-smooth-pincode-input\n```\n\n## Examples\n\n### Default style with event handling\n\u003cimg src=\"./demo/default.gif\"\u003e\n\n```js\n\u003cSmoothPinCodeInput\n  ref={this.pinInput}\n  value={code}\n  onTextChange={code =\u003e this.setState({ code })}\n  onFulfill={this._checkCode}\n  onBackspace={this._focusePrevInput}\n  /\u003e\n```\n\n### Password with custom mask\n\u003cimg src=\"./demo/password.gif\"\u003e\n\n```js\n\u003cSmoothPinCodeInput password mask=\"﹡\"\n  cellSize={36}\n  codeLength={8}\n  value={password}\n  onTextChange={password =\u003e this.setState({ password })}/\u003e\n```\n\n### Underline style\n\u003cimg src=\"./demo/underline.gif\"\u003e\n\n```js\n\u003cSmoothPinCodeInput\n  cellStyle={{\n    borderBottomWidth: 2,\n    borderColor: 'gray',\n  }}\n  cellStyleFocused={{\n    borderColor: 'black',\n  }}\n  value={code}\n  onTextChange={code =\u003e this.setState({ code })}\n  /\u003e\n```\n\n### Customized style\n\u003cimg src=\"./demo/customize.gif\"\u003e\n\n```js\n\u003cSmoothPinCodeInput\n  placeholder=\"⭑\"\n  cellStyle={{\n    borderWidth: 2,\n    borderRadius: 24,\n    borderColor: 'mediumturquoise',\n    backgroundColor: 'azure',\n  }}\n  cellStyleFocused={{\n    borderColor: 'lightseagreen',\n    backgroundColor: 'lightcyan',\n  }}\n  textStyle={{\n    fontSize: 24,\n    color: 'salmon'\n  }}\n  textStyleFocused={{\n    color: 'crimson'\n  }}\n  value={code}\n  onTextChange={code =\u003e this.setState({ code })}\n  /\u003e\n```\n\n### Custom placeholder and mask using a component\n\u003cimg src=\"./demo/placeholder-mask.gif\"\u003e\n\n```js\n\u003cSmoothPinCodeInput\n  placeholder={\u003cView style={{\n    width: 10,\n    height: 10,\n    borderRadius: 25,\n    opacity: 0.3,\n    backgroundColor: 'blue',\n  }}\u003e\u003c/View\u003e}\n  mask={\u003cView style={{\n    width: 10,\n    height: 10,\n    borderRadius: 25,\n    backgroundColor: 'blue',\n  }}\u003e\u003c/View\u003e}\n  maskDelay={1000}\n  password={true}\n  cellStyle={null}\n  cellStyleFocused={null}\n  value={code}\n  onTextChange={code =\u003e this.setState({ code })}\n/\u003e\n```\n\n\n## Available props\n\n| Name              | Type                                                                                  | Default                                    | Description                                                                                                                                                                                                                                                        |\n|-------------------|---------------------------------------------------------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| value             | String                                                                                | ''                                         | The value to show for the input                                                                                                                                                                                                                                    |\n| codeLength        | Number                                                                                | 4                                          | Number of character for the input                                                                                                                                                                                                                                  |\n| cellSize          | Number                                                                                | 48                                         | Size for each cell in input                                                                                                                                                                                                                                        |\n| cellSpacing       | Number                                                                                | 4                                          | Space between each cell                                                                                                                                                                                                                                            |\n| placeholder       | String                                                                                | Element                                    | ''                                                                                                                                                                                                                                                                 |\n| mask              | String                                                                                | Element                                    | '*'                                                                                                                                                                                                                                                                |\n| maskDelay         | Number                                                                                | 200                                        | The delay in milliseconds before a character is masked                                                                                                                                                                                                             |\n| password          | Boolean                                                                               | false                                      | Mask the input value. Each cell masked with `mask` props                                                                                                                                                                                                           |\n| autoFocus         | Boolean                                                                               | false                                      | If true, focuses the input on `componentDidMount`                                                                                                                                                                                                                  |\n| editable          | Boolean                                                                               | true                                       | If false, makes each cell not editable                                                                                                                                                                                                                             |\n| animated          | Boolean                                                                               | true                                       | Toggle animations                                                                                                                                                                                                                                                  |\n| animationFocused  | String, Object                                                                        | 'pulse'                                    | The animation of the focused cell. This can be a preset animation in the form of a [string](https://github.com/oblador/react-native-animatable#animations-2) or a [custom animation](https://github.com/oblador/react-native-animatable#custom-animations) object. |\n| restrictToNumbers | Boolean                                                                               | false                                      | Restrict input to numbers only                                                                                                                                                                                                                                     |\n| containerStyle    | React View StyleSheet                                                                 | `{}`                                       | View style for whole cell containers                                                                                                                                                                                                                               |\n| cellStyle         | React View StyleSheet                                                                 | `{ borderColor: 'gray', borderWidth: 1}`   | View style for each cell                                                                                                                                                                                                                                           |\n| cellStyleFocused  | React View StyleSheet                                                                 | `{ borderColor: 'black', borderWidth: 2 }` | View style for focused cell                                                                                                                                                                                                                                        |\n| textStyle         | React Text StyleSheet                                                                 | `{ color: 'gray', fontSize: 24 }`          | Text style for cell value                                                                                                                                                                                                                                          |\n| textStyleFocused  | React Text StyleSheet                                                                 | `{ color: 'black' }`                       | Text style for focused cell value                                                                                                                                                                                                                                  |\n| onFulfill         | Function                                                                              | null                                       | Callback function that's called when the input is completely filled                                                                                                                                                                                                |\n| onTextChange      | Function                                                                              | null                                       | Callback function that's called when the text changed                                                                                                                                                                                                              |\n| onBackspace       | Function                                                                              | null                                       | Callback function that's called when the input is empty and the backspace button is pressed                                                                                                                                                                        |\n| keyboardType      | Enum('default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad') | 'numeric'                                  | Determines which keyboard to open                                                                                                                                                                                                                                  |\n\n## Thanks to contributors\n* [Matias Alvin](https://github.com/alvinmatias69)\n* [Marcus Vinicius](https://github.com/MarcwL22)\n* [Fellipe Chagas](https://github.com/chagasaway)\n* [Erjan Kalybek](https://github.com/erjanmx)\n* [Sankaran Kaliappan](https://github.com/hisankaran)\n* [Anthony Mittaz](https://github.com/sync)\n* [Marco van Dijk](https://github.com/marcovdijk)\n* [geminiyellow](https://github.com/geminiyellow)\n* [jpr-longgame](https://github.com/jpr-longgame)\n* [Ali Kazemkhanloo](https://github.com/alikazemkhanloo)\n* [Ricky Sullivan Himself](https://github.com/rickysullivan)\n* [Elements](https://github.com/elementsinteractive)\n* [Dawid Urbas](https://github.com/mrruby)\n* [bsnelder](https://github.com/bsnelder)\n* [Nocks](https://github.com/nocksapp)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxamous%2Freact-native-smooth-pincode-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxamous%2Freact-native-smooth-pincode-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxamous%2Freact-native-smooth-pincode-input/lists"}