react-native-otp-textinput

$3

React 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 (

(this.otpInput = e)} >


);
}
`

`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 (

(otpInput = e)} >




);
}
``

#### If you like the project

If you think I have helped you, feel free to get me coffee. 😊