r5n-labs / react-native-otp-inputs

OTP inputs for React-Native
MIT License
249 stars 91 forks source link

Touchable area is too short. #306

Open lovelytingy opened 2 years ago

lovelytingy commented 2 years ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-native-otp-inputs@7.4.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-otp-inputs/src/OtpInput.tsx b/node_modules/react-native-otp-inputs/src/OtpInput.tsx
index d8a2453..9b6278c 100644
--- a/node_modules/react-native-otp-inputs/src/OtpInput.tsx
+++ b/node_modules/react-native-otp-inputs/src/OtpInput.tsx
@@ -61,9 +61,14 @@ const OtpInput = forwardRef<TextInput, Props>(
       [inputValue, rest],
     );

+    const handleOnPress = () => {
+        (ref as RefObject<TextInput>)?.current.focus()
+        return true
+      }
+
     return (
       // @ts-expect-error
-      <View style={[inputContainerStyles, focused && focusStyles]}>
+      <View style={[inputContainerStyles, focused && focusStyles]} onStartShouldSetResponderCapture={handleOnPress} >
         {/* @ts-expect-error */}
         <TextInput
           autoFocus={autoFocus}

This issue body was partially generated by patch-package.