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.
- 🚮 Clearing part of the code by clicking on the cell
- 🛠 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 it works?
This component consists of:
- Container
<View {...containerProps}/>
; - Render the "Cells" for the text code inside the container ("Cells" is
<Text {...cellProps} />
); - And over this render invisible
<TextInput {...inputProps}/>
; - "Cursor" inside cell is simulated component