https://github.com/abdymm/react-native-otp-form

UI Component For OTP Input Form
https://github.com/abdymm/react-native-otp-form

component otp react-native

Last synced: about 2 months ago
JSON representation

UI Component For OTP Input Form

• Host: GitHub
• URL: https://github.com/abdymm/react-native-otp-form
• Owner: abdymm
• Created: 2021-03-12T00:36:49.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T04:39:05.000Z (9 months ago)
• Last Synced: 2024-04-27T13:42:07.671Z (8 months ago)
• Topics: component, otp, react-native
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-otp-form
• Size: 943 KB
• Stars: 9
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# `react-native-otp-form`

![npm](https://img.shields.io/npm/v/react-native-otp-form.svg) ![Supports Android, iOS, and Web](https://img.shields.io/badge/platforms-android%20|%20ios%20|%20web-lightgrey.svg) ![MIT License](https://img.shields.io/npm/l/react-native-otp-form.svg)

React Native component for OTP Input Form



  



## Getting started

### Yarn

`yarn add react-native-otp-form`

### NPM

`npm install react-native-otp-form --save`

## Usage

### Example

```javascript

import OTP from "react-native-otp-form"

```

```javascript

```

Check out the [example project](https://github.com/abdymm/react-native-otp-form/tree/master/Example) for more examples.

### Props

- [Inherited `TextInput` props...](https://reactnative.dev/docs/textinput)

| Type              | Required | Description                                                 |

| ----------------- | -------- | ----------------------------------------------------------- |

| codeCount         | Yes      | How many otp box/character                                  |

| containerStyle    | No       | Styles for container `View`                                 |

| otpStyle          | No       | Styles for each of `TextInput`                              |

| onTyping          | No       | Callback to get otp when user typing                        |

| onFinish          | No       | Callback to get otp value when user finish filled all boxes |

| ...TextInputProps | No       | [TextInput Props](https://reactnative.dev/docs/textinput)   |

# Running the Example app

While developing, you can run the example app to test your changes.

## Setup

- Clone the repository

- Go to Example folder (Expo)

- Run `yarn install`

## Start the app (Example in Expo)

- Run `yarn start`

## License

The library is released under the MIT licence. For more information see `LICENSE`.