{"id":15293980,"url":"https://github.com/john-pels/reactnative-otp-input","last_synced_at":"2025-04-13T14:11:38.810Z","repository":{"id":257798479,"uuid":"859190675","full_name":"John-pels/reactnative-otp-input","owner":"John-pels","description":"A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.","archived":false,"fork":false,"pushed_at":"2024-09-25T09:44:03.000Z","size":115,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T07:15:22.721Z","etag":null,"topics":["android","expo","ios","otp","react-native","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-snap-otp","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/John-pels.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-09-18T08:41:15.000Z","updated_at":"2024-09-27T11:46:21.000Z","dependencies_parsed_at":"2024-09-25T20:45:13.011Z","dependency_job_id":null,"html_url":"https://github.com/John-pels/reactnative-otp-input","commit_stats":null,"previous_names":["john-pels/reactnative-otp-input"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/John-pels%2Freactnative-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/John-pels%2Freactnative-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/John-pels%2Freactnative-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/John-pels%2Freactnative-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/John-pels","download_url":"https://codeload.github.com/John-pels/reactnative-otp-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724629,"owners_count":21151561,"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","expo","ios","otp","react-native","reactjs","typescript"],"created_at":"2024-09-30T16:54:31.498Z","updated_at":"2025-04-13T14:11:38.790Z","avatar_url":"https://github.com/John-pels.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-snap-otp \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/John-pels/reactnative-otp-input/blob/main/LICENSE)\u003cimg src=\"https://img.shields.io/github/stars/John-pels/reactnative-otp-input\" alt=\"stars\"\u003e[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://legacy.reactjs.org/docs/how-to-contribute.html#your-first-pull-request)[![GitHub issues](https://img.shields.io/github/issues/John-pels/reactnative-otp-input.svg)](https://github.com/John-pels/reactnative-otp-input)[![GitHub last commit](https://img.shields.io/github/last-commit/John-pels/reactnative-otp-input.svg)](https://github.com/John-pels/reactnative-otp-input/commits/main)[![npm version](https://badge.fury.io/js/react-native-snap-otp.svg)](https://img.shields.io/npm/dm/react-native-snap-otp.svg)\n\nA customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.\n\n### Installation\n\nFor React-native CLI,\n\n```bash\nnpm install react-native-snap-otp\n```\n\n```bash\ncd ios\npod install\n```\n\nor\n\n```bash\nyarn add react-native-snap-otp\n```\n\n```bash\ncd ios\npod install\n```\n\nFor Expo App,\n\n```bash\nnpx expo install react-native-snap-otp\n```\n\n### Basic Usage\n\n```typescript\nimport React from 'react';\nimport RNOTPInput from 'react-native-snap-otp';\n\nconst [otp, setOtp] = React.useState('');\n\nconst handleOTPComplete = (otp: string) =\u003e {\n  setOtp(otp);\n};\n\n\u003cRNOTPInput length={5} onCompleteFn={handleOTPComplete} /\u003e;\n```\n\n### Customization Examples\n\n#### Custom styles\n\n```typescript\n\u003cRNOTPInput\n  length={6}\n  onCompleteFn={handleOTPComplete}\n  inputStyle={{\n    borderRadius: 10,\n    fontSize: 24,\n  }}\n  containerStyle={{\n    marginTop: 20,\n    width: '80%',\n  }}\n  focusStyle={{\n    borderColor: 'red',\n    borderWidth: 1,\n  }}\n/\u003e\n```\n\n### Props\n\n| Props          | Type                 | Default                                                      | Required | Description                                             |\n| -------------- | -------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------- |\n| Length         | Number               | 4                                                            | No       | The number of OTP input fields, default is 4            |\n| onCompleteFn   | Function             | \\_                                                           | Yes      | Callback function called when all OTP fields are filled |\n| inputStyle     | StyleProp\u003cTextStyle\u003e | width, height, borderWidth, borderColor, textAlign, fontSize | No       | Custom styles for individual input fields               |\n| containerStyle | StyleProp            | flexDirection, justifyContent                                | No       | Custom styles for the container of input fields         |\n| focusStyle     | StyleProp            | \\_                                                           | No       | The onFocus styles for the otp inputs                   |\n\n## Features\n\n- **Customizable Length: Set the number of OTP input fields as needed.**\n- **Auto Focus: Automatically focuses on the next input field after entering a digit**\n- **Backspace Support: Moves focus to the previous field when pressing backspace on an empty field.**\n- **Customizable Styling: Apply custom styles to both individual input fields and the container.**\n- **Completion Callback: Easily handle the completed OTP input with the onComplete callback.**\n\n### Best Practices\n\n1. **Error Handling**: Implement proper error handling and validation for the OTP input.\n2. **Accessibility**: Ensure the component is accessible by testing with screen readers and adding appropriate labels.\n3. **Security**: Never store or log the full OTP on the client-side for security reasons.\n4. **Timeout**: Consider implementing a timeout feature for OTP validity.\n5. **Resend Option**: Provide an option to resend the OTP if the user doesn't receive it.\n\n### Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n### License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-pels%2Freactnative-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohn-pels%2Freactnative-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-pels%2Freactnative-otp-input/lists"}