r5n-dev/react-native-otp-inputs

Keyboard closes after entering each input if custom "inputContainerStyles" is specified

jp-xbox-gaming opened this issue · 4 comments

jp-xbox-gaming commented

While trying to create OTP inputs with 6 digits and custom styles as shown below, Keyboard is getting dismissed after user enters each single input.

<OtpInputs
  numberOfInputs={6}
  keyboardType="number-pad"
  autofillFromClipboard={false}
  handleChange={otp => console.log(otp)}
  inputContainerStyles={{ height: 53 }}
  inputStyles={{
    color: "#607ca8",
    fontSize: 25,
    textAlign: "center",
    paddingVertical: 5,
    paddingHorizontal: 8,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#adb6bc",}}
  style={{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 20,
    marginBottom: 5,
  }}
/>

If inputContainerStyles={{ height: 53 }} is commented/removed, everything works fine. Except that it adds the default style which gives bottom border to all the input fields. The only way to avoid bottom border is to provide custom inputContainerStyles which strangely seems to be affecting Keyboard dismiss behavior.

This behavior was observed while using react-native-otp-inputs version "5.0.0-alpha.0" on Android studio's Pixel 3 emulator running Android Pi.

ELBEQQAL94 commented

You have to remove keyboardType="number-pad" that's work for me

ELBEQQAL94 commented

Same problem for me, Any update on this issue?

baladin commented

I have similar issue. In my case anything in focusStyle causes the keyboard to be dismissed after each input.

  focusStyles={{
    borderBottomColor: "#00284F",
    borderBottomWidth: 1
  }}

removing it, works perfectly.

manjuy124 commented

I have similar issue. In my case anything in focusStyle causes the keyboard to be dismissed after each input.

  focusStyles={{
    borderBottomColor: "#00284F",
    borderBottomWidth: 1
  }}

removing it, works perfectly.

Its worked!

Looks like these issue is happening again on latest versions.

  • 🎉1