fix: iOS paste not working (#7) + Migrate example to expo 53

* fix: iOS paste not working

* feat: bump example to expo 53

* feat: add defaultPasteTransformer and missing params in useInput

* fix: tests

* fix: drop backgroundColor

* feat: better handling of paste

* feat: use HOF for pasteTransformer function

* fix: tests

Author: magrinj

example/package.json

@@ -9,16 +9,16 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~4.0.0",
+    "@expo/metro-runtime": "~5.0.4",
     "clsx": "^2.1.1",
-    "expo": "~52.0.20",
-    "expo-status-bar": "~2.0.0",
+    "expo": "^53.0.0",
+    "expo-status-bar": "~2.2.3",
     "nativewind": "^4.1.23",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.5",
-    "react-native-reanimated": "^3.16.6",
-    "react-native-web": "~0.19.13",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-web": "^0.20.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17"
   },

src/input.test.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Platform } from 'react-native';
+import { View, Text, Platform, TextInput } from 'react-native';
 import * as React from 'react';
 import {
   cleanup,
@@ -40,6 +40,22 @@ const defaultRender: InputOTPRenderFn = (props: RenderProps) => (
   </View>
 );
 
+/**
+ * Simulate typing on the input like a user would do by typing one character at a time.
+ *
+ * @param input - The input element to simulate typing on.
+ * @param text - The text to simulate typing.
+ */
+const simulateTyping = (input: TextInput, text: string) => {
+  let accumulated = '';
+
+  for (const char of text) {
+    accumulated += char;
+    fireEvent.changeText(input, accumulated);
+    fireEvent(input, 'keyPress', { nativeEvent: { key: char } });
+  }
+};
+
 // Mock Platform.OS
 jest.mock('react-native/Libraries/Utilities/Platform', () => ({
   OS: 'ios',
@@ -63,7 +79,6 @@ describe('OTPInput', () => {
 
       const input = await screen.findByTestId('otp-input');
       expect(input).toBeTruthy();
-      expect(input.props.maxLength).toBe(6);
       expect(input.props.inputMode).toBe('numeric');
       expect(input.props.autoComplete).toBe('one-time-code');
     });
@@ -128,7 +143,6 @@ describe('OTPInput', () => {
       );
 
       const input = await screen.findByTestId('otp-input');
-      expect(input.props.maxLength).toBe(4);
       expect(input.props.placeholder).toBe(placeholder);
       expect(input.props.inputMode).toBe('text');
     });
@@ -162,7 +176,7 @@ describe('OTPInput', () => {
       );
 
       const input = await screen.findByTestId('otp-input');
-      fireEvent.changeText(input, '123456');
+      simulateTyping(input, '123456');
 
       expect(onChangeMock).toHaveBeenCalledWith('123456');
       expect(onCompleteMock).toHaveBeenCalledWith('123456');
@@ -179,11 +193,11 @@ describe('OTPInput', () => {
       );
 
       const input = await screen.findByTestId('otp-input');
-      fireEvent.changeText(input, '12345');
+      simulateTyping(input, '12345');
       expect(onChangeMock).toHaveBeenCalledWith('12345');
       expect(onCompleteMock).not.toHaveBeenCalled();
 
-      fireEvent.changeText(input, '123456');
+      simulateTyping(input, '123456');
       expect(onChangeMock).toHaveBeenCalledWith('123456');
       expect(onCompleteMock).toHaveBeenCalledWith('123456');
     });
@@ -198,7 +212,7 @@ describe('OTPInput', () => {
       );
 
       const input = await screen.findByTestId('otp-input');
-      fireEvent.changeText(input, '123');
+      simulateTyping(input, '123');
 
       const container = await screen.findByTestId('otp-input-container');
       fireEvent.press(container);
@@ -240,12 +254,13 @@ describe('OTPInput', () => {
       const input = await screen.findByTestId('otp-input');
 
       // Test invalid input
-      fireEvent.changeText(input, 'abc');
-      expect(onChangeMock).not.toHaveBeenCalled();
+      simulateTyping(input, 'abc');
+      expect(onChangeMock).toHaveBeenCalledTimes(2);
+      expect(onChangeMock).toHaveBeenCalledWith('');
       expect(input.props.value).toBe('');
 
       // Test valid input
-      fireEvent.changeText(input, '123');
+      simulateTyping(input, '123');
       expect(onChangeMock).toHaveBeenCalledWith('123');
       expect(input.props.value).toBe('123');
     });
@@ -260,7 +275,7 @@ describe('OTPInput', () => {
       );
 
       const input = await screen.findByTestId('otp-input');
-      fireEvent.changeText(input, '123456');
+      simulateTyping(input, '123456');
 
       expect(input.props.value.length).toBeLessThanOrEqual(4);
     });
@@ -280,11 +295,11 @@ describe('OTPInput', () => {
 
       const input = await screen.findByTestId('otp-input');
       await act(async () => {
-        ref.current?.setValue('123');
+        ref.current?.setValue('1');
       });
 
-      expect(input.props.value).toBe('123');
-      expect(onChangeMock).toHaveBeenCalledWith('123');
+      expect(input.props.value).toBe('1');
+      expect(onChangeMock).toHaveBeenCalledWith('1');
     });
 
     test('focus method focuses the input through ref', async () => {
@@ -359,9 +374,9 @@ describe('OTPInput', () => {
 
       // First set a value
       await act(async () => {
-        ref.current?.setValue('123');
+        ref.current?.setValue('1');
       });
-      expect(input.props.value).toBe('123');
+      expect(input.props.value).toBe('1');
 
       // Then clear it
       await act(async () => {

src/input.tsx

@@ -4,9 +4,21 @@ import { TextInput, StyleSheet, Pressable, Platform } from 'react-native';
 import type { OTPInputProps, OTPInputRef } from './types';
 import { useInput } from './use-input';
 
+/**
+ * Default paste transformer that removes all non-numeric characters.
+ */
+const defaultPasteTransformer = (maxLength: number) => (pasted: string) => {
+  // match exactly maxLength digits, not preceded or followed by another digit
+  const otpRegex = new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`);
+  const match = pasted.match(otpRegex);
+
+  return match?.[1] ?? '';
+};
+
 export const OTPInput = React.forwardRef<OTPInputRef, OTPInputProps>(
   (
     {
+      style,
       onChange,
       maxLength,
       pattern,
@@ -25,6 +37,8 @@ export const OTPInput = React.forwardRef<OTPInputRef, OTPInputProps>(
       pattern,
       placeholder,
       defaultValue: props.defaultValue,
+      pasteTransformer:
+        props.pasteTransformer ?? defaultPasteTransformer(maxLength),
       onComplete,
     });
 
@@ -62,14 +76,18 @@ export const OTPInput = React.forwardRef<OTPInputRef, OTPInputProps>(
         {renderedChildren}
         <TextInput
           ref={inputRef}
-          style={styles.input}
-          maxLength={maxLength}
+          style={[styles.input, style]}
           value={value}
           onChangeText={handlers.onChangeText}
           onFocus={handlers.onFocus}
           onBlur={handlers.onBlur}
           placeholder={placeholder}
           inputMode={inputMode}
+          /**
+           * On iOS if the input has an opacity of 0, we can't paste text into it.
+           * As we're setting the opacity to 0.02, we need to hide the caret.
+           */
+          caretHidden={Platform.OS === 'ios'}
           autoComplete={Platform.OS === 'android' ? 'sms-otp' : 'one-time-code'}
           clearTextOnFocus
           accessible
@@ -90,7 +108,18 @@ const styles = StyleSheet.create({
   },
   input: {
     ...StyleSheet.absoluteFillObject,
-    opacity: 0,
-    backgroundColor: 'red',
+    /**
+     * On iOS if the input has an opacity of 0, we can't paste text into it.
+     * This is a workaround to allow pasting text into the input.
+     */
+    ...Platform.select({
+      ios: {
+        opacity: 0.02,
+        color: 'transparent',
+      },
+      android: {
+        opacity: 0,
+      },
+    }),
   },
 });

src/use-input.tsx

@@ -45,6 +45,7 @@ export function useInput({
       const isPaste = text.length > value.length + 1;
       const transformedText =
         isPaste && pasteTransformer ? pasteTransformer(text) : text;
+      // Slice the text to the maxLength as we're not limiting the input length to handle paste properly
       const newValue = transformedText.slice(0, maxLength);
 
       if (newValue.length > 0 && regexp && !regexp.test(newValue)) {