https://github.com/mmusaib/react-native-text-input-otp

A react native/expo package for splitted otp text inputs
https://github.com/mmusaib/react-native-text-input-otp

expo expo-otp-input otp otp-input react-naive react-native-otp-input react-native-otp-text-input react-native-text-input-otp split-otp

Last synced: 3 months ago
JSON representation

A react native/expo package for splitted otp text inputs

• Host: GitHub
• URL: https://github.com/mmusaib/react-native-text-input-otp
• Owner: mmusaib
• License: mit
• Created: 2024-01-11T18:59:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-18T16:05:22.000Z (8 months ago)
• Last Synced: 2025-02-10T19:29:12.670Z (4 months ago)
• Topics: expo, expo-otp-input, otp, otp-input, react-naive, react-native-otp-input, react-native-otp-text-input, react-native-text-input-otp, split-otp
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-text-input-otp
• Size: 356 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
|                          | |  |   |   |

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

| ![NPM VERSION](https://img.shields.io/npm/v/react-native-text-input-otp?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-text-input-otp?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-text-input-otp?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-text-input-otp?color=%232CA215&style=for-the-badge)



  🏳️‍🌈  React Native OTP Text Input





🟢 Splitted OTP Text Input for ReactNative and Expo powered apps







    

Android Demo           |  iOS Demo

:-------------------------:|:-------------------------:

![](https://i.imgur.com/IFq4drO.gif)  |  ![](https://i.imgur.com/uAir1in.gif)

    



Light Weight and Robust Splitted Text Input.


-   Design split OTP component of your choice 

-   Pass number of OTP digits by your choice

-   Fully Customizable by props

-   Very Easy to use

-   Make your apps professional in UI/UX

# Compatibility

|  iOS  | Android | Expo |

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

|  ✅  |    ✅    |  ✅  |

# 🔌 Installation

```sh

$ npm install react-native-text-input-otp

```

OR

```sh

$ yarn add react-native-text-input-otp

```

# 😎 Displaying the otp input

All you need is to just import the otp text input component and then pass the 

required props to display the splitted otp text input as shown in the code snippet below:

```jsx

import OtpTextInput from 'react-native-text-input-otp'

const App = () => {

  const [otp, setOtp] = React.useState('');

  return(

    

  )

};

```

For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-text-input-otp?platform=android)

# ⭐ Props  for  the component

| Name | Type | Reuired | Description |

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

| otp | state variable | Yes | State variable to store the otp

| setOtp | state update method | Yes | Method to update state variable

| digits | numeric | Yes | No of otp split fields

| style | style object | No | Style of the input fields

| fontStyle | style object | No | Style of font in input fields

| focusedStyle | style object | No | Style of field when in focus

# 💲 Would you like to support me?

If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.





[![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/mmusaib)





 # ▶️ Watch Tutorial Video 

 [![Watch video](https://i.imgur.com/gNvhDd1.png)](https://youtu.be/Iae1OxiD3fQ)