iOS: Singleline TextInput auto grow: text gets cut while typing

[hannojg]

Description

When having a single-line <TextInput /> it will automatically grow its width by the length of text entered.
However, it can be observed that there is a slight flickering while entering text.
When examined frame by frame you can see that the text input gets cut.

This doesn’t happen in a clean iOS app using UIKit and UITextView. My expectation is that, as we are using UITextView in <TextInput /> on iOS, it neither happens in react native.

Steps to reproduce

1. Open the reproducer snack
2. Run on your iPhone or simulator
3. Record your screen
4. Rapidly type text
5. You might notice a slight feel of flickering while typing
6. In the screen recording, if you step frame by frame, you may notice that while the text is entered the text input gets cut

React Native Version

0.75.4

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 15.0
  CPU: (12) arm64 Apple M2 Pro
  Memory: 147.94 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.17.0
    path: ~/.nvm/versions/node/v20.17.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.15.1/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.17.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/hannomargelo/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
    System Images:
      - android-32 | Google APIs ARM 64 v8a
      - android-33 | Wear OS 4 ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-33 | Google APIs ATD ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ATD ARM 64
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.7
    path: /Users/hannomargelo/.jenv/shims/javac
  Ruby:
    version: 2.7.6
    path: /Users/hannomargelo/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No relevant logs.

Reproducer

https://snack.expo.dev/@hannojg/rntextinput-autogrow-issue

Screenshots and Videos

❌ React Native TextInput	✅ UIKit UITextView
reproduction_rn2.mov	Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-10-04.at.15.12.27.mp4

[hannojg]

Sharing a few findings:

• It doesn't happen with multiline=true (aka UITextView)
• In RCTTextInputComponentView in the updateLayoutMetrics function i can see that when the bug happens the updateLayoutMetrics is called twice for the same string. The first size is "incorrect":

// EDIT: I see those same values for a multiline text input - but there the issue doesn't occur...

Hypothesis:

• We are calculating the layout size on an outdated string?
• The events are applied wrongly?

[hannojg]

cc @janicduplessis

[hannojg]

Latest finding:

It seems that on textDidChange event we call updateState to our shadow node. In the next flush of the event queue of the fabric renderer this event will get picked up, the new text will be measured and the text input will be provided with a new layout. However, that update doesn't happen "in the same frame" as textDidChange.
I think one solution here would be to synchronously update the layout when the text changes.

(entered "abc", we can see that the measure function of the textnodemanager is called in a later cycle)

[hannojg]

I can confirm that if i monkey patch the state update to by synchronous it works:

Event order before	Event order after (sync)
textInputDidChange _state->updateState() textInputDidChangeSelection updateState(state, oldState) updateLayoutMetrics()	textInputDidChange _state->updateState() updateState(state, oldState) updateLayoutMetrics() textInputDidChangeSelection

[hannojg]

A cleaner solution i found is to use the eventEmitter available to the component to schedule an update, and then flush synchronously:

This way the updateLayoutMetrics callback will be called the same time textInputDidChange gets called:

Which ultimately fixes the issue:

output.mp4

[janicduplessis]

Looks like the proper solution to avoid flicker. The method is prefixed experimental, but should be fine to use, might just have to make sure there are no cases that result in a deadlock.

cc @cipolleschi

[hannojg]

The fix doesn't work for controlled TextInputs. I did some research and found that the problem with controlled TextInputs is that there are two mechanisms by which we update the text from JS to the native component view:

1. By updating the text prop, which will be used for the state in the shadow node
2. By explicitly calling the setTextAndSelection view command from JS

The problem with the (2) mechanism is that it currently updates the text immediately in _setAttributedString:

react-native/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

Lines 473 to 487 in 2c45675

	- (void)setTextAndSelection:(NSInteger)eventCount
	value:(NSString *__nullable)value
	start:(NSInteger)start
	end:(NSInteger)end
	{
	if (_mostRecentEventCount != eventCount) {
	return;
	}
	_comingFromJS = YES;
	if (value && ![value isEqualToString:_backedTextInputView.attributedText.string]) {
	NSAttributedString *attributedString =
	[[NSAttributedString alloc] initWithString:value attributes:_backedTextInputView.defaultTextAttributes];
	[self _setAttributedString:attributedString];
	[self _updateState];
	}

Updating the text won't update the layout immediately, thus creating a flicker. The layout will eventually update, as we are calling _updateState here (which will cause the ShadowNode to be updated, which will cause the layout to be measured).

However, that update to the layout might happen to late.

Here is how this could be fixed imo:

a) Since we have Fabric in place, i don't think we need the setTextAndSelection view command anymore. We should get the text and selection from the shadow node / the props of the TextInput. This way we will ensure that any state update, like changing the text, will also recalculate the layout metrics and apply the state update + layout update at the same time.

// Edit: I see that we still use setTextAndSelection in the ref methods that we expose for TextInput (clear() and setSelection(). So i assume we want to keep it for now (although we might want to consider refactoring TextInput to have either explicit commands for that, or use state internally)

b) Or, alternatively, if we want to keep the command (for reasons i might not know), we should just update the state (and the state update will cause the actual displayed text to be updated). PoC PR:

• fix: don't update text input text directly in setTextAndSelection #46973

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.