React-native-text-input-otp NPM

🟢 Splitted OTP Text Input for ReactNative and Expo powered apps

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

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

$ 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:

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

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

  return(
    <OtpTextInput 
        otp={ otp }
        setOtp={ setOtp }
        digits={5} 
    />
  )

};

For Live Demo (Expo Snack)

⭐ 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