fix: use StyleSheet.absoluteFill for hidden input

Author: anday013

src/OtpInput/OtpInput.styles.ts

@@ -19,7 +19,6 @@ export const styles = StyleSheet.create({
     fontSize: 28,
   },
   hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
     ...Platform.select({
       ios: {
         opacity: 0.02,

src/OtpInput/OtpInput.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { forwardRef, useImperativeHandle } from "react";
-import { Platform, Pressable, Text, TextInput, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { styles } from "./OtpInput.styles";
 import { OtpInputProps, OtpInputRef } from "./OtpInput.types";
 import { VerticalStick } from "./VerticalStick";
@@ -124,7 +124,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         onBlur={handleBlur}
         caretHidden={Platform.OS === "ios"}
         {...textInputProps}
-        style={[styles.hiddenInput, textInputProps?.style]}
+        style={[StyleSheet.absoluteFill, styles.hiddenInput, textInputProps?.style]}
       />
     </View>
   );

src/OtpInput/__tests__/OtpInput.test.tsx

@@ -73,6 +73,20 @@ describe("OtpInput", () => {
       expect(input.props.autoFocus).toBe(false);
     });
 
+    test("should keep hidden input absolutely positioned to avoid affecting OTP cell spacing", () => {
+      renderOtpInput();
+
+      const input = screen.getByTestId("otp-input-hidden");
+
+      expect(input).toHaveStyle({
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      });
+    });
+
     test("should not focus if disabled is true", () => {
       renderOtpInput({
         disabled: true,

src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap

@@ -399,13 +399,15 @@ exports[`OtpInput UI should render correctly 1`] = `
       [
         {
           "bottom": 0,
-          "color": "transparent",
           "left": 0,
-          "opacity": 0.02,
           "position": "absolute",
           "right": 0,
           "top": 0,
         },
+        {
+          "color": "transparent",
+          "opacity": 0.02,
+        },
         undefined,
       ]
     }