@kunlexze1/react-native-otp-timer/dist/index.d.ts

OTP input component + countdown timer hook for React Native (using react-native-otp-entry)

import React from 'react';
import { ViewStyle, TextStyle } from 'react-native';
import { OtpInputRef } from 'react-native-otp-entry';
export { OtpInput, OtpInputRef } from 'react-native-otp-entry';

interface TimerProps {
    /** Duration of the timer in seconds */
    timerDuration?: number;
    /** Custom style for the timer text */
    timerStyle?: TextStyle;
    /** Custom formatter for the timer display */
    timerFormatter?: (timeLeft: string) => string;
    /** Whether to show the timer */
    showTimer?: boolean;
    /** Position of the timer relative to OTP input */
    timerPosition?: 'top' | 'bottom';
    /** Callback when timer expires */
    onTimerExpire?: () => void;
    /** Callback when timer starts */
    onTimerStart?: () => void;
    /** Callback when timer resets */
    onTimerReset?: () => void;
    /** Whether to auto-start the timer */
    autoStartTimer?: boolean;
    /** Callback to restart the timer manually */
    onRestartTimer?: () => void;
    /** Show restart button when timer expires */
    showRestartButton?: boolean;
    /** Custom text for restart button */
    restartButtonText?: string;
    /** Custom style for restart button */
    restartButtonStyle?: TextStyle;
}
interface OtpEntryProps {
    /** Number of digits for the OTP input */
    numberOfDigits: number;
    /** Focus color for the input */
    focusColor?: string;
    /** Auto focus on mount */
    autoFocus?: boolean;
    /** Hide the focus stick */
    hideStick?: boolean;
    /** Placeholder text */
    placeholder?: string;
    /** Blur on filled */
    blurOnFilled?: boolean;
    /** Disable the input */
    disabled?: boolean;
    /** Input type */
    type?: 'numeric' | 'alpha' | 'alphanumeric';
    /** Secure text entry */
    secureTextEntry?: boolean;
    /** Focus stick blinking duration */
    focusStickBlinkingDuration?: number;
    /** Callback when OTP is filled */
    onFilled?: (text: string) => void;
    /** Callback when text changes */
    onTextChange?: (text: string) => void;
    /** Text input props */
    textInputProps?: any;
    /** Text props */
    textProps?: any;
    /** Theme configuration */
    theme?: {
        containerStyle?: ViewStyle;
        inputsContainerStyle?: ViewStyle;
        pinCodeContainerStyle?: ViewStyle;
        pinCodeTextStyle?: TextStyle;
        focusStickStyle?: ViewStyle;
        focusedPinCodeContainerStyle?: ViewStyle;
        filledPinCodeContainerStyle?: ViewStyle;
    };
}
interface OtpWithTimerProps extends OtpEntryProps, TimerProps {
    /** Container style for the entire component */
    containerStyle?: ViewStyle;
    /** Reference to the OTP input */
    ref?: React.Ref<OtpInputRef>;
}
declare const OtpWithTimer: React.ForwardRefExoticComponent<Omit<OtpWithTimerProps, "ref"> & React.RefAttributes<OtpInputRef>>;
declare const useOtpTimer: (timerDuration?: number) => {
    resetTimer: () => void;
    restartTimer: () => void;
    timeLeft: string;
    /** Reference to the OTP input */
    hasTimeout: boolean;
    isRunning: boolean;
    startTimer: () => void;
    resetOtpTimer: () => void;
    endTimer: () => void;
};

declare const useTimer: (seconds: number) => {
    timeLeft: string;
    hasTimeout: boolean;
    isRunning: boolean;
    startTimer: () => void;
    resetOtpTimer: () => void;
    endTimer: () => void;
};

export { OtpWithTimer, type OtpWithTimerProps, useOtpTimer, useTimer };