react-native-otp-field

React Native UI Component to input OTPs.

Usage no npm install needed!

<script type="module">
  import reactNativeOtpField from 'https://cdn.skypack.dev/react-native-otp-field';
</script>

README

react-native-otp-field

React Native OTP Field

:one: :two: :three: :four: :five:

Installation

npm i react-native-otp-field

RN < 0.63

npm i react-native-otp-field@0.0.7

A tiny library that works on both android and iOS.

Props

Props Type Description
length Number OTP length
value String OTP string
onChange Function called when OTP is changed with new value as argument
textFieldStyle Object style for text field
containerStyle Object style for text field container.
error string error text to display.
errorStyle Object style for error container.

Note: It accepts all other props of RN TextField

Usage:

import OTPField from 'rn-otp-field';

render() {
  return {
    ...
    <OTPField
      length={5}
      value={'123'}
      error={'Please fill in complete OTP.'}
    />
    ...
  };
}

Image of OTPField