{"id":25339827,"url":"https://github.com/mmusaib/react-native-text-input-otp","last_synced_at":"2025-10-29T09:31:29.937Z","repository":{"id":216785514,"uuid":"742099461","full_name":"mmusaib/react-native-text-input-otp","owner":"mmusaib","description":"A react native/expo package for splitted otp text inputs","archived":false,"fork":false,"pushed_at":"2024-09-18T16:05:22.000Z","size":365,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T19:29:12.670Z","etag":null,"topics":["expo","expo-otp-input","otp","otp-input","react-naive","react-native-otp-input","react-native-otp-text-input","react-native-text-input-otp","split-otp"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-text-input-otp","language":"JavaScript","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/mmusaib.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}},"created_at":"2024-01-11T18:59:41.000Z","updated_at":"2024-11-21T08:25:54.000Z","dependencies_parsed_at":"2024-01-18T10:42:58.310Z","dependency_job_id":null,"html_url":"https://github.com/mmusaib/react-native-text-input-otp","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.06666666666666665,"last_synced_commit":"b3799a7e7717c496480ede8001063a1586cf5c1b"},"previous_names":["mmusaib/react-native-text-input-otp"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-text-input-otp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-text-input-otp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-text-input-otp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmusaib%2Freact-native-text-input-otp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmusaib","download_url":"https://codeload.github.com/mmusaib/react-native-text-input-otp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238801850,"owners_count":19532904,"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":["expo","expo-otp-input","otp","otp-input","react-naive","react-native-otp-input","react-native-otp-text-input","react-native-text-input-otp","split-otp"],"created_at":"2025-02-14T07:29:20.772Z","updated_at":"2025-10-29T09:31:24.645Z","avatar_url":"https://github.com/mmusaib.png","language":"JavaScript","funding_links":["https://paypal.me/mmusaib"],"categories":[],"sub_categories":[],"readme":"|                          | |  |   |   |\n| --------------------------------------- | -------- | ---------- |---------- |---------- |\n| \u003ca href=\"https://www.npmjs.com/package/react-native-text-input-otp\"\u003e![NPM VERSION](https://img.shields.io/npm/v/react-native-text-input-otp?style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-text-input-otp\"\u003e![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-text-input-otp?color=%232CA215\u0026label=WEEKLY%20DOWNLOADS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://github.com/mmusaib/react-native-text-input-otp/stargazers\"\u003e![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-text-input-otp?label=Give%20Us%20A%20Star\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.youtube.com/channel/UCSwIR2KBHiqiProH3Me8IZQ\"\u003e![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS\u0026style=for-the-badge)\u003c/a\u003e | \u003ca href=\"https://www.npmjs.com/package/react-native-text-input-otp\"\u003e![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-text-input-otp?color=%232CA215\u0026style=for-the-badge)\u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003e\n  🏳️‍🌈  React Native OTP Text Input\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n🟢 Splitted OTP Text Input for ReactNative and Expo powered apps\n\n\u003ca href=\"https://twitter.com/_mmusaib\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\n\u003cdiv style=\"display:flex;justify-content:space-evenly;align-items:center\"\u003e\n    \nAndroid Demo           |  iOS Demo\n:-------------------------:|:-------------------------:\n![](https://i.imgur.com/IFq4drO.gif)  |  ![](https://i.imgur.com/uAir1in.gif)\n    \n\u003c/div\u003e\n\n\n\n\u003ch4\u003eLight Weight and \u003cb\u003eRobust\u003c/b\u003e Splitted Text Input.\u003c/h4\u003e\n\n-   Design split OTP component of your choice \n-   Pass number of OTP digits by your choice\n-   Fully Customizable by props\n-   Very Easy to use\n-   Make your apps professional in UI/UX\n\n\n\n\n# Compatibility\n\n\n|  iOS  | Android | Expo |\n--------|---------|------|\n|  ✅  |    ✅    |  ✅  |\n\n\n\n\n# 🔌 Installation\n\n```sh\n$ npm install react-native-text-input-otp\n\n```\n\nOR\n\n```sh\n$ yarn add react-native-text-input-otp\n```\n\n\n\n\n# 😎 Displaying the otp input\nAll you need is to just import the otp text input component and then pass the \nrequired props to display the splitted otp text input as shown in the code snippet below:\n\n```jsx\nimport OtpTextInput from 'react-native-text-input-otp'\n\nconst App = () =\u003e {\n  const [otp, setOtp] = React.useState('');\n\n  return(\n    \u003cOtpTextInput \n        otp={ otp }\n        setOtp={ setOtp }\n        digits={5} \n    /\u003e\n  )\n\n};\n```\n\n\n\nFor Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-text-input-otp?platform=android)\n\n# ⭐ Props  for  the component\n| Name | Type | Reuired | Description |\n| ---- | ----------- | ------ | ----------- |\n| otp | state variable | Yes | State variable to store the otp\n| setOtp | state update method | Yes | Method to update state variable\n| digits | numeric | Yes | No of otp split fields\n| style | style object | No | Style of the input fields\n| fontStyle | style object | No | Style of font in input fields\n| focusedStyle | style object | No | Style of field when in focus\n\n\n\n# 💲 Would you like to support me?\n\nIf you would like me come up with similar packages, buy me a cup of coffee to boost my energy.\n\u003cbr\u003e\u003cbr\u003e\n[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/mmusaib)\n\u003cbr\u003e\u003cbr\u003e\n\n\n\n # ▶️ Watch Tutorial Video \n\n [![Watch video](https://i.imgur.com/gNvhDd1.png)](https://youtu.be/Iae1OxiD3fQ)\n\n\n\u003c!-- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-text-input-otp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmusaib%2Freact-native-text-input-otp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmusaib%2Freact-native-text-input-otp/lists"}