Textview usable for OTP implementation
npm install react-native-otp-textinputReact Native Component that can used for OTPs and Pins as secure pin input.

!npm downloads
#### Installation
```
npm i -S react-native-otp-textinput
#### Demo

#### How to Use
Check the Example react native app for usage.
#### Platform Support
Supports both Android and iOS.
#### Props
The following props are applicable for the component along with props supported by react native TextInput component
| Prop | Type | Optional | Default | Description |
| -------------------- | ------ | -------- | ------------ | -------------------------------------------------------------------------------------- |
| defaultValue | string | Yes | '' | Default Value that can be set based on OTP / Pin received from parent container. |
| handleTextChange | func | No | n/a | callback with concated string of all cells as argument. |
| handleCellTextChange | func | Yes | n/a | callback for text change in individual cell with cell text and cell index as arguments |
| inputCount | number | Yes | 4 | Number of Text Input Cells to be present. |
| tintColor | string | Yes | #3CB371 | Color for Cell Border on being focused. |
| offTintColor | string | Yes | #DCDCDC | Color for Cell Border Border not focused. |
| inputCellLength | number | Yes | 1 | Number of character that can be entered inside a single cell. |
| containerStyle | object | Yes | {} | style for overall container. |
| textInputStyle | object | Yes | {} | style for text input. |
| testIDPrefix | string | Yes | 'otpinput' | testID prefix, the result will be otp_input_0 until inputCount |
| autoFocus | bool | Yes | false | Input should automatically get focus when the components loads |
| onBlur | func | Yes | n/a | Callback that is called when the text input is blurred. |
| onFocus | func | Yes | n/a | Callback that is called when the text input is focused. |
| disabled | func | Yes | false | To disable the input |
#### Helper Functions
Clearing and Setting values to component
`javascript
// using traditional ref
clearText = () => {
this.otpInput.clear();
}
setText = () => {
this.otpInput.setValue("1234");
}
render() {
return (
);
}
`
`javascript
// hooks
import React, { useRef } from 'react';
const ParentComponent = () => {
let otpInput = useRef(null);
const clearText = () => {
otpInput.current.clear();
}
const setText = () => {
otpInput.current.setValue("1234");
}
return (
);
}
``
#### If you like the project
If you think I have helped you, feel free to get me coffee. 😊