fix: make opacity 0.02 for iOS to show context menu for pasting (#95)

Author: alimek

src/OtpInput/OtpInput.styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
   container: {
@@ -20,7 +20,15 @@ export const styles = StyleSheet.create({
   },
   hiddenInput: {
     ...StyleSheet.absoluteFillObject,
-    opacity: 0,
+    ...Platform.select({
+      ios: {
+        opacity: 0.02,
+        color: "transparent",
+      },
+      default: {
+        opacity: 0,
+      },
+    }),
   },
   stick: {
     width: 2,

src/OtpInput/OtpInput.tsx

@@ -118,6 +118,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
         testID="otp-input-hidden"
         onFocus={handleFocus}
         onBlur={handleBlur}
+        caretHidden={Platform.OS === "ios"}
         {...textInputProps}
         style={[styles.hiddenInput, textInputProps?.style]}
       />

src/OtpInput/__tests__/OtpInput.test.tsx

@@ -200,6 +200,35 @@ describe("OtpInput", () => {
         expect(input.props.inputMode).toBe("text");
       }
     );
+
+    describe("caretHidden", () => {
+      test("should be true on iOS", () => {
+        Platform.OS = "ios";
+        renderOtpInput();
+
+        const input = screen.getByTestId("otp-input-hidden");
+
+        expect(input.props.caretHidden).toBe(true);
+      });
+
+      test("should be false on android", () => {
+        Platform.OS = "android";
+        renderOtpInput();
+
+        const input = screen.getByTestId("otp-input-hidden");
+
+        expect(input.props.caretHidden).toBe(false);
+      });
+
+      test("should be false on web", () => {
+        Platform.OS = "web";
+        renderOtpInput();
+
+        const input = screen.getByTestId("otp-input-hidden");
+
+        expect(input.props.caretHidden).toBe(false);
+      });
+    });
   });
   describe("Logic", () => {
     test("should split text on screen from the text written in the hidden input", () => {

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

@@ -382,6 +382,7 @@ exports[`OtpInput UI should render correctly 1`] = `
   <TextInput
     autoComplete="one-time-code"
     autoFocus={true}
+    caretHidden={true}
     editable={true}
     inputMode="numeric"
     maxLength={6}
@@ -393,8 +394,9 @@ exports[`OtpInput UI should render correctly 1`] = `
       [
         {
           "bottom": 0,
+          "color": "transparent",
           "left": 0,
-          "opacity": 0,
+          "opacity": 0.02,
           "position": "absolute",
           "right": 0,
           "top": 0,