Keyboard Flickering on TextInput with secureTextEntry

[gcon97]

Description

If you have 2 text inputs, (One with secure text entry enabled and the other set to disabled), When typing, highlighting and scrolling in the non-secure text entry, the keyboard will flicker.
This is an iOS issue only, I have tested this using iOS 17, on an iPhone 13 mini. I cannot repeat this issue in the simulator, only on the device.

It appears to be when iOS recognizes it as a login field, so it presents the auto-fill passwords UI. See the attached video on the flickering issue described.

RPReplay_Final1694522683.mov

React Native Version

0.72.4

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 115.16 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.3.1
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.7
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.06.12.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.11.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK:
API Levels:
- "28"
- "31"
- "32"
- "33"
Build Tools:
- 30.0.2
- 30.0.3
- 32.0.0
- 33.0.0
- 34.0.0
System Images:
- android-30 | Google Play ARM 64 v8a
- android-33 | Google APIs ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode:
version: 14.3.1/14E300b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 18.0.1.1
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

Have 2 TextInput components inside a view, one set with secureTextEntry, one without.

This issue is only seen on device, not in simulator

Snack, screenshot, or link to a repository

https://github.com/gcon97/KeyboardFlickeringDemo

[tianlinjill]

I also encountered the similar issue when in login screen

[ShadReyes]

I am experiencing the same on login screens. It's a newer issue. It seems to be caused by the suggested autofill.

The problem is reduce by using default value prop passed to TextInput component that holds its own text ref and passes out ref value on change.

[ShadReyes]

I figured out the problem

It appears to be that at some point recently (pre iOS 17) a bug was introduced. Whenever secureTextEntry={false} and textContentType is set, various Text Input changes (typing, focus, etc...) will fire a native keyboardWillChangeFrame event that causes the keyboard to re-render. This also causes iOS's AutoFill QuickType Bar (forgive me if my terminology is incorrect) to flicker.

This can be especially problematic for any RN apps using KeyboardAvoidingView with iOS behavior={'position'} since it will cause a layout flicker as it adjusts to the disappearing and reappearing AutoFill QuickType Bar.

You can actually see the issue in native iOS apps:

1. Go to the login screen of a native iOS app.
2. Change focus from username and password fields.
3. In many apps you can see a slight bounce as the keyboard animations handle the AutoFill QuickType Bar flicker.

For those who are using KeyboardAvoidingView (RN V0.72.* Patch Fix)

For those who are wrapping their text inputs in a <KeyboardAvoidingView behavior= 'position'}> and <ScrollView>, you are likely dealing with your screen jumping on text change and focus change.

This isn't a pretty solution (and keep in mind it does not fix the root issue of the keyboard re-render), but you can do the following **TEMPORARY and NOT fully tested** fix for this issue:

1. Go to the file at: node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
2. Add ignoreIOSKeyboardWillChangeEvents?: boolean | undefined; to the KeyboardAvoidingView props.
3. Go to the types file at: node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.d.ts
4. Add ignoreIOSKeyboardWillChangeEvents?: boolean | undefined; to the KeyboardAvoidingView props.
5. Replace the const {duration, easing, endCoordinates} = this._keyboardEvent; line with the following:

const {duration, easing, endCoordinates} = this._keyboardEvent;

if(Platform.OS === 'ios' && duration === 0 && !!this.props.ignoreIOSKeyboardWillChangeEvents ) {
      return;
}

6. Use patch package to save the changes.

be sure to set ignoreIOSKeyboardWillChangeEvents={true} with care. I, for example, am only using it on a login screen for a very specific keyboard avoiding use case scenario that I detail above. Hope this helps.

[ThorANilsson]

RPReplay-Final1696326197.mov

I began seeing this after updating the device i test on (iPhone 14 Pro) to iOS 17. Using Expo Go. Very annoying...

What's interesting is that I am not experiencing this on another iPhone 11 Pro Max, also running iOS 17.

[ThorANilsson]

I believe this is caused by the "Passwords"-thing (see attached image) that appears on iOS when the OS believes you want to use a password from your keychain.

When I test on a phone that does not have a keychain, there is no jumping or flickering.

[gcon97]

I can confirm that it is an issue with the Passwords option in the Keyboard toolbar. Seems to be an issue across iOS 17 rather than a ReactNative issue. (It also isn't fixed in iOS 17.1, so we may be waiting a while for a fix).

Closing as it isn't a React Native-specific issue.

[ThorANilsson]

Adding textContentType='oneTimeCode' to your TextInput disables the Password toolbar, which also eliminates the described issue.

[Shubham0850]

@ThorANilsson I tried this, but it's not working for me.

[mkhoussid]

Here's what I did.

TL;DR: If it's a password field, on each change update the actual string value in a map, and then render the value as bullets ('•'). What we're essentially doing here is saying that all of our fields are just regular fields without autofill, but we can manipulate the value of the field, if it's a password field, if we pass a certain flag.

Somewhere created a file called maskMap.ts with the following:

export const maskMap = new Map<string, string>();

And in your custom TextField component (I'm assuming most of you have wrapped TextInput into one of your own TextField components):

import * as React from 'react';
import { TextInput } from 'react-native-paper';
import { maskMap } from './maskMap';

const PASSWORD_MASK_CHAR = '•';
. . .
// secureTextEntry determines whether or not this is a password field
const TextField = React.memo(({ onChange, secureTextEntry, ...props }: YourTextFieldProps) => {
  const [textFieldId] = React.useState(uuid()); // use whatever uuid generator you'd like
. . .
  React.useEffect(() => {
	  maskMap.set(textFieldId, '');

	  return () => {
		  maskMap.delete(textFieldId);
	  };
  }, [secureTextEntry]);

  const handleChange = React.useCallback((e: string) => {
	  if (secureTextEntry) {
		  const previousValue = maskMap.get(textFieldId) as string;
		  const formattedNewValue = e.replace(new RegExp(PASSWORD_MASK_CHAR, 'g'), '');

		  const newValue = previousValue + formattedNewValue;
		  onChange(newValue);
		  maskMap.set(textFieldId, previousValue + formattedNewValue);
	  } else {
		  onChange(e);
	  }
  }, [secureTextEntry]);

  const getValue = React.useCallback(() => {
	  if (!secureTextEntry) {
		  return value;
	  }

	  return value.replaceAll(/./g, PASSWORD_MASK_CHAR);
  }, [value, secureTextEntry, showText, maskMap]);
. . .

    return (
        . . .
            <TextInput
                value={getValue()}
                onChangeText={handleChange}
                textContentType='none' // add this
                . . .
            />
        . . .
    )
})

[Engazan]

how this can be closed if its still happening ?

it happends all the time when you have textContentType="password" or secureTextEntry

[ShadReyes]

@Engazan It's closed because it's an iOS bug. iOS started over-triggering keyboardWillChangeFrame events every time the input changes when the arguments you specified are implemented. We can't ignore this event because it's relied on for many component designs and reactivity. So, sadly we have to put in temporary patch fixes until Apple fixes it on their side.

[noahkurz]

Adding textContentType='oneTimeCode' to your TextInput disables the Password toolbar, which also eliminates the described issue.

This works! Thank you!! Just saved my weekend lol

[chimiWangchukWangdi]

Any updates

[nguyenhuynhdeveloper]

I have found the solution. The error is caused by props value , you can hide the value and handle the logic with ref

[nnphong1904]

Hi everyone, is there any update on this?

[xydian]

Also happening on my side :) Seems to be an issue in flutter, too flutter/flutter#134723

[FemtDeveloper]

I have problem also in android,, can somebody helpme?

WhatsApp.Video.2024-02-06.at.03.17.54.mp4

[ugar0ff]

How to hide the "password" panel on the keyboard when we use secureTextEntry?

[RodrigueHunel]

Agree the issue should not be closed. These are all workarounds to a real issue, and doesn't seem like there are any other open issues in this repo that are directly related?

If there are, would be good to link here.

flutter/flutter#134723

[vitorbarros]

It should not be closed!

[irekrog]

It works even worse on iOS 18 (beta 8) 😕

[picardplaisimond]

Are we the only persons in the world with this issue ? I don't understand why this flickering is not coming up on other apps? And why the simulator doesn't show the flickering ? iOS 17 is widely used right now. Can't ignore this.

[zhenkaGo]

Try adding autoCorrect={false} to TextInput

[jsommer001]

Hate the .textContentType(.oneTimeCode) "fix".

Any update?

[Bialson]

I sometimes observe that problem in other apps so I guess there is something wrong with iOS. Hope iOS 18 will resolve the problems.

[irekrog]

I sometimes observe that problem in other apps so I guess there is something wrong with iOS. Hope iOS 18 will resolve the problems.

I'm not sure #39411 (comment)

[artiemez]

Try adding autoCorrect={false} to TextInput

Thanks! Helped in my case - I have email textInput with autoComplete set to username. Flickering is gone 👍

[verrannt]

Thanks! Helped in my case - I have email textInput with autoComplete set to username. Flickering is gone 👍

@artiemez Would you mind pasting your TextInput code? I still have the flickering, no matter what I try for autoComplete or autoCorrect.

(Testing on iPhone 13 Pro with iOS 18)

[artiemez]

Thanks! Helped in my case - I have email textInput with autoComplete set to username. Flickering is gone 👍

@artiemez Would you mind pasting your TextInput code? I still have the flickering, no matter what I try for autoComplete or autoCorrect.

(Testing on iPhone 13 Pro with iOS 18)

                <Input
                    size="lg"
                    className="text-center"
                    label="email address"
                    enterKeyHint="next"
                    onSubmitEditing={handleSubmit}
                    placeholder="email address"
                    autoCapitalize="none"
                    autoComplete="username"
                    keyboardType="email-address"
                    autoCorrect={false}
                    showClearButton
                    {...field}
                />

{...field} is react hook form controller props

[angelprzz]

I have the same problem with keyboardType="phone-pad" and autoComplete="tel"

[verrannt]

I was able to fix it by using what @artiemez proposed, but it's important to note that this only worked when using react-hook-form.

I.e. using autoComplete and autoCorrect on the normal React Native TextInput did nothing, but when wrapping it in a react-hook-form Controller and specifying keyboardType="email-address", then the jittering is gone for me, too.

[AbhijithKA2001]

I sometimes observe that problem in other apps so I guess there is something wrong with iOS. Hope iOS 18 will resolve the problems.

Could you please specify which apps you encountered the same issue in?