# react-native-otp-textinput

> Textview usable for OTP implementation

Latest version **1.1.7** (published 2025-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-otp-textinput
pnpm add react-native-otp-textinput
yarn add react-native-otp-textinput
bun add react-native-otp-textinput
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2025-05-31 |
| First published | 2018-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 184 |
| Author | Naveen Vignesh.B |
| Maintainers | theace56 |
| Keywords | react-native, react-native-component, otp, react-component, ios, android, otp-input |

## Links

- npm: https://www.npmjs.com/package/react-native-otp-textinput
- Repository: https://github.com/naveenvignesh5/react-native-otp-textinput
- Homepage: https://github.com/naveenvignesh5/react-native-otp-textinput#readme
- Issues: https://github.com/naveenvignesh5/react-native-otp-textinput/issues
- npm.io page: https://npm.io/package/react-native-otp-textinput

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.7 (latest) — 2025-05-31
- 1.1.6 — 2024-06-04
- 1.1.5 — 2024-01-14
- 1.1.4 — 2024-01-13
- 1.1.3 — 2023-09-11
- 1.1.2 — 2023-09-11
- 1.1.1 — 2023-07-30
- 1.1.0 — 2023-07-16
- 1.0.1 — 2023-04-30
- 1.0.0 — 2023-01-22
- 0.0.10 — 2023-01-21
- 0.0.9 — 2022-03-25
- 0.0.8 — 2021-01-30
- 0.0.7 — 2020-04-22
- 0.0.6 — 2019-06-16
- … 5 more at https://npm.io/package/react-native-otp-textinput/versions

## README

### REACT NATIVE OTP TEXT INPUT

React Native Component that can used for OTPs and Pins as secure pin input.

[![npm version](https://badge.fury.io/js/react-native-otp-textinput.svg)](https://badge.fury.io/js/react-native-otp-textinput)
![npm downloads](https://img.shields.io/npm/dw/react-native-otp-textinput.svg)

#### Installation

```
npm i -S react-native-otp-textinput
```

#### Demo

<img src="ScreenShots/demo.gif" width="220px"><br>

#### 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                         |
| 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 (
        <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 like the project

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>

---
_Source: https://npm.io/package/react-native-otp-textinput · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._