# react-native-otp-keyboard

> Component for custom OTP Keyboard for React Native/Expo apps

Latest version **1.0.0** (published 2021-11-30) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-11-30 |
| First published | 2021-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kartikey Vaish |
| Maintainers | kartikeyvaish |
| Keywords | OTP Input, OTP Keyboard, OTP Keyboard Component, react-native, react-native-otp-keyboard, expo-otp-keyboard, otp-input-keyboard, custom-otp-keyboard, custom-otp-keyboard-android, custom-otp-keyboard-ios, react-native-otp-keyboard-android, react-native-otp-keyboard-ios, otp, code, fields |

## Links

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

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-11-30

## README

# react-native-otp-keyboard

A package for Custom OTP keyboard. This can be customized according to needs.

Compatible with both React Native CLI and Expo Managed apps.

- [Installation](https://github.com/kartikeyvaish/react-native-otp-keyboard#installation)
- [Usage](https://github.com/kartikeyvaish/react-native-otp-keyboard#usage)
- [Docs](https://github.com/kartikeyvaish/react-native-otp-keyboard#parameters)

## Installation

```javascript
npm i react-native-otp-keyboard
```

## Usage

Below are some examples to use this package

### Basic Usage

```javascript
import OTPInput from "react-native-otp-keyboard";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPKeyboard
  onSubmitPress={(text: string) => console.log(text)}
  onPress={SetOTP}
/>;
```

<img src="./example/assets/images/Basic.jpg" width="40%" >

---

### Some Examples

<img src="./example/assets/images/BorderRadius.jpg" width="40%" >
<img src="./example/assets/images/CustomSize.jpg" width="40%" >
<img src="./example/assets/images/Elevation.jpg" width="40%" >
<img src="./example/assets/images/Width.jpg" width="40%" >

---

## Parameters

| Parameter               | required | Default                | Description                                                             |
| ----------------------- | -------- | ---------------------- | ----------------------------------------------------------------------- |
| keys                    | NO       | `See Docs`             | Keys array to display, you can manipulate it. Take a look at the Props. |
| backspaceComponent      | NO       | null                   | component to render in place of backspace key                           |
| submitComponent         | NO       | null                   | component to render in place of submit key                              |
| keyboardStyle           | NO       |                        | styling for keyboard container                                          |
| digitBoxStyle           | NO       |                        | styling for each digit box                                              |
| keyboardBackgroundColor | NO       | `white`                | background color for keyboard container                                 |
| digitBoxBackgroundColor | NO       |                        | background color for digit box container                                |
| digitColor              | NO       | 60                     | Each digit text color                                                   |
| width                   | NO       | `Screen Width`         | width of the keyboard container                                         |
| height                  | NO       | `40% of Screen Height` | height of the keyboard container                                        |
| onPress                 | NO       |                        | callback to execute when user presses the key                           |
| onSubmitPress           | NO       |                        | callback to execute when user presses the submit key                    |
| maxLength               | NO       |                        | maxLength of keyboard input                                             |

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