Fix OTP input losing focus immediately on IOS

[AlvinMugambi]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @twotalltotems/react-native-otp-input@1.3.11 for the project I'm working on.

The OTP input loses focus immediately on IOS

Here is the diff that solved my problem:

diff --git a/node_modules/@twotalltotems/react-native-otp-input/dist/index.js b/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
index 71580b8..84d0946 100644
--- a/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
+++ b/node_modules/@twotalltotems/react-native-otp-input/dist/index.js
@@ -105,7 +105,7 @@ export default class OTPInputView extends Component {
             }
         };
         this.focusField = (index) => {
-            if (index < this.fields.length) {
+            if (index < this.fields.length && this.fields[index]) {
                 this.fields[index].focus();
                 this.setState({
                     selectedIndex: index
@@ -155,7 +155,9 @@ export default class OTPInputView extends Component {
     }
     componentDidMount() {
         this.copyCodeFromClipBoardOnAndroid();
-        this.bringUpKeyBoardIfNeeded();
+        setTimeout(()=>{
+            this.bringUpKeyBoardIfNeeded();
+        },0)
         this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide);
     }
     componentWillUnmount() {

This issue body was partially generated by patch-package.

[shobhitsinghal624]

Is the fix also meant for this: When using the device keyboard, everything works fine. The input box looses focus on using the emulator and adding values using laptop keyboard instead of the device keyboard.

[deCodeIt]

I just commented out the following while checking on the simulator and no longer had the input disabled or the keyboard not showing an issue. Had to manually open the keyboard though.

// this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide);

[timothyerwin]

I tried this but it didn't fix anything. I reinstalled everything just to make sure. The patch did run but there is no difference. What settings did you have on the component?