OTP Input component for React Native
npm install react-native-otp
![npm]()
![npm]()
OTP Input component for React Native
- The behavior is the same with the native input component, the only difference is the OTP UI
- Can use as Controlled component (support clear OTP, autofill OTP) and Uncontrolled component
- Easy to customize style
- No additional dependencies
NPM
``npm install react-native-otp`
Yarn
`yarn add react-native-otp`
1. Controlled component
`javascript
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import OTPInput from './otp';
export default class App extends React.Component {
state = {
otp: ''
}
handleOTPChange = (otp) => {
this.setState({ otp })
}
clearOTP = () => {
this.setState({ otp: undefined })
}
autoFill = () => {
this.setState({ otp: '221198' })
}
render() {
return (
onChange={this.handleOTPChange}
tintColor="#FB6C6A"
offTintColor="#BBBCBE"
otpLength={6}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
marginBottom: 15
}
});
`
1. Uncontrolled component
`javascript
offTintColor="#BBBCBE"
otpLength={6}
/>
``
| Name | Type | Default | Description |
| ------------------------------ | ---------------- | -------------- | -------------------------------------------------------------------------------------------- |
| value | string | undefined | This value will be applied to the TextInput. Use this prop if you want a Controlled Component. |
| onChange | function | () => null | On otp input change |
| otpLength | number | 6 | length of otp numbers |
| tintColor | string | '#FB6C6A' | active cell underline color |
| offTintColor | string | '#BBBCBE' | cell under line color |
| containerStyle | object | {} | overide container style |
| cellStyle | object | {} | overide cell style |
| all other Text Input properties | | | Use this if you want to apply any other property to Text Input |