react-native-otp
OTP Input component for React Native
Features
- 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)
andUncontrolled component
- Easy to customize style
- No additional dependencies
Preview
Install
NPM
npm install react-native-otp
Yarn
yarn add react-native-otp
Usage
- Controlled component
;;; Component state = otp: '' { this } { this } { this } { return <View style=stylescontainer> <Text style=stylestext>Enter OTP password</Text> <OTPInput value=thisstateotp onChange=thishandleOTPChange tintColor="#FB6C6A" offTintColor="#BBBCBE" otpLength=6 /> <Button onPress=thisclearOTP title="Clear" /> <Button onPress=thisautoFill title="Auto fill" /> </View> ; } const styles = StyleSheet;
- Uncontrolled component
<OTPInput tintColor="#FB6C6A" offTintColor="#BBBCBE" otpLength=6 />
Available props
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 |