react-native-confirmation-code-field
![Travis](https://img.shields.io/travis/retyui/react-native-confirmation-code-field.svg?label=unix)
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
![](https://raw.githubusercontent.com/retyui/react-native-confirmation-code-field/master/docs/img/redDemo.jpg)
![](https://raw.githubusercontent.com/retyui/react-native-confirmation-code-field/master/docs/img/darkDemo.jpg)
Install
yarn add react-native-confirmation-code-field
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:
- Container
<View {...containerProps}/>
; - Render the "Cells" for the text code inside the container ("Cells" is
<TextInput {...cellProps} />
); - And over this render invisible
<TextInput {...inputProps}/>
; - "Cursor" inside cell is simulated component