{"id":36545287,"url":"https://github.com/sectiontn/otp-input","last_synced_at":"2026-01-12T06:00:12.459Z","repository":{"id":228640898,"uuid":"773875771","full_name":"SectionTN/otp-input","owner":"SectionTN","description":"An elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.","archived":false,"fork":false,"pushed_at":"2024-07-08T10:23:45.000Z","size":9628,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T21:57:04.799Z","etag":null,"topics":["android-library","ios-library","newarchitecture","otp-input","otp-library","otp-textfield","otp-verification","react-native","websupport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/SectionTN.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-03-18T14:54:14.000Z","updated_at":"2024-11-27T20:45:52.000Z","dependencies_parsed_at":"2024-07-08T13:11:57.051Z","dependency_job_id":null,"html_url":"https://github.com/SectionTN/otp-input","commit_stats":null,"previous_names":["sectiontn/otp-input"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/SectionTN/otp-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SectionTN%2Fotp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SectionTN%2Fotp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SectionTN%2Fotp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SectionTN%2Fotp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SectionTN","download_url":"https://codeload.github.com/SectionTN/otp-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SectionTN%2Fotp-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28336048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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-library","ios-library","newarchitecture","otp-input","otp-library","otp-textfield","otp-verification","react-native","websupport"],"created_at":"2026-01-12T06:00:02.668Z","updated_at":"2026-01-12T06:00:12.453Z","avatar_url":"https://github.com/SectionTN.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/sectiontn"],"categories":[],"sub_categories":[],"readme":"# 🗝️ OTP Text Input\n\nAn elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.\n\n* ✍ Written in TypeScript.\n* 📱 Supports Android / iOS / Web.\n* 🎨 Highly customizable.\n* 🚀 Easy to use.\n* 🍃 Lightweight.\n* 📏 Fully responsive.\n* 🌐 Supports RTL.\n* 🌛 Supports Dark Mode.\n* 💅 Supports custom styles.\n* 🎹 Supports custom keyboard types.\n\n## 📸 Screenshots\n\nThese screenshots show the OTP Text Input in action, with different styles and configurations. taken from the example project below.\n\n\u003cdiv style=\"text-align: left; flex-direction: row\"\u003e\n\u003cimg src=\"assets/screenshot_three.jpg\" alt=\"screeenshot_one\" width=\"250px\" height=\"550px\"\u003e\n\u003cimg src=\"assets/screenshot_two.jpg\" alt=\"screeenshot_one\" width=\"250px\" height=\"550px\"\u003e\n\u003cimg src=\"assets/screenshot_one.jpg\" alt=\"screeenshot_one\" width=\"250px\" height=\"550px\"\u003e\n\u003c/div\u003e\n\n# 🎞️ Gifs\n\u003cdiv style=\"text-align: left; flex-direction: row\"\u003e\n\u003cimg src=\"assets/advanced.gif\" width=\"250px\" height=\"550px\" alt=\"Advanced Usage\"\u003e\n\u003c/div\u003e\n\nWeb Demo Gif: [Web Gif](assets/web.gif)\n\n## 💻 Installation\nNPM:\n```sh\nnpm install @sectiontn/otp-input\n```\nYARN:\n```sh\nyarn add @sectiontn/otp-input\n```\n\n## ➕ Imports\n\nImport the `OTP` component from the `@sectiontn/otp-input` package and use it in your React Native application.\n\n```typescript jsx\nimport { OTPTextInput } from '@sectiontn/otp-input';\n```\n\nYou may need to import type `OTPTextViewHandle` to use the `ref` on the component (if you use TypeScript).\n\n```typescript jsx\nimport { OTPTextInput, type OTPTextInputHandle } from '@sectiontn/otp-input';\n// Later in your component.\nconst OTPRef = useRef\u003cOTPTextInputHandle | null\u003e(null);\n```\n## ♻ Usage\nCall the `OTPTextInput` component in your JSX code and pass the required props to customize the OTP input field.\n\n```typescript jsx\nimport { Platform } from 'react-native';\n\n// later in your component's render\n\n\u003cOTPTextInput\n  ref={OTPRef}\n  inputCount={4}\n  tintColor={\"#FF6F61\"}\n  offTintColor={\"#BBBCBE\"}\n  onTextChangeHandler={(pin: string) =\u003e {\n    console.log('Current OTP:', pin);\n  }}\n  editable={true}\n  autoFocus={true}\n  keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}\n/\u003e\n```\n\n## 🧱 Props\n\nThere's no required prop as you can see, if you pass an empty props eg, `\u003cOTPTextInput /\u003e`, the component will work with the default values.\n\n| Prop name           | Type                | Default Value | Description                                                                      |\n|:--------------------|:--------------------|:--------------|:---------------------------------------------------------------------------------|\n| defaultValue        | string              | \" \"           | The default value for the OTP input                                              |\n| inputCount          | number              | 4             | The number of OTP input fields                                                   |\n| tintColor           | string              | '#566193'     | The color of the focused OTP input field                                         |\n| offTintColor        | string              | '#DADADA'     | The color of the non-focused OTP input fields                                    |\n| inputMaxLength      | number              | 1             | The maximum length of each OTP input field                                       |\n| containerStyle      | object              | {}            | The custom style for the OTP container component                                 |\n| textInputStyle      | object              | {}            | The custom style for the OTP text inputs                                         |\n| onTextChangeHandler | function            | undefined     | Call back function to handle OTP text change                                     |\n| onBlur              | function            | undefined     | Called when an input field loses focus                                           |\n| onFocus             | function            | undefined     | Called when an input field gets focus                                            |\n| keyboardType        | KeyboardTypeOptions | 'numeric'     | Determines the type of keyboard to be displayed                                  |\n| editable            | boolean             | true          | Determines whether or not the OTP input is editable                              |\n| autoFocus           | boolean             | true          | Determines whether or not the first input field should automatically get focus   |\n| useNumbersRegex     | boolean             | true          | If true, the input will be validated against a default number-based regex        |\n| useCustomRegex      | boolean             | false         | If true, a custom regex set by customRegex prop will be used for validation      |\n| customRegex         | RegExp              | '\\\\d*'        | This provides the custom regex for input validation when useCustomRegex is true. |\n\n**NB**: you cannot use both `useNumbersRegex` and `useCustomRegex` at the same time.\n\n## 🔍 Example\n\nFull Example: Check the example at [OTP Input Example](https://github.com/SectionTN/otp-input-example) made with react-native-cli.\n\u003cbr\u003e\n\u003cbr\u003e\nAdvanced Usage: [Expo Snack Demo](https://snack.expo.dev/@sectiontn/otptextinput-advanced-example)\n\n## 🤝 Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## 📜 License [GPLv3 license](./LICENSE).\n\n    Copyright (C) 2024 Mohamed Rayen Sbai\n\n    This program is free software: you can redistribute it and/or modify\n    it under the terms of the GNU General Public License as published by\n    the Free Software Foundation, either version 3 of the License, or\n    (at your option) any later version.\n\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU General Public License for more details.\n\n    You should have received a copy of the GNU General Public License\n    along with this program.  If not, see \u003chttps://www.gnu.org/licenses/\u003e.\n\n## ❤️ Support\n\n\u003cp\u003e\n\u003ca href=\"https://www.buymeacoffee.com/sectiontn\"\u003e\n\u003cimg style=\"text-align: left;\" src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" height=\"50\" width=\"210\" alt=\"sectiontn\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsectiontn%2Fotp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsectiontn%2Fotp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsectiontn%2Fotp-input/lists"}