https://github.com/naveenvignesh5/react-native-otp-textinput
Text View usable for OTP / Pin implementation
https://github.com/naveenvignesh5/react-native-otp-textinput
otp-view react react-native textinput textinputfield typescript
Last synced: 10 months ago
JSON representation
Text View usable for OTP / Pin implementation
- Host: GitHub
- URL: https://github.com/naveenvignesh5/react-native-otp-textinput
- Owner: naveenvignesh5
- License: mit
- Created: 2018-07-12T07:40:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-26T05:44:30.000Z (12 months ago)
- Last Synced: 2025-04-09T23:59:25.218Z (10 months ago)
- Topics: otp-view, react, react-native, textinput, textinputfield, typescript
- Language: TypeScript
- Homepage:
- Size: 16.8 MB
- Stars: 163
- Watchers: 1
- Forks: 59
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
### REACT NATIVE OTP TEXT INPUT
React Native Component that can used for OTPs and Pins as secure pin input.
[](https://badge.fury.io/js/react-native-otp-textinput)
#### 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 | '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 |
#### 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. 😊
