tttstudios / react-native-otp-input

Tiny Javascript library which provides an elegant UI for user to input one time passcode.
MIT License
521 stars 238 forks source link

ios keyboard not showing up fix #193

Open pIyUsH00rAj opened 1 year ago

pIyUsH00rAj commented 1 year ago

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.

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..3d822b8 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.

thiavila-sigma commented 1 year ago

Thank you so much for this patch. It is working perfectly!

It is sad that this awesome library hasn't got any updates in a while, with everything changing for the new arch. I wish I had enough knowledge to keep supporting it.

An extra for anyone reading this post. It works fine with newer IOS devices, but with older devices (even with the newest IOSs) you'll only get a keyboard after you press the input field a thousand times. So here is the fix:

Still in "node_modules/@twotalltotems/react-native-otp-input/dist/index.js" search for onPress and change it for onPressOut. It gets shit done and it prevents from being clicked if you are in a scrollable page.

timothyerwin commented 1 year ago

this is actually covered in one of the closed tickets...you need to call Keyboard.dismiss() before showing the otp screen.