@darkas20/rn-code-field

react-native-confirmation-code-field

A react-native confirmation code field for both IOS and Android (base on this project Migration Guide)

Component features:

• 🔮 Simple. Easy to use.
• 🍎 IOS "fast paste SMS-code" support.
• 🚮 Clearing part of the code by clicking on the cell
• 🛠 Extendable and hackable.
• 🤓 Readable changelog.

Links

• API documentation
• Example
• Live demo IOS / Android, react-native-web

Screenshots

Install

yarn add react-native-confirmation-code-field
# or
npm install react-native-confirmation-code-field

Usage

import React, { Component } from 'react';
import CodeInput from 'react-native-confirmation-code-field';

class App extends Component {
  handlerOnFulfill = code => console.log(code);

  render() {
    return <CodeInput onFulfill={this.handlerOnFulfill} />;
  }
}

How it works?

This component consists of:

1. Container <View {...containerProps}/>;
2. Render the "Cells" for the text code inside the container ("Cells" is <TextInput {...cellProps} />);
3. And over this render invisible <TextInput {...inputProps}/>;
4. "Cursor" inside cell is simulated component