{"id":4293,"url":"https://github.com/retyui/react-native-confirmation-code-field","last_synced_at":"2025-08-04T01:31:45.918Z","repository":{"id":38305408,"uuid":"145131839","full_name":"retyui/react-native-confirmation-code-field","owner":"retyui","description":"A react-native confirmation code field compatible with iOS, Android and Web","archived":false,"fork":true,"pushed_at":"2024-03-21T09:12:17.000Z","size":11855,"stargazers_count":1074,"open_issues_count":2,"forks_count":125,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-01T02:37:01.924Z","etag":null,"topics":["android","code-verification","ios","one-time-password","otp-inputs","pin-code","react-native","react-native-component","react-native-library","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ttdung11t2/react-native-confirmation-code-input","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/retyui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-08-17T14:40:34.000Z","updated_at":"2024-11-29T10:53:29.000Z","dependencies_parsed_at":"2023-07-17T01:24:21.677Z","dependency_job_id":null,"html_url":"https://github.com/retyui/react-native-confirmation-code-field","commit_stats":{"total_commits":174,"total_committers":17,"mean_commits":"10.235294117647058","dds":0.5747126436781609,"last_synced_commit":"97aa2c0d64dd2cff995f5471785b2c55032f6772"},"previous_names":["retyui/react-native-confirmation-code-input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-confirmation-code-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-confirmation-code-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-confirmation-code-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-native-confirmation-code-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/retyui","download_url":"https://codeload.github.com/retyui/react-native-confirmation-code-field/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"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","code-verification","ios","one-time-password","otp-inputs","pin-code","react-native","react-native-component","react-native-library","react-native-web"],"created_at":"2024-01-05T20:17:07.142Z","updated_at":"2025-08-04T01:31:45.430Z","avatar_url":"https://github.com/retyui.png","language":"TypeScript","readme":"# react-native-confirmation-code-field\n\n[![react-native-confirmation-code-field on npm](https://badgen.net/npm/v/react-native-confirmation-code-field)](https://www.npmjs.com/package/react-native-confirmation-code-field)\n[![react-native-confirmation-code-field downloads](https://badgen.net/npm/dm/react-native-confirmation-code-field)](https://www.npmtrends.com/react-native-confirmation-code-field)\n[![react-native-confirmation-code-field install size](https://packagephobia.com/badge?p=react-native-confirmation-code-field)](https://packagephobia.com/result?p=react-native-confirmation-code-field)\n[![CI status](https://github.com/retyui/react-native-confirmation-code-field/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/react-native-confirmation-code-field/actions/workflows/nodejs.yml)\n\nA simple react-native confirmation code field compatible with iOS, Android.\n\n### Links\n\n- [Documentation](API.md)\n- [Example app](examples/DemoCodeField)\n- [Live Expo app](https://snack.expo.dev/@retyui/demo-for-react-native-confirmation-code-field)\n\n### Component features:\n\n- 🔮 Simple and tiny `3.8 KB`. Easy to use;\n- 🚀 React Compiler compatible; \n\n\u003cimg width=\"516\" alt=\"devtools image\" src=\"https://github.com/user-attachments/assets/208900e7-eb70-411b-93bb-17570a5f3884\" /\u003e\n\n- 🚮 Clearing part of the code by clicking on the cell;\n- 🍎 Support \"fast paste SMS-code\" on iOS \u0026 Web. And custom code paste for Android;\n- ⚡ TextInput `ref` support;\n- 🛠 Highly customizable. Can be used as masked TextInput;\n- 🤓 Readable [changelog](CHANGELOG.md).\n\n## Screenshots\n\n|     |     |\n| --- | --- |\n| [![react-native-confirmation-code-field animated example](https://media.giphy.com/media/huJrqF0YRrNJBTwUmz/giphy.gif)](examples/DemoCodeField/src/AnimatedExample) | [![react-native-confirmation-code-field mask example](https://media.giphy.com/media/L4HHvT9Rwdlcdj59np/giphy.gif)](examples/DemoCodeField/src/MaskExample)\u003cbr/\u003e[![react-native-confirmation-code-field unmask example](https://media.giphy.com/media/jslJYqajRARsyANwdf/giphy.gif)](examples/DemoCodeField/src/UnmaskExample)\u003cbr/\u003e[![react-native-confirmation-code-field underline example](https://media.giphy.com/media/XEazF64IwELNV8wZge/giphy.gif)](examples/DemoCodeField/src/UnderlineExample)\u003cbr/\u003e[![react-native-confirmation-code-field formatting example](https://media.giphy.com/media/Y1TB1fSFtWHAdKSpZY/giphy.gif)](examples/DemoCodeField/src/FormattingExample) |\n\n## Install\n\n```sh\nyarn add react-native-confirmation-code-field\n```\n\n## How it works\n\nI use an invisible `\u003cTextInput/\u003e` component that will be stretched over `\u003cCell/\u003e` components.\n\nJSX structure looks like that:\n\n```jsx\n// Root view (rectangle with a red border on 3d visualization below)\n\u003cView style={rootStyle}\u003e\n  // Each Cell element is result of a `renderCell` function (gray boxes)\n  \u003cCell\u003e1\u003c/Cell\u003e\n  \u003cCell\u003e2\u003c/Cell\u003e\n  \u003cCell\u003e3\u003c/Cell\u003e\n  \u003cCell\u003e|\u003c/Cell\u003e\n  \u003cCell\u003e\u003c/Cell\u003e\n  \u003cCell\u003e\u003c/Cell\u003e\n  // Invisible Text Input with absolute position (gray rectangle with text '123')\n  \u003cTextInput value=\"123\"/\u003e\n\u003c/View\u003e\n```\n\n[![3d layout of component](https://media.giphy.com/media/oyYoYUwM3t9O7BuPDO/giphy.gif)](https://codepen.io/retyui/pen/WNGdNdJ)\n\nIt needs to solve next problems:\n\n- When user pastes code from SMS on iOS [issue#25](https://github.com/retyui/react-native-confirmation-code-field/issues/25#issuecomment-446497934)\n- Better UX when user types fast, or system sluggish, characters might lost when component switching focus between `\u003cTextInput/\u003e`.\n\n## Basic example\n\nI took a minimal implementation approach.\nIt mean that this component provides low-level functionality so you can create incredible UI without tears 😭.\nI recommend you start with creating your own wrapper where you apply all styles and basic configuration.\n\nYou can use a ready-made solution out of the box:\n\n- [Animated variant](examples/DemoCodeField/src/AnimatedExample)\n- [Formatting example](examples/DemoCodeField/src/FormattingExample)\n- [Underline variant](examples/DemoCodeField/src/UnderlineExample)\n- [Show \u0026 Hide password](examples/DemoCodeField/src/UnmaskExample)\n- [Mask variant](examples/DemoCodeField/src/MaskExample)\n\n```tsx\nimport React, {useState} from 'react';\nimport {SafeAreaView, Text, StyleSheet, Platform} from 'react-native';\nimport type {TextInputProps} from 'react-native';\n\nimport {\n  CodeField,\n  Cursor,\n  useBlurOnFulfill,\n  useClearByFocusCell,\n} from 'react-native-confirmation-code-field';\n\nconst styles = StyleSheet.create({\n  root: {flex: 1, padding: 20},\n  title: {textAlign: 'center', fontSize: 30},\n  codeFieldRoot: {marginTop: 20},\n  cell: {\n    width: 40,\n    height: 40,\n    lineHeight: 38,\n    fontSize: 24,\n    borderWidth: 2,\n    borderColor: '#00000030',\n    textAlign: 'center',\n    color: '#000', // text color\n  },\n  focusCell: {\n    borderColor: '#000',\n  },\n});\n\nconst CELL_COUNT = 6;\nconst autoComplete = Platform.select\u003cTextInputProps['autoComplete']\u003e({\n  android: 'sms-otp',\n  default: 'one-time-code',\n});\n\nfunction App() {\n  const [value, setValue] = useState('');\n  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});\n  const [props, getCellOnLayoutHandler] = useClearByFocusCell({\n    value,\n    setValue,\n  });\n\n  return (\n    \u003cSafeAreaView style={styles.root}\u003e\n      \u003cText style={styles.title}\u003eVerification\u003c/Text\u003e\n      \u003cCodeField\n        ref={ref}\n        {...props}\n        // Use `caretHidden={false}` when users can't paste a text value, because context menu doesn't appear\n        value={value}\n        onChangeText={setValue}\n        cellCount={CELL_COUNT}\n        rootStyle={styles.codeFieldRoot}\n        keyboardType=\"number-pad\"\n        textContentType=\"oneTimeCode\"\n        autoComplete={autoComplete}\n        testID=\"my-code-input\"\n        renderCell={({index, symbol, isFocused}) =\u003e (\n          \u003cText\n            key={index}\n            style={[styles.cell, isFocused \u0026\u0026 styles.focusCell]}\n            onLayout={getCellOnLayoutHandler(index)}\u003e\n            {symbol || (isFocused \u0026\u0026 \u003cCursor /\u003e)}\n          \u003c/Text\u003e\n        )}\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n```\n\n### Compatibility\n\nFor `react-native@0.63.x` and below use `yarn add react-native-confirmation-code-field@6`, otherwise use the latest version `yarn add react-native-confirmation-code-field`\n\n","funding_links":[],"categories":["Components","React Native","TypeScript"],"sub_categories":["UI","Forms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-native-confirmation-code-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fretyui%2Freact-native-confirmation-code-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-native-confirmation-code-field/lists"}