/react-native-confirmation-code-field

A react-native component to input confirmation code for both Android, IOS and WEB

Primary LanguageJavaScriptMIT LicenseMIT

react-native-confirmation-code-field

npm Travis

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 (* and custom code paste for Android);
  • 🚮 Clearing part of the code by clicking on the cell;
  • ⚡ blur() and focus() methods support;
  • 🛠 Extendable and hackable;
  • 🤓 Readable changelog.

Links

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} />;
  }
}

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