OtpInput

Usage

function OtpInputUsage() {
  return (
    <View>
      <OtpInput secureTextEntry onComplete={(otp) => alert(otp)} />
    </View>
  )
}

Modes

function OtpInputModes() {
  return (
    <View>
      <OtpInput mode="box" />
      <OtpInput mode="dash" />
    </View>
  )
}

Placeholder

function OtpInputPlaceholder() {
  return (
    <View>
      <OtpInput placeholder="*" status="success" />
    </View>
  )
}

With Cursor

function OtpInputWithCursor() {
  return (
    <View>
      <OtpInput withCursor />
    </View>
  )
}

As Pin Input

function OtpInputAsPin() {
  return (
    <View>
      <OtpInput withCursor secureTextEntry />
    </View>
  )
}

Sizes

function OtpInputSizes() {
  return (
    <View>
      <OtpInput size="small" />
      <OtpInput size="medium" />
      <OtpInput size="large" />
    </View>
  )
}

Custom

function OtpInputCustom() {
  const [isCompleted, setIsCompleted] = React.useState(false)

  return (
    <View>
      <OtpInput
        maxLength={6}
        withAlphanumericKeyboard
        label="Custom OTP Input"
        labelStyle={{color: 'cyan'}}
        caption="Enter your OTP"
        captionStyle={{color: 'green'}}
        error={isCompleted ? 'OTP is required' : ''}
        boxStyle={(isFocused) => ({
          borderRadius: 40,
          backgroundColor: isFocused ? 'blue' : 'gold',
        })}
        inputTextStyle={{
          color: 'black',
          fontWeight: 'bold',
        }}
        onChangeText={(otp) => {
          setIsCompleted(otp.length !== 6)
        }}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	Omit<TextInputProps, 'mode'>	--	Inherits properties from Omit<TextInputProps, 'mode'>
maxLength	number	4	Set the otp input length
boxStyle	StyleProp<ViewStyle> | ((isFocused: boolean) => StyleProp<ViewStyle>)	--	Set the style for each box with isFocused prop
mode	"box" | "dash"	box	different view based on the mode
withCursor	boolean	--	Set it to true to enable otp cursor
withAlphanumericKeyboard	boolean	false	Set the alphanumeric keyboardBy default it will use numeric keyboard
onComplete	(otp: string) => void	--	onComplete callback with otp input text