react-native-otp-fields 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 NectarByte
+
+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,7 @@
+# react-native-otp-fields
+
+A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.
+
+## Installation
+```sh
+npm install react-native-otp-fields

package/dist/OtpInput.d.ts

@@ -0,0 +1,9 @@
+import { ViewStyle, TextStyle } from 'react-native';
+interface OtpInputProps {
+    length?: number;
+    onOtpComplete?: (otp: string) => void;
+    inputStyle?: TextStyle;
+    containerStyle?: ViewStyle;
+}
+export default function OtpInput({ length, onOtpComplete, inputStyle, containerStyle, }: OtpInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/OtpInput.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OtpInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+;
+function OtpInput({ length = 6, onOtpComplete, inputStyle, containerStyle, }) {
+    const [otp, setOtp] = (0, react_1.useState)(Array(length).fill(''));
+    const inputsRef = (0, react_1.useRef)([]);
+    const handleChangeText = (text, index) => {
+        var _a;
+        const newOtp = [...otp];
+        const char = text.slice(-1);
+        const digitRegex = /^\d$/;
+        if (digitRegex.test(char)) {
+            newOtp[index] = char;
+            setOtp(newOtp);
+            if (index < length - 1) {
+                (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            if (newOtp.every(d => d !== '')) {
+                onOtpComplete === null || onOtpComplete === void 0 ? void 0 : onOtpComplete(newOtp.join(''));
+            }
+        }
+        else if (text === '') {
+            newOtp[index] = '';
+            setOtp(newOtp);
+        }
+    };
+    const handleKeyPress = ({ nativeEvent }, index) => {
+        if (nativeEvent.key === 'Backspace') {
+            setOtp((prevOtp) => {
+                var _a, _b;
+                const newOtp = [...prevOtp];
+                if (newOtp[index] === '') {
+                    if (index > 0) {
+                        newOtp[index - 1] = '';
+                        (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                }
+                else {
+                    newOtp[index] = '';
+                    (_b = inputsRef.current[index]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                return newOtp;
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, containerStyle], children: Array.from({ length }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { 
+            // @ts-ignore
+            ref: ref => (inputsRef.current[i] = ref), value: otp[i], onChangeText: text => handleChangeText(text, i), onKeyPress: e => handleKeyPress(e, i), keyboardType: "number-pad", maxLength: 1, style: [styles.input, inputStyle], returnKeyType: "done", autoFocus: i === 0 }, i))) }));
+}
+;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        gap: 12,
+        justifyContent: 'center',
+        padding: 20,
+    },
+    input: {
+        width: 48,
+        height: 58,
+        borderWidth: 1,
+        borderColor: '#ccc',
+        borderRadius: 8,
+        textAlign: 'center',
+        fontSize: 20,
+        backgroundColor: '#fff',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as OtpInput } from "./OtpInput";

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OtpInput = void 0;
+var OtpInput_1 = require("./OtpInput");
+Object.defineProperty(exports, "OtpInput", { enumerable: true, get: function () { return __importDefault(OtpInput_1).default; } });

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-native-otp-fields",
+  "version": "1.0.0",
+  "description": "A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "NectarByte",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "react-native",
+    "otp",
+    "otp-input",
+    "verification-code",
+    "pin-input",
+    "react-native-component",
+    "digit-input"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.71"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.9.2"
+  }
+}