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)

Component features:

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

Links

• API documentation
• Examples
• Live demos 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 paste or clear code

Paste code can helpful for Android platform when you can read SMS.

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

class App extends Component {
  handlerOnFulfill = code => {
    if (isValidCode(code)) {
      console.log(code);
    } else {
      this.clearCode();
    }
  };

  field = createRef();

  clearCode() {
    const { current } = this.field;

    if (current) {
      current.clear();
    }
  }

  pasteCode() {
    const { current } = this.field;

    if (current) {
      current.handlerOnTextChange(value);
    }
  }

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

Analogs

• react-native-keycode
• react-native-pin-code

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