Feature Proposal: OTPInput Component for React Native

[Ntale3]

Summary

I propose adding a reusable OTPInput component tailored for React Native apps.
This component is inspired by the ShadCN web implementation but adapted for mobile, focusing on usability, keyboard behavior, and mobile UX patterns.

Motivation

OTP inputs are widely used in authentication flows. Adding this component will:

• Standardize OTP input handling across mobile apps
• Reduce duplication in projects
• Provide a robust, tested mobile-first solution for React Native developers

Features

• Custom length: Supports any number of digits via maxLength
• Auto-focus & backspace handling: Moves focus as the user types and deletes
• Numeric keyboard support: Optimized for mobile numeric entry
• Paste handling: Can process pasted OTPs via a pasteTransformer
• Validation callback: Fires onComplete when OTP is fully entered
• Context-based rendering: InputOTP, InputOTPGroup, InputOTPSlot for flexible UI
• Styling flexibility: Supports container and input styles
• Fake caret and focus indicators: Enhances user experience on mobile
• Accessible API: Compatible with React Native’s TextInputProps

Example usage

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/otp';
import { View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function HomeScreen() {
  return (
    <SafeAreaView className="flex-1 bg-background ">
          <View className='flex items-center justify-center flex-1'>

            <InputOTP maxLength={5} keyboardType="numeric">
            <InputOTPGroup className="space-x-2">
              <InputOTPSlot index={0} />
              <InputOTPSlot index={1} />
              <InputOTPSlot index={2} />
              <InputOTPSlot index={3} />
              <InputOTPSlot index={4} />
            </InputOTPGroup>
          </InputOTP>

          </View>
        </SafeAreaView>
  );
}

Props as per now

 const {
    value: valueProp,
    onChange,
    maxLength,
    onComplete,
    pasteTransformer,
    allowedCharsRegex = null,
    containerClassName,
    className,
    keyboardType,
    children,
    ...rest
  } = props as any;

Implementation Notes

• Uses React Context to manage OTP slots and active state
• Supports a render prop API for full customization
• Handles focus, backspace, and paste seamlessly for mobile
• Written in TypeScript, compatible with Tailwind/NativeWind styling

Questions / Feedback Requested

• Are there any additional props or customization options you would like to see?
• Should we include pre-built themes or variants for common OTP designs?
• Any concerns about performance or accessibility on larger OTP lengths?
• Are there naming or API changes preferred to match the repo conventions?

Next Steps

If approved, I can submit a PR with:

• Fully tested component
• TypeScript types
• Example usage screens
• Unit tests for onComplete,
• paste handling, and keyboard interactions

[Ntale3]

@javascripter should i procced with this