Component

OTPInput

One-time password input with configurable length and completion callback.

React Native

OTP input

Configurable one-time password entry.

import { useState } from 'react';
import { Text, OTPInput } from '@sohantalukder/rn-kit';

export function VerifyCode() {
  const [code, setCode] = useState('');

  return (
    <>
      <OTPInput length={6} callback={setCode} />
      <Text color="secondary">Entered code: {code || 'Waiting...'}</Text>
    </>
  );
}

Live component

4 digits6 digitscustom style

Keep OTP length aligned with backend policy.
Move focus automatically only when the user enters valid digits.

Usage

import { OTPInput } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { Text, OTPInput } from '@sohantalukder/rn-kit';

export function VerifyCode() {
  const [code, setCode] = useState('');

  return (
    <>
      <OTPInput length={6} callback={setCode} />
      <Text color="secondary">Entered code: {code || 'Waiting...'}</Text>
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

lengthnumber6Number of one-time-password digits to collect.

callback(value: string) => void-Called when the input has collected the expected number of digits.

styleStyleProp<ViewStyle>-Additional style object merged into the root element.

Theme

OTPInput reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

4 digits
6 digits
custom style

Best Practices

Keep OTP length aligned with backend policy.
Move focus automatically only when the user enters valid digits.