A light weight react-native and expo split text input
npm install react-native-text-input-otp| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
| !NPM VERSION | !NPM WEEKLY DOWNLOADS | !GITHUB STAR | !YOUTUBE VIEWS | !NPM LIFETIME DOWNLOADS
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(
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
š² 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.

# ā¶ļø Watch Tutorial Video
