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
                . . .
            />
        . . .
    )
})