react-native-otp-inputs is fully customizable, pure JavaScript package, that provides solution for One-time password feature with user friendly events like moving to previous input with backspace or going to next when filled in. It supports pasting and otp code into inputs
| React-Native version | installation |
|---|---|
| >= 0.53.0 < 0.57.0 | yarn add [email protected] |
| <= 0.57.0 | yarn add [email protected] |
| <= 0.59.0 | yarn add react-native-otp-inputs |
Android setup requires react-native-keyevent package to work properly.
- Add
react-native-keyeventto your dependencies with
yarn add react-native-keyevent- If you are using react-native < 0.60.0 then follow these steps
- If you are using react-native >= 0.60.0 then add this to your dependencies in
react-native.config.js
'react-native-keyevent': {
platforms: {
ios: null,
},
},- Then follow configuration for Android here (If you have problems, check Example App configuration)
import React, { Component } from 'react';
import { View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<OtpInputs handleChange={code => console.log(code)} numberOfInputs={6} />
</View>
);
}
}| Method | Type | Required | Default | Description |
|---|---|---|---|---|
| autoCapitalize | string | false | 'none' | |
| clearTextOnFocus | boolean | false | false | |
| handleChange | function | true | console.log | Returns otp code. |
| keyboardType | string | true | 'phone-pad' | |
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
| secureTextEntry | boolean | false | false | |
| selectTextOnFocus | boolean | false | true iOS Only | |
| testIDPrefix | string | false | otpInput-${inputIndex} | Prefix for testID. |
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
| placeholder | string | false | none | Placeholder for the input boxes. |
| styles | style (object) | false | default | Applied to whole container. |
| focusStyles | style (object) | false | default | Applied to the input on focus. |
| inputStyles | style(object) | false | default | Applied to single input. |
| inputContainerStyles | style (object) | false | default | Applied to each input container. |
| ...restTextInputProps | TextInput |
Those can be called on ref:
| Method | Description |
|---|---|
| reset | Reset inputs and returns to handleChange method empty string |
import React, { Component } from 'react';
import { Button, View } from 'react-native';
import OtpInputs from 'react-native-otp-inputs';
export default class App extends Component {
otpRef = React.createRef();
resetOTP = () => {
this.otpRef.current.reset();
};
render() {
return (
<View style={styles.container}>
<Button title="Reset" onPress={this.resetOTP} />
<OtpInputs ref={this.otpRef} handleChange={code => console.log(code)} numberOfInputs={6} />
</View>
);
}
}Great thanks to : @kantorm.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent