react-native-confirmation-code-field

react-native-confirmation-code-field

A simple react-native confirmation code field compatible with iOS, Android.

Links

• Documentation
• Example app
• Live Expo app

Component features:

• Simple and tiny 3.8 KB. Easy to use;

• React Compiler compatible;

• Clearing part of the code by clicking on the cell;

• Support "fast paste SMS-code" on iOS & Web. And custom code paste for Android;

• ⚡ TextInput ref support;

• Highly customizable. Can be used as masked TextInput;

• Readable changelog.

Screenshots

Install

yarn add react-native-confirmation-code-field
# ^^^ React 19 required!
# if you want to use it with React 18, use version 8.x.x

How it works

I use an invisible component that will be stretched over components.

JSX structure looks like that:

// Root view (rectangle with a red border on 3d visualization below)

  // Each Cell element is result of a `renderCell` function (gray boxes)
  1
  2
  3
  |
  
  
  // Invisible Text Input with absolute position (gray rectangle with text '123')
  

It needs to solve next problems:

• When user pastes code from SMS on iOS issue#25
• Better UX when user types fast, or system sluggish, characters might lost when component switching focus between ``.

Basic example

I took a minimal implementation approach. It mean that this component provides low-level functionality so you can create incredible UI without tears . I recommend you start with creating your own wrapper where you apply all styles and basic configuration.

You can use a ready-made solution out of the box:

• Animated variant
• Formatting example
• Underline variant
• Show & Hide password
• Mask variant

…

Compatibility

For [email protected] and below use yarn add react-native-confirmation-code-field@6, otherwise use the latest version yarn add react-native-confirmation-code-field