Repository navigation
feat(otp): add OtpField, a verification code input with SMS autofill, plus migration guides - #83
Merged
Merged
Conversation
… plus migration guides OtpField takes a one-time code in a box per character. One hidden TextInput lies over the boxes, so typing, long-press paste, screen readers and the code the OS offers from a text message all work (oneTimeCode on iOS and the web, sms-otp on Android). A pasted message keeps only the code's characters. It takes length, numeric or text input, secure dots for a PIN, autoFocus and disabled; onChange fires on user changes and onComplete once the last box is filled. The boxes are drawn like each design's text fields, with a blinking caret in the next one. New migration guides map @react-native-community/slider, @ptomasroos/react-native-multi-slider, react-native-otp-entry, react-native-confirmation-code-field and react-native-ui-datepicker to the library. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
useOtpField's inferred return held React Native's internal AnimatedValue, which tsc can't name in the declarations (TS2883). It now returns OtpFieldState, and useCaretBlink an Animated.Value. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
OtpField
A one-time code in a box per character, for the step after
PhoneFieldin a phone sign-in.TextInputlies over the boxes, so typing, long-press paste, screen readers and SMS autofill all work:oneTimeCodeon iOS and the web,sms-otpon Android.482913.length(6),inputMode(numeric|text),secureTextEntry,autoFocus,disabled,accessibilityLabel.onChangefires on user changes only, andonCompleteonce the last box is filled.FIELD_DESIGN, so they look like each design's text fields, with a blinking caret in the next box. Slots:container,cell,focusedCell,filledCell,cellText,caret.caretHiddenis left off on purpose: it hides Android's paste menu.value='', hide the keyboard withKeyboard.dismiss()inonComplete) and anerrorprop (a red border is onestyles.celloverride; the docs show it).Migration guides
New guides for libraries with high weekly downloads that had none:
@react-native-community/slider@ptomasroos/react-native-multi-sliderreact-native-otp-entryreact-native-confirmation-code-fieldreact-native-ui-datepickerProp mappings follow each library's current README.
Docs
Component page with a playground, catalog, live controls, home grid and Hero, API reference, the designs, styling and typescript guides, intro, the AI cheat sheet, README, and the SEO descriptions and keywords.
Checks
pnpm lint,pnpm typecheckandpnpm test(693 tests) pass.pnpm docs:buildpasses with no broken links.🤖 Generated with Claude Code