react-native-otp-textinput
Version:
Textview usable for OTP implementation
101 lines (73 loc) • 4.17 kB
Markdown
React Native Component that can used for OTPs and Pins as secure pin input.
[](https://badge.fury.io/js/react-native-otp-textinput)
```
npm i -S react-native-otp-textinput
```
<img src="ScreenShots/demo.gif" width="220px"><br>
Check the `Example` react native app for usage.
Supports both Android and iOS.
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 |
| offTintColor | string | Yes |
| 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 | 'otp*input*' | 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 |
Clearing and Setting values to component
```javascript
// using traditional ref
clearText = () => {
this.otpInput.clear();
}
setText = () => {
this.otpInput.setValue("1234");
}
render() {
return (
<View>
<OTPTextInput ref={e => (this.otpInput = e)} >
<Button title="clear" onClick={this.clearText}>
</View>
);
}
```
```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 (
<View>
<OTPTextInput ref={e => (otpInput = e)} >
<Button title="clear" onClick={clearText}>
</View>
);
}
```
If you think I have helped you, feel free to get me coffee. 😊
<a href="https://www.buymeacoffee.com/naveenvignesh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" height="60" ></a>