{"id":27208246,"url":"https://github.com/naveenvignesh5/react-native-otp-textinput","last_synced_at":"2025-04-09T23:59:34.471Z","repository":{"id":41092807,"uuid":"140678983","full_name":"naveenvignesh5/react-native-otp-textinput","owner":"naveenvignesh5","description":"Text View usable for OTP / Pin implementation","archived":false,"fork":false,"pushed_at":"2025-01-26T05:44:30.000Z","size":17650,"stargazers_count":163,"open_issues_count":28,"forks_count":59,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T23:59:25.218Z","etag":null,"topics":["otp-view","react","react-native","textinput","textinputfield","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/naveenvignesh5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-07-12T07:40:18.000Z","updated_at":"2025-03-23T12:26:42.000Z","dependencies_parsed_at":"2024-01-13T19:11:06.106Z","dependency_job_id":"46ad8d13-1c68-4dbb-9f08-9c5fb4f7db74","html_url":"https://github.com/naveenvignesh5/react-native-otp-textinput","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveenvignesh5%2Freact-native-otp-textinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveenvignesh5%2Freact-native-otp-textinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveenvignesh5%2Freact-native-otp-textinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naveenvignesh5%2Freact-native-otp-textinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naveenvignesh5","download_url":"https://codeload.github.com/naveenvignesh5/react-native-otp-textinput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131330,"owners_count":21052819,"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":["otp-view","react","react-native","textinput","textinputfield","typescript"],"created_at":"2025-04-09T23:59:34.337Z","updated_at":"2025-04-09T23:59:34.433Z","avatar_url":"https://github.com/naveenvignesh5.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/naveenvignesh"],"categories":[],"sub_categories":[],"readme":"### REACT NATIVE OTP TEXT INPUT\n\nReact Native Component that can used for OTPs and Pins as secure pin input.\n\n[![npm version](https://badge.fury.io/js/react-native-otp-textinput.svg)](https://badge.fury.io/js/react-native-otp-textinput)\n![npm downloads](https://img.shields.io/npm/dw/react-native-otp-textinput.svg)\n\n#### Installation\n\n```\nnpm i -S react-native-otp-textinput\n```\n\n#### Demo\n\n\u003cimg src=\"ScreenShots/demo.gif\" width=\"220px\"\u003e\u003cbr\u003e\n\n#### How to Use\n\nCheck the `Example` react native app for usage.\n\n#### Platform Support\n\nSupports both Android and iOS.\n\n#### Props\n\nThe following props are applicable for the component along with **props supported by react native `TextInput` component**\n\n| Prop                 | Type   | Optional | Default      | Description                                                                            |\n| -------------------- | ------ | -------- | ------------ | -------------------------------------------------------------------------------------- |\n| defaultValue         | string | Yes      | ''           | Default Value that can be set based on OTP / Pin received from parent container.       |\n| handleTextChange     | func   | No       | n/a          | callback with concated string of all cells as argument.                                |\n| handleCellTextChange | func   | Yes      | n/a          | callback for text change in individual cell with cell text and cell index as arguments |\n| inputCount           | number | Yes      | 4            | Number of Text Input Cells to be present.                                              |\n| tintColor            | string | Yes      | #3CB371      | Color for Cell Border on being focused.                                                |\n| offTintColor         | string | Yes      | #DCDCDC      | Color for Cell Border Border not focused.                                              |\n| inputCellLength      | number | Yes      | 1            | Number of character that can be entered inside a single cell.                          |\n| containerStyle       | object | Yes      | {}           | style for overall container.                                                           |\n| textInputStyle       | object | Yes      | {}           | style for text input.                                                                  |\n| testIDPrefix         | string | Yes      | 'otp*input*' | testID prefix, the result will be `otp_input_0` until inputCount                       |\n| autoFocus            | bool   | Yes      | false        | Input should automatically get focus when the components loads                         |\n\n#### Helper Functions\n\nClearing and Setting values to component\n\n```javascript\n// using traditional ref\nclearText = () =\u003e {\n    this.otpInput.clear();\n}\n\nsetText = () =\u003e {\n    this.otpInput.setValue(\"1234\");\n}\n\nrender() {\n    return (\n        \u003cView\u003e\n            \u003cOTPTextInput ref={e =\u003e (this.otpInput = e)} \u003e\n            \u003cButton title=\"clear\" onClick={this.clearText}\u003e\n        \u003c/View\u003e\n    );\n}\n```\n\n```javascript\n// hooks\nimport React, { useRef } from 'react';\n\nconst ParentComponent = () =\u003e {\n    let otpInput = useRef(null);\n\n    const clearText = () =\u003e {\n        otpInput.current.clear();\n    }\n\n    const setText = () =\u003e {\n        otpInput.current.setValue(\"1234\");\n    }\n\n    return (\n        \u003cView\u003e\n            \u003cOTPTextInput ref={e =\u003e (otpInput = e)} \u003e\n            \u003cButton title=\"clear\" onClick={clearText}\u003e\n        \u003c/View\u003e\n    );\n}\n```\n\n#### If you like the project\n\nIf you think I have helped you, feel free to get me coffee. 😊\n\n\u003ca href=\"https://www.buymeacoffee.com/naveenvignesh\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-blue.png\" alt=\"Buy Me A Coffee\" height=\"60\" \u003e\u003c/a\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaveenvignesh5%2Freact-native-otp-textinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaveenvignesh5%2Freact-native-otp-textinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaveenvignesh5%2Freact-native-otp-textinput/lists"}