The prop secureTextEntry causes TextInput and Keyboard iOS to have a strange behavior

user_9582559 0
Viewed 462

I have a sign up form, and inside it there are two password fields. When the password fields get focused, the keyboard seems to go invisible and the TextInput content goes invisible too. I'll try to explain the problem in two parts.

Keyboard: The keyboard works fine for the other inputs, but when it gets to the password input, the keyboard goes invisible, but it's noticeable that the keyboard it's still there. This happened on a real device (iPhone 11 Pro Max iOS 14). This issue doesn't happen on all devices, tho, because I tested this on an iPhone 7 iOS 13.1.13 and the problem didn't occur.

TextInput: On the devices where you can still see the keyboard after focusing the password field, even if you type something you won't be able to see it. The TextInput doesn't show any characters.

About the code: The TextInput is wrapped inside a Controller component, that comes from react-hook-form. I've found issues stating that the problem does not stem from react-hook-form because even when there's only the RN's TextInput, the problem still happens.

Here's the code for the text input:

 <Controller
  control={control}
  rules={{
    required: true,
    minLength: 6
  }}
  render={({ onChange, value }) => (
    <TextInput
      style={styles.input}
      secureTextEntry
      value={value}
      returnKeyType="next"
      ref={(e: TextInput) => focus.password.current = e}
      onChangeText={value => onChange(value)}
      onSubmitEditing={() => focus.confirmPassword.current?.focus()}
    />
  )}
  name="password"
  defaultValue=""
/>

And here's the link for a video demonstrating the issue: https://www.loom.com/share/c475cd33d7694498a0603756eecba596

This is an ejected expo project, so these are the versions which I think are relevant to know:

"expo": "~38.0.8"

"react": "~16.11.0"

"react-native": "~0.62.2"

If any more information is needed, please let me know.

react-native javascript ios
2 Answers

You need to check out everything wrapping the textinput and have a look on the css. I suggest that you move the textinputs to a different page and start testing them there. I think something is preventing the keyboard to show like the hook-form.

user_47235510

I was dealing with the same problem and find a solution for preventing emoji button display. I set my keyboardType to 'ascii-capable' which only contains Latin Letters (I tried with English and Turkish keyboard they both works)This is my custom TextInput component

<TextInputS
  placeholder={I18n.t('FULL_NAME', {locale: user.language})}
  onTextChange={text => setFullName(text)}
  error={nameError}
  errorMessage={I18n.t('REQUIRED_PLACE_WARNING', {
    locale: user.language,
  })}
  secure={true}
  hide={true}
  multiline={false}
  keyboardType={'ascii-capable'}
/>
user_105850860
Related