react-native-confirmation-code-field

react-native-confirmation-code-field

A react-native confirmation code field compatible with iOS, Android and Web Platforms (based on this project Migration Guide)

Links

• Documentation

Component features:

• 🔮 Simple. Easy to use;
• 🚮 Clearing part of the code by clicking on the cell;
• 🍎 Support "fast paste SMS-code" on iOS. And custom code paste for Android;
• ⚡ TextInput ref support;
• 🛠 Extendable and hackable;
• 🤓 Readable changelog.

Screenshots

Install

yarn add react-native-confirmation-code-field

How it work

I use an invisible <TextInput/> component that absolutely stretched over <Cell/> components to have ability paste code normally on iOS issue#25

import React, {useState} from 'react';
import {Text} from 'react-native';

import {CodeFiled, Cursor} from 'react-native-confirmation-code-field';

const CELL_COUNT = 6;

const App = () => {
  const [value, setValue] = useState('12');

  return (
    <CodeFiled
      value={value}
      onChangeText={setValue}
      cellCount={CELL_COUNT}
      renderCell={({index, symbol, isFocused}) => (
        //
        <Text key={index}>{symbol || (isFocused ? <Cursor /> : null)}</Text>
      )}
    />
  );
};