| NPM VERSION | NPM WEEKLY DOWNLOADS | GITHUB STAR | YOUTUBE VIEWS | NPM LIFETIME DOWNLOADS |
- 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
| iOS | Android | Expo |
|---|---|---|
| β | β | β |
$ npm install react-native-text-input-otp
OR
$ yarn add react-native-text-input-otp
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)
| 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 |
If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.
Paypal