{"id":19310906,"url":"https://github.com/kartikeyvaish/react-native-otp-input-fields","last_synced_at":"2026-04-16T14:04:37.277Z","repository":{"id":47251579,"uuid":"403292619","full_name":"kartikeyvaish/react-native-otp-input-fields","owner":"kartikeyvaish","description":"A React Native component for OTP Input fields.","archived":false,"fork":false,"pushed_at":"2021-12-01T19:21:35.000Z","size":698,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T16:56:02.433Z","etag":null,"topics":["expo","otp-inputs","react-native","reusable-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-otp-input-fields","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/kartikeyvaish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-05T11:39:10.000Z","updated_at":"2023-01-06T19:30:00.000Z","dependencies_parsed_at":"2022-07-20T16:49:20.189Z","dependency_job_id":null,"html_url":"https://github.com/kartikeyvaish/react-native-otp-input-fields","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/kartikeyvaish/react-native-otp-input-fields","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikeyvaish%2Freact-native-otp-input-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikeyvaish%2Freact-native-otp-input-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikeyvaish%2Freact-native-otp-input-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikeyvaish%2Freact-native-otp-input-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kartikeyvaish","download_url":"https://codeload.github.com/kartikeyvaish/react-native-otp-input-fields/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kartikeyvaish%2Freact-native-otp-input-fields/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266991156,"owners_count":24017739,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"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":["expo","otp-inputs","react-native","reusable-components"],"created_at":"2024-11-10T00:26:53.645Z","updated_at":"2026-04-16T14:04:37.241Z","avatar_url":"https://github.com/kartikeyvaish.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-otp-input-fields\n\nThis is a component for OTP Input fields.\n\n- [Installation](https://github.com/kartikeyvaish/react-native-otp-input-fields#installation)\n- [Usage](https://github.com/kartikeyvaish/react-native-otp-input-fields#usage)\n- [Docs](https://github.com/kartikeyvaish/react-native-otp-input-fields#parameters)\n\n## Installation\n\n```javascript\nnpm i react-native-otp-input-fields\n```\n\nNOTE: This package uses `react-native-reanimated` under the hood for animation. Please Follow the installation process of [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)\n## Usage\n\nBelow are some examples to use this package\n\n### Basic Usage\n\n```javascript\nimport OTPInput from \"react-native-otp-input-fields\";\n\nconst [OTP, SetOTP] = useState(\"\");\n// Maintain a state variable\n\n// Use it like this\n\u003cOTPInput onChangeText={SetOTP} value={OTP} /\u003e;\n```\n\n\u003cimg src=\"./example/assets/images/Basic.jpg\" width=\"40%\" \u003e\n\n---\n\n### Password Secure Usage\n\n```javascript\nimport OTPInput from \"react-native-otp-input-fields\";\n\nconst [OTP, SetOTP] = useState(\"\");\n// Maintain a state variable\n\n// Use it like this\n\u003cOTPInput onChangeText={SetOTP} value={OTP} secureTextEntry={true} /\u003e;\n```\n\n\u003cimg src=\"./example/assets/images/Secure.jpg\" width=\"40%\" \u003e\n\n---\n\n### Change Colors and other styles\n\n```javascript\nimport OTPInput from \"react-native-otp-input-fields\";\n\nconst [OTP, SetOTP] = useState(\"\");\n// Maintain a state variable\n\n// Use it like this\n\u003cOTPInput\n  onChangeText={SetOTP}\n  value={OTP}\n  borderColor=\"orange\"\n  boxBackgroundColor=\"dodgerblue\"\n  cursorColor=\"orange\"\n  digitColor=\"white\"\n/\u003e;\n```\n\n\u003cimg src=\"./example/assets/images/Color.jpg\" width=\"40%\" \u003e\n\n---\n\n### Apply Elevation and Border Radius etc.\n\n```javascript\nimport OTPInput from \"react-native-otp-input-fields\";\n\nconst [OTP, SetOTP] = useState(\"\");\n// Maintain a state variable\n\n// Use it like this\n\u003cOTPInput\n  onChangeText={SetOTP}\n  value={OTP}\n  boxBorderRadius={50}\n  onlyBorderBottom={false}\n  boxElevation={10}\n/\u003e;\n```\n\n\u003cimg src=\"./example/assets/images/Elevation.jpg\" width=\"40%\" \u003e\n\n---\n\n## Parameters\n\n### Basic Parameters\n\n| Parameter         | required | Default     | Description                                                                              |\n| ----------------- | -------- | ----------- | ---------------------------------------------------------------------------------------- |\n| value             | YES      |             | Maintain a state in parent component and use it as a controlled input                    |\n| onChangeText      | YES      |             | the onChangeText function to update the state in parent component                        |\n| count             | NO       | 6           | Number of digits in the OTP                                                              |\n| autoFocus         | NO       | false       | Whether to autofocus the first field                                                     |\n| removeOnBackspace | NO       | true        | Whether to clear the previous input while pressing the backspace button on a input field |\n| onSubmitEditing   | NO       |             | function to execute when user presses the done button on keyboard                        |\n| containerWidth    | NO       | screenWidth | Width of the Input Field Container                                                       |\n| boxHeight         | NO       | 60          | Height of each input field                                                               |\n| margin            | NO       | 5           | margin between each input field                                                          |\n\n### Customization\n\n| Parameter          | required | Default | Description                                                        |\n| ------------------ | -------- | ------- | ------------------------------------------------------------------ |\n| secureTextEntry    | NO       | false   | Mask the text input as password field or not                       |\n| allowDigitsOnly    | NO       | false   | Allow only digits to be entered in the text input                  |\n| digitFontSize      | NO       | 25      | font size of the text inside input field                           |\n| animateDuration    | NO       | 300ms   | Duration for the animation to complete when input field is focused |\n| cursorColor        | NO       | black   | color of the blinking cursor                                       |\n| digitColor         | NO       | black   | color of the digit inside the field                                |\n| onlyBorderBottom   | NO       | true    | whether to show border around whole box or just the border bottom  |\n| keyboardType       | NO       | true    | type of Keyboard from `KeyboardTypeOptions` in react-native        |\n| borderBottomWidth  | NO       | 3       | width for the border bottom of box                                 |\n| borderColor        | NO       | `black` | color for the border of box                                        |\n| boxElevation       | NO       | `6`     | elevation for the input field box                                  |\n| maxLength          | NO       | 1       | Max length of each input field                                     |\n| inputStyle         | NO       |         | styles for the `TextInput` component                               |\n| boxHeight          | NO       | 60      | height of each input field                                         |\n| boxBorderRadius    | NO       | 0       | border Radius of input field                                       |\n| boxContainerStyle  | NO       |         | styles for the input containers                                    |\n| containerStyle     | NO       |         | styles for the whole input box container (outer)                   |\n| boxBackgroundColor | NO       | `white` | backround Color of the input fields                                |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikeyvaish%2Freact-native-otp-input-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkartikeyvaish%2Freact-native-otp-input-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkartikeyvaish%2Freact-native-otp-input-fields/lists"}