Skip to content
A react-native confirmation code field compatible with IOS, Android and Web Platforms
Branch: master
Clone or download
Pull request Compare This branch is 82 commits ahead of ttdung11t2:master.
Latest commit b966703 Jun 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Add new prop to control blur after submitting (#62) May 17, 2019
examples 3.6.0 May 17, 2019
src 3.6.0 May 17, 2019
.editorconfig V2 (#1) Aug 19, 2018
.eslintignore Add public and src folder Apr 15, 2019
.eslintrc.js Update dependencies and typings (#43) Mar 12, 2019
.flowconfig react-native-web (#53) Mar 27, 2019
.gitignore Add public and src folder Apr 15, 2019
.npmignore 3.5.0 Apr 18, 2019
.setup-tests.js V2 (#1) Aug 19, 2018
.travis.yml V2 (#1) Aug 19, 2018
.yaspellerrc 3.6.0 May 17, 2019
CHANGELOG.md 3.6.0 May 17, 2019
LICENSE Update Mar 27, 2019
README.md Update README.md Jun 5, 2019
appveyor.yml V2 (#1) Aug 19, 2018
index.d.ts 3.6.0 May 17, 2019
jest.config.js Update package.json (#51) Mar 26, 2019
lint-staged.config.js 3.5.0 Apr 18, 2019
package.json 3.6.0 May 17, 2019
prettier.config.js V2 (#1) Aug 19, 2018
yarn.lock 3.5.0 Apr 18, 2019

README.md

react-native-confirmation-code-field

npm npm downloads Travis

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

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

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
You can’t perform that action at this time.