@leo-showdar/react-native-otp-input-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 leo-showdar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,221 @@
+# @leo-showdar/react-native-otp-input-kit
+
+Lightweight React Native TypeScript components for OTP input and resend timer flows.
+
+The package is designed for login, phone verification, email verification, and two-step verification screens. It ships only React Native components and hooks, with no native modules and no runtime dependencies beyond React and React Native.
+
+## Installation
+
+```sh
+npm install @leo-showdar/react-native-otp-input-kit
+```
+
+## Basic Usage
+
+```tsx
+import * as React from 'react';
+import { Alert, SafeAreaView, StyleSheet, Text } from 'react-native';
+import { OtpInput, OtpResendTimer } from '@leo-showdar/react-native-otp-input-kit';
+
+export function VerifyPhoneScreen() {
+  return (
+    <SafeAreaView style={styles.screen}>
+      <Text style={styles.title}>Enter the code sent to your phone</Text>
+
+      <OtpInput
+        autoFocus
+        length={6}
+        onComplete={(code) => Alert.alert('Code complete', code)}
+      />
+
+      <OtpResendTimer onResend={() => Alert.alert('New code sent')} />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    rowGap: 20,
+  },
+  title: {
+    color: '#111827',
+    fontSize: 20,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+});
+```
+
+## Controlled Usage
+
+```tsx
+import * as React from 'react';
+import { Button, View } from 'react-native';
+import { OtpInput } from '@leo-showdar/react-native-otp-input-kit';
+
+export function ControlledOtpExample() {
+  const [code, setCode] = React.useState('');
+
+  return (
+    <View>
+      <OtpInput
+        value={code}
+        onChangeCode={setCode}
+        allowCellSelection={false}
+        onComplete={(completedCode) => {
+          // Submit completedCode to your verification endpoint.
+        }}
+      />
+
+      <Button title="Clear" onPress={() => setCode('')} />
+    </View>
+  );
+}
+```
+
+## Custom Styles
+
+```tsx
+import { OtpInput } from '@leo-showdar/react-native-otp-input-kit';
+
+export function StyledOtpExample() {
+  return (
+    <OtpInput
+      containerStyle={{ justifyContent: 'center' }}
+      cellStyle={{
+        backgroundColor: '#F9FAFB',
+        borderColor: '#CBD5E1',
+        borderRadius: 12,
+        height: 56,
+        width: 52,
+      }}
+      focusedCellStyle={{
+        borderColor: '#0F766E',
+        borderWidth: 2,
+      }}
+      filledCellStyle={{
+        borderColor: '#64748B',
+      }}
+      textStyle={{
+        color: '#0F172A',
+        fontSize: 24,
+      }}
+    />
+  );
+}
+```
+
+## Error State
+
+```tsx
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { OtpInput } from '@leo-showdar/react-native-otp-input-kit';
+
+export function OtpErrorExample() {
+  const [code, setCode] = React.useState('');
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <View>
+      <OtpInput
+        value={code}
+        onChangeCode={(nextCode) => {
+          setCode(nextCode);
+          setHasError(false);
+        }}
+        onComplete={() => setHasError(true)}
+        error={hasError}
+      />
+
+      {hasError ? (
+        <Text style={{ color: '#B91C1C', marginTop: 8 }}>
+          That code did not match. Check the message and try again.
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+```
+
+## Secure OTP
+
+```tsx
+import { OtpInput } from '@leo-showdar/react-native-otp-input-kit';
+
+export function SecureOtpExample() {
+  return <OtpInput secureTextEntry length={6} />;
+}
+```
+
+## Resend Timer
+
+```tsx
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { OtpResendTimer } from '@leo-showdar/react-native-otp-input-kit';
+
+export function ResendTimerExample() {
+  const [message, setMessage] = React.useState('');
+
+  return (
+    <View>
+      <OtpResendTimer
+        seconds={45}
+        countdownLabel="Request a new code in"
+        resendLabel="Send a new code"
+        onResend={() => setMessage('A new verification code was sent.')}
+      />
+
+      {message ? <Text>{message}</Text> : null}
+    </View>
+  );
+}
+```
+
+## OtpInput Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `length` | `number` | `6` | Number of OTP digits. |
+| `value` | `string` | `undefined` | Controlled OTP value. |
+| `defaultValue` | `string` | `''` | Initial value for uncontrolled usage. |
+| `onChangeCode` | `(code: string) => void` | `undefined` | Called when the OTP changes. |
+| `onComplete` | `(code: string) => void` | `undefined` | Called when the OTP reaches `length`. |
+| `allowCellSelection` | `boolean` | `true` | Allows tapping any cell to edit it. Set `false` for sequential input and right-to-left delete behavior. |
+| `autoFocus` | `boolean` | `false` | Focuses the first cell on mount. |
+| `disabled` | `boolean` | `false` | Disables editing and lowers opacity. |
+| `error` | `boolean` | `false` | Applies error styling and accessibility state. |
+| `secureTextEntry` | `boolean` | `false` | Masks entered digits. |
+| `placeholder` | `string` | `undefined` | Placeholder shown in empty cells. |
+| `keyboardType` | `TextInputProps['keyboardType']` | `'number-pad'` | Keyboard type for each cell. |
+| `containerStyle` | `ViewStyle` | `undefined` | Style override for the cell row. |
+| `cellStyle` | `ViewStyle` | `undefined` | Base style override for each cell. |
+| `focusedCellStyle` | `ViewStyle` | `undefined` | Style applied to the focused cell. |
+| `filledCellStyle` | `ViewStyle` | `undefined` | Style applied to cells with a value. |
+| `errorCellStyle` | `ViewStyle` | `undefined` | Style applied when `error` is true. |
+| `textStyle` | `TextStyle` | `undefined` | Text style override for each cell. |
+| `testID` | `string` | `undefined` | Test id for the container and cell ids. |
+
+## OtpResendTimer Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `seconds` | `number` | `60` | Countdown duration in seconds. |
+| `autoStart` | `boolean` | `true` | Starts the countdown on mount. |
+| `onResend` | `() => void` | `undefined` | Called when resend is pressed. |
+| `onFinish` | `() => void` | `undefined` | Called when the countdown reaches zero. |
+| `renderText` | `(remainingSeconds: number, canResend: boolean) => React.ReactNode` | `undefined` | Custom text renderer. |
+| `resendLabel` | `string` | `'Resend code'` | Label shown when resend is available. |
+| `countdownLabel` | `string` | `'Resend code in'` | Label shown while counting down. |
+| `disabled` | `boolean` | `false` | Prevents resend presses. |
+| `textStyle` | `TextStyle` | `undefined` | Style for default countdown text. |
+| `resendTextStyle` | `TextStyle` | `undefined` | Style for default resend text. |
+| `testID` | `string` | `undefined` | Test id for the pressable timer. |
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@leo-showdar/react-native-otp-input-kit",
+  "version": "0.1.0",
+  "description": "Lightweight React Native TypeScript components for OTP input and resend timer flows.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "otp",
+    "otp-input",
+    "verification-code",
+    "resend-timer",
+    "typescript"
+  ],
+  "author": "leo-showdar",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leo-showdar/react-native-otp-input-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/leo-showdar/react-native-otp-input-kit/issues"
+  },
+  "homepage": "https://github.com/leo-showdar/react-native-otp-input-kit#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@testing-library/react-native": "^12.7.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.31",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "react": "^18.2.0",
+    "react-native": "^0.75.0",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.5.4"
+  }
+}

package/src/components/OtpInput/OtpInput.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { OtpInputProps } from '../../types';
+import { useOtpInput } from '../../hooks/useOtpInput';
+import { OtpInputCell } from './OtpInputCell';
+import { otpInputStyles } from './styles';
+
+export function OtpInput({
+  length = 6,
+  value,
+  defaultValue,
+  onChangeCode,
+  onComplete,
+  allowCellSelection = true,
+  autoFocus = false,
+  disabled = false,
+  error = false,
+  secureTextEntry = false,
+  placeholder,
+  keyboardType = 'number-pad',
+  containerStyle,
+  cellStyle,
+  focusedCellStyle,
+  filledCellStyle,
+  errorCellStyle,
+  textStyle,
+  testID,
+}: OtpInputProps) {
+  const {
+    cellValues,
+    focusedIndex,
+    inputRefs,
+    setFocusedIndex,
+    focusCell,
+    handleChangeText,
+    handleKeyPress,
+  } = useOtpInput({
+    length,
+    value,
+    defaultValue,
+    onChangeCode,
+    onComplete,
+    allowCellSelection,
+  });
+  const didAutoFocusRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (autoFocus && !disabled && !didAutoFocusRef.current) {
+      didAutoFocusRef.current = true;
+      requestAnimationFrame(() => focusCell(0));
+    }
+  }, [autoFocus, disabled, focusCell]);
+
+  return (
+    <View
+      accessibilityLabel="Verification code input"
+      accessibilityHint={error ? 'The entered verification code has an error.' : undefined}
+      accessibilityState={{ disabled }}
+      style={[
+        otpInputStyles.container,
+        disabled && otpInputStyles.disabledContainer,
+        containerStyle,
+      ]}
+      testID={testID}
+    >
+      {cellValues.map((cellValue, index) => (
+        <OtpInputCell
+          key={index}
+          value={cellValue}
+          index={index}
+          length={length}
+          focused={focusedIndex === index}
+          filled={cellValue.length > 0}
+          error={error}
+          disabled={disabled}
+          secureTextEntry={secureTextEntry}
+          placeholder={placeholder}
+          keyboardType={keyboardType}
+          cellStyle={cellStyle}
+          focusedCellStyle={focusedCellStyle}
+          filledCellStyle={filledCellStyle}
+          errorCellStyle={errorCellStyle}
+          textStyle={textStyle}
+          testID={testID}
+          inputRef={(input) => {
+            inputRefs.current[index] = input;
+          }}
+          onFocus={setFocusedIndex}
+          onChangeText={handleChangeText}
+          onKeyPress={handleKeyPress}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/OtpInput/OtpInputCell.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Pressable, Text, TextInput } from 'react-native';
+
+import type { OtpInputCellProps } from '../../types';
+import { otpInputStyles } from './styles';
+
+export const OtpInputCell = React.memo(function OtpInputCell({
+  value,
+  index,
+  length = 6,
+  focused = false,
+  filled = false,
+  error = false,
+  disabled = false,
+  secureTextEntry = false,
+  placeholder,
+  keyboardType = 'number-pad',
+  cellStyle,
+  focusedCellStyle,
+  filledCellStyle,
+  errorCellStyle,
+  textStyle,
+  testID,
+  inputRef,
+  onFocus,
+  onChangeText,
+  onKeyPress,
+}: OtpInputCellProps) {
+  const localInputRef = React.useRef<TextInput | null>(null);
+  const displayValue = secureTextEntry && value ? '•' : value || placeholder || '';
+  const showPlaceholder = !value && Boolean(placeholder);
+  const setInputRef = React.useCallback(
+    (input: TextInput | null) => {
+      localInputRef.current = input;
+      inputRef?.(input);
+    },
+    [inputRef]
+  );
+
+  const focusInput = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    onFocus?.(index);
+    requestAnimationFrame(() => {
+      localInputRef.current?.focus();
+    });
+  }, [disabled, index, onFocus]);
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={focusInput}
+      style={[
+        otpInputStyles.cell,
+        filled && otpInputStyles.filledCell,
+        focused && otpInputStyles.focusedCell,
+        error && otpInputStyles.errorCell,
+        cellStyle,
+        filled && filledCellStyle,
+        focused && focusedCellStyle,
+        error && errorCellStyle,
+      ]}
+    >
+      <Text
+        style={[
+          otpInputStyles.cellText,
+          showPlaceholder && otpInputStyles.placeholderText,
+          textStyle,
+        ]}
+      >
+        {displayValue}
+      </Text>
+
+      <TextInput
+        ref={setInputRef}
+        value=""
+        onFocus={() => onFocus?.(index)}
+        onChangeText={(text) => onChangeText(text, index)}
+        onKeyPress={(event) => onKeyPress(event, index)}
+        editable={!disabled}
+        caretHidden
+        contextMenuHidden
+        selectTextOnFocus={false}
+        selection={{ start: 0, end: 0 }}
+        keyboardType={keyboardType}
+        textContentType="oneTimeCode"
+        autoComplete="sms-otp"
+        maxLength={length}
+        accessibilityLabel={`Verification code digit ${index + 1}`}
+        accessibilityState={{ disabled }}
+        testID={testID ? `${testID}-cell-${index}` : undefined}
+        style={otpInputStyles.hiddenInput}
+      />
+    </Pressable>
+  );
+});

package/src/components/OtpInput/index.ts

@@ -0,0 +1,2 @@
+export { OtpInput } from './OtpInput';
+export { OtpInputCell } from './OtpInputCell';

package/src/components/OtpInput/styles.ts

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+
+export const otpInputStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 10,
+  },
+  disabledContainer: {
+    opacity: 0.48,
+  },
+  cell: {
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#D1D5DB',
+    borderRadius: 10,
+    borderWidth: 1,
+    height: 52,
+    justifyContent: 'center',
+    minWidth: 48,
+    overflow: 'hidden',
+    width: 48,
+  },
+  hiddenInput: {
+    color: 'transparent',
+    fontSize: 1,
+    height: 1,
+    left: '50%',
+    opacity: 0,
+    padding: 0,
+    position: 'absolute',
+    textAlign: 'center',
+    top: '50%',
+    width: 1,
+  },
+  cellText: {
+    color: '#111827',
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  placeholderText: {
+    color: '#9CA3AF',
+  },
+  focusedCell: {
+    borderColor: '#2563EB',
+    borderWidth: 2,
+  },
+  filledCell: {
+    borderColor: '#9CA3AF',
+  },
+  errorCell: {
+    backgroundColor: '#FEF2F2',
+    borderColor: '#DC2626',
+  },
+});

package/src/components/OtpResendTimer/OtpResendTimer.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+import type { OtpResendTimerProps } from '../../types';
+import { useCountdown } from '../../hooks/useCountdown';
+
+export function OtpResendTimer({
+  seconds = 60,
+  autoStart = true,
+  onResend,
+  onFinish,
+  renderText,
+  resendLabel = 'Resend code',
+  countdownLabel = 'Resend code in',
+  disabled = false,
+  textStyle,
+  resendTextStyle,
+  testID,
+}: OtpResendTimerProps) {
+  const { remainingSeconds, canResend, reset, start } = useCountdown({
+    seconds,
+    autoStart,
+    onFinish,
+  });
+
+  const resendEnabled = canResend && !disabled;
+
+  const handlePress = React.useCallback(() => {
+    if (!resendEnabled) {
+      return;
+    }
+
+    onResend?.();
+    reset();
+    start();
+  }, [onResend, resendEnabled, reset, start]);
+
+  const content = renderText ? (
+    renderText(remainingSeconds, resendEnabled)
+  ) : (
+    <Text
+      style={[
+        styles.text,
+        resendEnabled && styles.resendText,
+        textStyle,
+        resendEnabled && resendTextStyle,
+      ]}
+    >
+      {resendEnabled ? resendLabel : `${countdownLabel} ${remainingSeconds}s`}
+    </Text>
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={resendEnabled ? resendLabel : `${countdownLabel} ${remainingSeconds} seconds`}
+      accessibilityState={{ disabled: !resendEnabled }}
+      disabled={!resendEnabled}
+      onPress={handlePress}
+      hitSlop={8}
+      style={styles.pressable}
+      testID={testID}
+    >
+      {content}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44,
+    minWidth: 44,
+  },
+  text: {
+    color: '#4B5563',
+    fontSize: 15,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  resendText: {
+    color: '#2563EB',
+    fontWeight: '600',
+  },
+});

package/src/components/OtpResendTimer/index.ts

@@ -0,0 +1 @@
+export { OtpResendTimer } from './OtpResendTimer';

package/src/hooks/useCountdown.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+import type { UseCountdownOptions, UseCountdownReturn } from '../types';
+
+export function useCountdown({
+  seconds = 60,
+  autoStart = true,
+  onFinish,
+}: UseCountdownOptions = {}): UseCountdownReturn {
+  const safeSeconds = Math.max(0, seconds);
+  const onFinishRef = React.useRef(onFinish);
+  const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+  const [remainingSeconds, setRemainingSeconds] = React.useState(safeSeconds);
+  const [running, setRunning] = React.useState(autoStart && safeSeconds > 0);
+
+  React.useEffect(() => {
+    onFinishRef.current = onFinish;
+  }, [onFinish]);
+
+  const stop = React.useCallback(() => {
+    setRunning(false);
+
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const start = React.useCallback(() => {
+    if (safeSeconds <= 0) {
+      setRemainingSeconds(0);
+      setRunning(false);
+      return;
+    }
+
+    setRemainingSeconds((current) => (current > 0 ? current : safeSeconds));
+    setRunning(true);
+  }, [safeSeconds]);
+
+  const reset = React.useCallback(() => {
+    setRemainingSeconds(safeSeconds);
+    setRunning(autoStart && safeSeconds > 0);
+  }, [autoStart, safeSeconds]);
+
+  React.useEffect(() => {
+    setRemainingSeconds(safeSeconds);
+    setRunning(autoStart && safeSeconds > 0);
+  }, [autoStart, safeSeconds]);
+
+  React.useEffect(() => {
+    if (!running) {
+      return undefined;
+    }
+
+    intervalRef.current = setInterval(() => {
+      setRemainingSeconds((current) => {
+        if (current <= 1) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+
+          setRunning(false);
+          onFinishRef.current?.();
+          return 0;
+        }
+
+        return current - 1;
+      });
+    }, 1000);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [running]);
+
+  React.useEffect(
+    () => () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    },
+    []
+  );
+
+  return {
+    remainingSeconds,
+    canResend: remainingSeconds === 0 && !running,
+    running,
+    start,
+    stop,
+    reset,
+  };
+}

package/src/hooks/useOtpInput.ts

@@ -0,0 +1,279 @@
+import * as React from 'react';
+import type { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+
+import type { UseOtpInputOptions, UseOtpInputReturn } from '../types';
+import { createOtpArray } from '../utils/createOtpArray';
+import { sanitizeOtp } from '../utils/sanitizeOtp';
+
+function normalizeOtpCells(values: string[], length: number): string[] {
+  return Array.from({ length }, (_, index) => sanitizeOtp(values[index] ?? '', 1));
+}
+
+function getReplacementDigit(text: string, currentDigit: string): string {
+  const digits = sanitizeOtp(text, text.length);
+  const differentDigit = digits.split('').find((digit) => digit !== currentDigit);
+
+  return differentDigit ?? digits[digits.length - 1] ?? '';
+}
+
+function getSequentialFocusIndex(values: string[], length: number): number {
+  const firstEmptyIndex = values.findIndex((value) => !value);
+
+  return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+}
+
+function getLastFilledIndex(values: string[]): number {
+  for (let index = values.length - 1; index >= 0; index -= 1) {
+    if (values[index]) {
+      return index;
+    }
+  }
+
+  return -1;
+}
+
+function replaceCellAndClearAfter(values: string[], digit: string, index: number): string[] {
+  return values.map((value, valueIndex) => {
+    if (valueIndex < index) {
+      return value;
+    }
+
+    if (valueIndex === index) {
+      return digit;
+    }
+
+    return '';
+  });
+}
+
+export function useOtpInput({
+  length = 6,
+  value,
+  defaultValue = '',
+  onChangeCode,
+  onComplete,
+  allowCellSelection = true,
+}: UseOtpInputOptions = {}): UseOtpInputReturn {
+  const safeLength = Math.max(1, length);
+  const isControlled = value !== undefined;
+  const inputRefs = React.useRef<Array<TextInput | null>>([]);
+  const completedCodeRef = React.useRef<string | null>(null);
+  const [cellValues, setCellValues] = React.useState(() =>
+    createOtpArray(sanitizeOtp(value ?? defaultValue, safeLength), safeLength)
+  );
+
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const code = cellValues.join('');
+  const cellValuesRef = React.useRef(cellValues);
+
+  React.useEffect(() => {
+    cellValuesRef.current = cellValues;
+  }, [cellValues]);
+
+  React.useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+
+    const nextCode = sanitizeOtp(value ?? '', safeLength);
+
+    if (nextCode !== code) {
+      setCellValues(createOtpArray(nextCode, safeLength));
+    }
+  }, [code, isControlled, safeLength, value]);
+
+  React.useEffect(() => {
+    setCellValues((currentValues) => {
+      if (currentValues.length === safeLength) {
+        return currentValues;
+      }
+
+      return normalizeOtpCells(currentValues, safeLength);
+    });
+  }, [safeLength]);
+
+  const focusCell = React.useCallback(
+    (index: number) => {
+      const requestedIndex = allowCellSelection
+        ? index
+        : getSequentialFocusIndex(cellValuesRef.current, safeLength);
+      const nextIndex = Math.min(Math.max(requestedIndex, 0), safeLength - 1);
+      setFocusedIndex(nextIndex);
+      inputRefs.current[nextIndex]?.focus();
+    },
+    [allowCellSelection, safeLength]
+  );
+
+  const commitCellValues = React.useCallback(
+    (nextValues: string[]) => {
+      const normalizedValues = normalizeOtpCells(nextValues, safeLength);
+      const nextCode = normalizedValues.join('');
+
+      setCellValues(normalizedValues);
+      onChangeCode?.(nextCode);
+
+      if (nextCode.length !== safeLength) {
+        completedCodeRef.current = null;
+      }
+    },
+    [onChangeCode, safeLength]
+  );
+
+  const replaceCell = React.useCallback(
+    (digit: string, index: number) => {
+      const nextValues = [...cellValues];
+      nextValues[index] = digit;
+      commitCellValues(nextValues);
+    },
+    [cellValues, commitCellValues]
+  );
+
+  const handleChangeText = React.useCallback(
+    (text: string, index: number) => {
+      const pastedText = sanitizeOtp(text, safeLength);
+      const targetIndex = allowCellSelection
+        ? index
+        : getSequentialFocusIndex(cellValues, safeLength);
+
+      if (!pastedText) {
+        if (allowCellSelection && text === '' && cellValues[index]) {
+          replaceCell('', index);
+        }
+        return;
+      }
+
+      if (pastedText.length === safeLength) {
+        commitCellValues(createOtpArray(pastedText, safeLength));
+        requestAnimationFrame(() => focusCell(safeLength - 1));
+        return;
+      }
+
+      if (!allowCellSelection && code.length === safeLength) {
+        return;
+      }
+
+      if (pastedText.length > 1 && cellValues[targetIndex]) {
+        const replacementDigit = getReplacementDigit(pastedText, cellValues[targetIndex]);
+        const nextValues = allowCellSelection
+          ? replaceCellAndClearAfter(cellValues, replacementDigit, targetIndex)
+          : (() => {
+              const values = [...cellValues];
+              values[targetIndex] = replacementDigit;
+              return values;
+            })();
+
+        commitCellValues(nextValues);
+
+        if (targetIndex < safeLength - 1) {
+          requestAnimationFrame(() => focusCell(targetIndex + 1));
+        }
+
+        return;
+      }
+
+      if (code.length === safeLength && !cellValues[targetIndex]) {
+        return;
+      }
+
+      if (pastedText.length === 1) {
+        const nextValues =
+          allowCellSelection && cellValues[targetIndex]
+            ? replaceCellAndClearAfter(cellValues, pastedText, targetIndex)
+            : (() => {
+                const values = [...cellValues];
+                values[targetIndex] = pastedText;
+                return values;
+              })();
+
+        commitCellValues(nextValues);
+
+        if (targetIndex < safeLength - 1) {
+          requestAnimationFrame(() => focusCell(targetIndex + 1));
+        }
+
+        return;
+      }
+
+      const nextValues = [...cellValues];
+
+      pastedText.split('').forEach((digit, offset) => {
+        const nextIndex = targetIndex + offset;
+
+        if (nextIndex < safeLength) {
+          nextValues[nextIndex] = digit;
+        }
+      });
+
+      commitCellValues(nextValues);
+      requestAnimationFrame(() =>
+        focusCell(Math.min(targetIndex + pastedText.length, safeLength - 1))
+      );
+    },
+    [
+      allowCellSelection,
+      cellValues,
+      code.length,
+      commitCellValues,
+      focusCell,
+      replaceCell,
+      safeLength,
+    ]
+  );
+
+  const handleKeyPress = React.useCallback(
+    (
+      event: NativeSyntheticEvent<TextInputKeyPressEventData>,
+      index: number
+    ) => {
+      if (event.nativeEvent.key !== 'Backspace') {
+        return;
+      }
+
+      if (!allowCellSelection) {
+        const lastFilledIndex = getLastFilledIndex(cellValues);
+
+        if (lastFilledIndex >= 0) {
+          replaceCell('', lastFilledIndex);
+          requestAnimationFrame(() => focusCell(lastFilledIndex));
+        }
+
+        return;
+      }
+
+      if (cellValues[index]) {
+        replaceCell('', index);
+        return;
+      }
+
+      if (index > 0) {
+        requestAnimationFrame(() => focusCell(index - 1));
+      }
+    },
+    [allowCellSelection, cellValues, focusCell, replaceCell]
+  );
+
+  const clear = React.useCallback(() => {
+    commitCellValues(createOtpArray('', safeLength));
+    requestAnimationFrame(() => focusCell(0));
+  }, [commitCellValues, focusCell, safeLength]);
+
+  React.useEffect(() => {
+    if (code.length === safeLength && completedCodeRef.current !== code) {
+      completedCodeRef.current = code;
+      onComplete?.(code);
+      requestAnimationFrame(() => focusCell(safeLength - 1));
+    }
+  }, [code, focusCell, onComplete, safeLength]);
+
+  return {
+    code,
+    cellValues,
+    focusedIndex,
+    inputRefs,
+    setFocusedIndex,
+    handleChangeText,
+    handleKeyPress,
+    focusCell,
+    clear,
+  };
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export { OtpInput } from './components/OtpInput';
+export { OtpInputCell } from './components/OtpInput';
+export { OtpResendTimer } from './components/OtpResendTimer';
+export { useOtpInput } from './hooks/useOtpInput';
+export { useCountdown } from './hooks/useCountdown';
+export { sanitizeOtp } from './utils/sanitizeOtp';
+export { createOtpArray } from './utils/createOtpArray';
+export type {
+  OtpInputCellProps,
+  OtpInputProps,
+  OtpResendTimerProps,
+  UseCountdownOptions,
+  UseCountdownReturn,
+  UseOtpInputOptions,
+  UseOtpInputReturn,
+} from './types';

package/src/types/index.ts

@@ -0,0 +1,110 @@
+import type React from 'react';
+import type {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputKeyPressEventData,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type OtpInputProps = {
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChangeCode?: (code: string) => void;
+  onComplete?: (code: string) => void;
+  allowCellSelection?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  secureTextEntry?: boolean;
+  placeholder?: string;
+  keyboardType?: TextInputProps['keyboardType'];
+  containerStyle?: ViewStyle;
+  cellStyle?: ViewStyle;
+  focusedCellStyle?: ViewStyle;
+  filledCellStyle?: ViewStyle;
+  errorCellStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  testID?: string;
+};
+
+export type OtpInputCellProps = {
+  value: string;
+  index: number;
+  length?: number;
+  focused?: boolean;
+  filled?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  secureTextEntry?: boolean;
+  placeholder?: string;
+  keyboardType?: TextInputProps['keyboardType'];
+  cellStyle?: ViewStyle;
+  focusedCellStyle?: ViewStyle;
+  filledCellStyle?: ViewStyle;
+  errorCellStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  testID?: string;
+  inputRef?: (input: TextInput | null) => void;
+  onFocus?: (index: number) => void;
+  onChangeText: (text: string, index: number) => void;
+  onKeyPress: (
+    event: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number
+  ) => void;
+};
+
+export type OtpResendTimerProps = {
+  seconds?: number;
+  autoStart?: boolean;
+  onResend?: () => void;
+  onFinish?: () => void;
+  renderText?: (remainingSeconds: number, canResend: boolean) => React.ReactNode;
+  resendLabel?: string;
+  countdownLabel?: string;
+  disabled?: boolean;
+  textStyle?: TextStyle;
+  resendTextStyle?: TextStyle;
+  testID?: string;
+};
+
+export type UseOtpInputOptions = {
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChangeCode?: (code: string) => void;
+  onComplete?: (code: string) => void;
+  allowCellSelection?: boolean;
+};
+
+export type UseOtpInputReturn = {
+  code: string;
+  cellValues: string[];
+  focusedIndex: number;
+  inputRefs: React.MutableRefObject<Array<TextInput | null>>;
+  setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
+  handleChangeText: (text: string, index: number) => void;
+  handleKeyPress: (
+    event: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number
+  ) => void;
+  focusCell: (index: number) => void;
+  clear: () => void;
+};
+
+export type UseCountdownOptions = {
+  seconds?: number;
+  autoStart?: boolean;
+  onFinish?: () => void;
+};
+
+export type UseCountdownReturn = {
+  remainingSeconds: number;
+  canResend: boolean;
+  running: boolean;
+  start: () => void;
+  stop: () => void;
+  reset: () => void;
+};

package/src/utils/createOtpArray.ts

@@ -0,0 +1,3 @@
+export function createOtpArray(code: string, length: number): string[] {
+  return Array.from({ length: Math.max(0, length) }, (_, index) => code[index] ?? '');
+}

package/src/utils/sanitizeOtp.ts

@@ -0,0 +1,3 @@
+export function sanitizeOtp(rawInput: string, length: number): string {
+  return rawInput.replace(/\D/g, '').slice(0, Math.max(0, length));
+}