Still facing keyboard issue

[rajatgalav]

Code is <OTPInputView style={{width: '80%', height: 200}} pinCount={6} autoFocusOnLoad codeInputFieldStyle={{ fontSize: 18, width: 30, height: 45, borderWidth: 0, borderBottomWidth: 1, }} codeInputHighlightStyle={{borderColor: "#03DAC6",}} onCodeFilled = {(code) => this.verify(code)} /> i am using redmi node 6 pro and as per the solutions i found i changed version of library to 1.0.22 but keyboard is not shown on autoFocusOnLoad

[rajatgalav]

it worked when i comment event listener keyboardDidHide from node modules // this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.handleKeyboardDidHide)

and i have to also comment line to remove this listener // this.keyboardDidHideListener.remove()

[mengheangrat]

I got this issue too with latest version 1.1.2

[harshalcent]

it better if we don't use it by making autoFocusOnLoad={false}. Manually it works smoothly.

[akiladevinda]

@rajatgalav Still facing this issue after commenting given lines. Any solution ?

[rajatgalav]

@akiladevinda try to remove any keyboard handler in your app.

In which you are facing this android or ios?

[akiladevinda]

@rajatgalav Only on andorid.. ios work fine.. I havent use any keyboard handlers in my app

[rajatgalav]

@akiladevinda For android i used react-native-confirmation-code-input version 1.0.4.

[AndriiBoiko]

Hello The same... Is there any update on this?

[AndriiBoiko]

Hey! I guess I found the trouble: I created a clean project. I added a dependence and at the first render - I noticed that the keyboard appears and then instantly a keyboard is hiding, and appear yellow warning. After then - I added

YellowBox.ignoreWarnings([
   'Clipboard has been',
]);

And keyboard still jumping without yellow warning.

I recorded a short screencast. I hope It will be helpful for you

[AndriiBoiko]

Sorry, I forgot - In the current project, I use "react-native": "0.62.2". I tried on the "react-native": "0.61.5" - and everything worked

  "dependencies": {
    "@react-native-community/async-storage": "^1.9.0",
    "@react-native-community/masked-view": "^0.1.9",
    "@react-navigation/native": "^5.1.5",
    "@react-navigation/stack": "^5.2.10",
    "@twotalltotems/react-native-otp-input": "^1.3.5",
    "@types/react-navigation": "^3.4.0",
    "axios": "^0.19.2",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-bootsplash": "^2.2.2",
    "react-native-country-picker-modal": "^1.10.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-phone-input": "0.2.2",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^1.0.0",
    "@types/jest": "^24.0.24",
    "@types/react-native": "^0.62.0",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-native-phone-input": "^0.2.0",
    "@types/react-native-vector-icons": "^6.4.5",
    "@types/react-redux": "^7.1.7",
    "@types/react-test-renderer": "16.9.2",
    "@typescript-eslint/eslint-plugin": "^2.28.0",
    "@typescript-eslint/parser": "^2.28.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-import-resolver-babel-module": "^5.1.2",
    "eslint-plugin-import": "^2.20.2",
    "husky": "^3.1.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "prettier": "^2.0.4",
    "react-native-dotenv": "^0.2.0",
    "react-test-renderer": "16.11.0",
    "typescript": "^3.8.3"
  },

[AndriiBoiko]

Also, another bug is related to

react-native-screens

https://github.com/software-mansion/react-native-screens/issues/472

node_modules/@twotalltotems/react-native-otp-input/dist/index.js:121

    this.focusField = (index) => {
      if (index < this.fields.length) {
        this.fields[index].focus();
        this.setState({
          selectedIndex: index,
        });
      }
    };
    this.blurAllFields = () => {
      this.fields.forEach((field) => field.blur());
      this.setState({
        selectedIndex: -1,
      });
    };

can you add some fix?

    this.focusField = (index) => {
      if (index < this.fields.length) {
        this.setState({
          selectedIndex: index,
        }, () => {
          this.fields[index].focus()
        });
      }
    };

    this.blurAllFields = () => {
      this.setState({
        selectedIndex: -1,
      }, () => {
        this.fields.forEach((field) => field.blur());
      });
    };

Thx! Will wait for your answers! Have a nice day!

[fixbravo]

I had the same problem of input not focusing (bottom border darker but no cursor) and keyboard not showing at component mount.

Thank you @AndriiBoiko your code fixed my problem. Hoping for your code to be integrated now

[anhquan291]

Hi guys, I'm still facing that problem on android. Waiting for the new update. Thanks

[imamrobani]

in my case on Android when receiving the code from SMS, I didn't see "Copy ..." ? anyone can explain ?

[boulomiel]

@imamrobani
Your sms doesn't includes "verification code" or "code" I guess.

[knightyau]

any solution? keyboard still not jumping up in android.. using @twotalltotems/react-native-otp-input v 1.3.11

[zoobibackups]

any solution? keyboard still not jumping up in android.. using @twotalltotems/react-native-otp-input v 1.3.11

same issue

[ashish3528]

It is Working fine in open the keyboard Android device. use this code Step :-1 Add the code .

<OTPInputView ref={input => this.otpInput = input} autoFocusOnLoad={false} style={styles.otpStyle} pinCount={4} secureTextEntry={true} clearInputs={this.state.clearInput} codeInputFieldStyle={styles.underlineStyleBase} codeInputHighlightStyle={styles.underlineStyleHighLighted} code={this.state.enteredPin} />

Step 2:- Call the function in componentDidMount

componentDidMount() { setTimeout(() => { this.otpInput.focusField(0) }, 500); }

[vaibhavgadekar]

it better if we don't use it by making autoFocusOnLoad={false}. Manually it works smoothly.

Useful

[SameeraMadushan]

It is Working fine in open the keyboard Android device. use this code Step :-1 Add the code .

<OTPInputView ref={input => this.otpInput = input} autoFocusOnLoad={false} style={styles.otpStyle} pinCount={4} secureTextEntry={true} clearInputs={this.state.clearInput} codeInputFieldStyle={styles.underlineStyleBase} codeInputHighlightStyle={styles.underlineStyleHighLighted} code={this.state.enteredPin} />

Step 2:- Call the function in componentDidMount

componentDidMount() { setTimeout(() => { this.otpInput.focusField(0) }, 500); }

This was the solution. Thanks!

[umairfasial]

It is Working fine in open the keyboard Android device. just do it... autoFocusOnLoad={false}

and reload the app