OTPFormScreen

📲 OTPFormScreen Component

The OTPFormScreen component renders a full-screen form for entering one-time passwords (OTP) with support for automatic input focus, action buttons, and contextual messaging. It is an expanded variant of the OTPForm component, designed for screens rather than sheets or modals. It integrates with the OTPInput and OTPForm components from the UILaunch design system.

✨ Features

• Full-screen layout for OTP entry
• Automatic focus on mount when autoFocus is true
• Primary and optional secondary action buttons
• Supports OTP channels such as SMS or Email
• Stylized with OTPFormVariants.Expanded layout
• Built on top of the OTPForm base component

Notes

• autoFocus introduces a 400ms delay before focusing the input to prevent keyboard issues
• This component is ideal for onboarding flows, account verification, or 2FA authentication screens
• All props (except inputRef and variant) are forwarded to OTPForm

📦 Import

import OTPFormScreen from '@madefordevs1999/ui-launch-native/system/templates/OTPFormScreen';

Usage

import OTPFormScreen from '@madefordevs1999/ui-launch-native/system/templates/OTPFormScreen';

const Example = () => {
  return (
    <OTPFormScreen
      autoFocus
      title="Verify Your Identity"
      description="Enter the 6-digit code sent to your email address."
      length={6}
      primaryButton={{
        title: 'Continue',
        onPress: () => console.log('Continue pressed'),
      }}
      secondaryButton={{
        title: 'Resend Code',
        onPress: () => console.log('Resend code'),
      }}
      channel="email"
    />
  );
};

export default Example;

📜 OTPFormScreen Props