{"id":14974279,"url":"https://github.com/anday013/react-native-otp-entry","last_synced_at":"2025-05-16T04:07:13.851Z","repository":{"id":174621523,"uuid":"652498107","full_name":"anday013/react-native-otp-entry","owner":"anday013","description":"Simple and fully modifiable OTP Input Component for React Native","archived":false,"fork":false,"pushed_at":"2025-03-22T09:43:41.000Z","size":680,"stargazers_count":334,"open_issues_count":6,"forks_count":36,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T00:45:51.602Z","etag":null,"topics":["android","confirmation-code","expo","ios","one-time-code","otp","otp-input","react-native","react-native-app","react-native-component","react-native-input","react-native-otp","react-native-otp-input","react-native-otp-text-input","react-native-otp-verify","react-native-web","sms-code","verification-code"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-otp-entry","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/anday013.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":"2023-06-12T07:40:06.000Z","updated_at":"2025-04-16T02:36:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f75613f-8bb6-4388-ba5a-7882f7a16597","html_url":"https://github.com/anday013/react-native-otp-entry","commit_stats":{"total_commits":110,"total_committers":17,"mean_commits":6.470588235294118,"dds":"0.49090909090909096","last_synced_commit":"89c25d58a10ce76740d9029f8284e6d6fb3da32c"},"previous_names":["anday2000/react-native-otp-entry"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anday013%2Freact-native-otp-entry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anday013%2Freact-native-otp-entry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anday013%2Freact-native-otp-entry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anday013%2Freact-native-otp-entry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anday013","download_url":"https://codeload.github.com/anday013/react-native-otp-entry/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464897,"owners_count":22075571,"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","confirmation-code","expo","ios","one-time-code","otp","otp-input","react-native","react-native-app","react-native-component","react-native-input","react-native-otp","react-native-otp-input","react-native-otp-text-input","react-native-otp-verify","react-native-web","sms-code","verification-code"],"created_at":"2024-09-24T13:50:19.943Z","updated_at":"2025-05-16T04:07:08.825Z","avatar_url":"https://github.com/anday013.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/anday013"],"categories":[],"sub_categories":[],"readme":"# react-native-otp-entry\n\n[![npm version](https://badge.fury.io/js/react-native-otp-entry.svg?\u0026kill_cache=1)](https://badge.fury.io/js/react-native-otp-entry)\n[![npm](https://img.shields.io/npm/dm/react-native-otp-entry.svg?\u0026kill_cache=1)]()\n[![install size](https://packagephobia.com/badge?p=react-native-otp-entry)](https://packagephobia.com/result?p=react-native-otp-entry)\n[![cov](https://anday013.github.io/react-native-otp-entry/badges/coverage.svg?\u0026kill_cache=1)](https://github.com/anday013/react-native-otp-entry/actions)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?\u0026kill_cache=1)](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE)\n\n`react-native-otp-entry` is a simple and highly customizable React Native component for entering OTP (One-Time Password) on iOS, Android, and Web. It provides an intuitive and user-friendly interface for inputting one-time passwords in your React Native applications.\n\n\u003e **Looking for a Phone Number input component?** Check out [react-native-phone-entry](https://github.com/anday013/react-native-phone-entry) - a simple and fully modifiable Phone Number Input Component for React Native that provides an intuitive interface for entering and validating international phone numbers.\n\n![Demo](otp_demo.gif)\n\n## Features\n\n- Simple and easy-to-use OTP input component.\n- Highly customizable appearance and styling.\n- Supports autofill\n- Effortlessly integrates with **React Native**, **Expo**, and **React Native Web** platforms.\n- Fully typed with TypeScript.\n- Fully covered with unit tests.\n- Paste functionality.\n\n## Demo\n\nTry out React Native OTP Entry in action on Snack Expo:\n\n[![Snack Expo App](https://img.shields.io/badge/Snack-fff.svg?style=for-the-badge\u0026logo=EXPO\u0026labelColor=000\u0026logoColor=FFF)](https://snack.expo.dev/@anday013/demo-react-native-otp-entry)\n\nor https://snack.expo.dev/@anday013/demo-react-native-otp-entry\n\n## Installation\n\nInstall `react-native-otp-entry` using npm or yarn:\n\n```bash\nnpm install react-native-otp-entry\n\n# or\n\nyarn add react-native-otp-entry\n```\n\n## Usage\n\n1. Import the `OtpInput` component from `react-native-otp-entry`:\n\n   ```javascript\n   import { OtpInput } from \"react-native-otp-entry\";\n   ```\n\n2. Render the `OtpInput` component in your screen/component:\n\n   ```jsx\n   \u003cOtpInput numberOfDigits={6} onTextChange={(text) =\u003e console.log(text)} /\u003e\n   ```\n\n3. Customize the styling as per your requirements:\n\n   ```javascript\n   \u003cOtpInput\n     numberOfDigits={6}\n     focusColor=\"green\"\n     autoFocus={false}\n     hideStick={true}\n     placeholder=\"******\"\n     blurOnFilled={true}\n     disabled={false}\n     type=\"numeric\"\n     secureTextEntry={false}\n     focusStickBlinkingDuration={500}\n     onFocus={() =\u003e console.log(\"Focused\")}\n     onBlur={() =\u003e console.log(\"Blurred\")}\n     onTextChange={(text) =\u003e console.log(text)}\n     onFilled={(text) =\u003e console.log(`OTP is ${text}`)}\n     textInputProps={{\n       accessibilityLabel: \"One-Time Password\",\n     }}\n     textProps={{\n       accessibilityRole: \"text\",\n       accessibilityLabel: \"OTP digit\",\n       allowFontScaling: false,\n     }}\n     theme={{\n       containerStyle: styles.container,\n       pinCodeContainerStyle: styles.pinCodeContainer,\n       pinCodeTextStyle: styles.pinCodeText,\n       focusStickStyle: styles.focusStick,\n       focusedPinCodeContainerStyle: styles.activePinCodeContainer,\n       placeholderTextStyle: styles.placeholderText,\n       filledPinCodeContainerStyle: styles.filledPinCodeContainer,\n       disabledPinCodeContainerStyle: styles.disabledPinCodeContainer,\n     }}\n   /\u003e\n   ```\n\n## Props\n\nThe `react-native-otp-entry` component accepts the following props:\n\n| Prop                         | Type                                   | Description                                                                                                    |\n| ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| `numberOfDigits`             | number                                 | The number of digits to be displayed in the OTP entry.                                                         |\n| `theme`                      | Theme                                  | Custom styles for each element. (See below)                                                                    |\n| `textInputProps`             | TextInputProps                         | Extra props passed to underlying hidden TextInput (see: \u003chttps://reactnative.dev/docs/textinput\u003e)              |\n| `textProps`                  | TextProps                              | Props passed to the Text component that renders each digit (see: \u003chttps://reactnative.dev/docs/text\u003e)          |\n| `autoFocus`                  | boolean                                | _Default: true_. Sets autofocus.                                                                               |\n| `focusColor`                 | ColorValue                             | The color of the input field border and stick when it is focused.                                              |\n| `placeholder`                | string                                 | Placeholder value to the input.                                                                                |\n| `onTextChange`               | (text: string) =\u003e void                 | A callback function is invoked when the OTP text changes. It receives the updated text as an argument.         |\n| `onFilled`                   | (text: string) =\u003e void                 | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |\n| `blurOnFilled`               | boolean                                | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled.                              |\n| `hideStick`                  | boolean                                | _Default: false_. Hides cursor of the focused input.                                                           |\n| `focusStickBlinkingDuration` | number                                 | The duration (in milliseconds) for the focus stick to blink.                                                   |\n| `disabled`                   | boolean                                | _Default: false_. Disables the input                                                                           |\n| `type`                       | 'alpha' \\| 'numeric' \\| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers.         |\n| `secureTextEntry`            | boolean                                | _Default: false_. Obscures the text entered so that sensitive text like PIN stay secure.                       |\n| `onFocus`                    | () =\u003e void                             | A callback function is invoked when the OTP input is focused.                                                  |\n| `onBlur`                     | () =\u003e void                             | A callback function is invoked when the OTP input is blurred.                                                  |\n\n| Theme                           | Type      | Description                                                                           |\n| ------------------------------- | --------- | ------------------------------------------------------------------------------------- |\n| `containerStyle`                | ViewStyle | Custom styles for the root `View`.                                                    |\n| `pinCodeContainerStyle`         | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry.    |\n| `pinCodeTextStyle`              | TextStyle | Custom styles for the text within each individual digit in the OTP entry.             |\n| `placeholderTextStyle`          | TextStyle | Custom styles for the placeholder text within each individual digit in the OTP entry. |\n| `focusStickStyle`               | ViewStyle | Custom styles for the focus stick, which indicates the focused input field.           |\n| `focusedPinCodeContainerStyle`  | ViewStyle | Custom styles for the input field when it is focused.                                 |\n| `filledPinCodeContainerStyle`   | ViewStyle | Custom styles for the input field when it has a value.                                |\n| `disabledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is disabled.                                |\n\n**Note:** The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.\n\n**Tip:** If you have difficulties while applying `gap` or in any other style property to set a suitable space between the OTP input containers, please set the `width` in `containerStyle` to `'auto'` or `undefined`, as it is been set to `'100%'` by default.\n\n![Theme](otp.drawio.svg)\n\n## Ref\n\nThe `react-native-otp-entry` component exposes these functions with `ref`:\n\n| Prop       | Type                     | Description                        |\n| ---------- | ------------------------ | ---------------------------------- |\n| `clear`    | () =\u003e void;              | Clears the value of the OTP input. |\n| `focus`    | () =\u003e void;              | Focus of the OTP input.            |\n| `setValue` | (value: string) =\u003e void; | Sets the value of the OTP input.   |\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE).\n\n## Contributing\n\nContributions are welcome! Please feel free to open issues or submit pull requests.\n\nIf you find a bug or have any feature requests, please open an issue :)\n\n## Support Me\n\nIf you find this project helpful and want to support my work, consider buying me a coffee! ☕\n\n[![Buy Me a Coffee](https://img.shields.io/badge/-Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://www.buymeacoffee.com/anday013)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanday013%2Freact-native-otp-entry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanday013%2Freact-native-otp-entry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanday013%2Freact-native-otp-entry/lists"}