fix(iOS): proper layout calculation #339

IvanIhnatsiuk · 2025-12-18T15:04:59Z

Summary

This PR simplifies and significantly optimizes text measurement + corrects textKit measurements.

Closes #332

Problems:

We had a bug that contentInsets were incorrectly applied, and padding was treated as margin.
We had asynchronous layout calculations that caused a small delay in the initial mount.
We had some workarounds to make content scrollable by setting textContentSize manually.
Scroll position is lost if we navigate back to the screen with the editor

All these problems were because we used the setContentView method, which is not a UIKit method(it was a RN method) that required proper children caculation. However, in our scenario, we just need to know the current content size, and UIKit can calculate the UIScrollView bounds and text content automatically.

Why did it happen?

InputTextView Content Size Measurement Issue

Problem Description

The issue was related to our InputTextView.

InputTextView always had zero bounds ({0,0}) during layout, which meant that TextKit did not know the actual size of the text container. As a result, TextKit attempted to measure contentSize using an invalid (zero-width) container, which led to incorrect text measurement and layout behavior.

This behavior can be verified by placing a breakpoint in the method responsible for computing contentSize inside InputTextView: at that moment, TextKit had no knowledge of the real container size.

Root Cause

updateLayoutMetrics did not properly apply geometry to InputTextView
The view’s frame/bounds remained zero
textContainer.size did not reflect the actual width of the component
TextKit was asked to measure text before receiving the final container size

Because of this, contentSize was calculated incorrectly, which caused issues such as:

incorrect height calculation
broken initial layout
scrolling not activating properly

Benchmarks

for the text content like:

const html =
  '<html>' +
  Array(1000)
    .fill(
      `<h1><u>Test</u></h1>
      <ul><li>First item</li></ul>
      <h2>Test h2</h2>
      <p>This is a <b>bold</b> statement with a <a href="https://www.example.com">link</a> and an image below:</p>
      <ol>
        <li>First ordered item</li>
        <li>Second ordered item with <i>italic</i> text</li>
      </ol>
      <blockquote>This is a blockquote.</blockquote>
      <p>Here is some inline code: <code>const x = 10;</code></p>
      `
    )
    .join('') +
  '</html>';

Scenario	Before (ms)	After (ms)
Measure size on initial mount	408	141
Single character change	764	0.007

Test Plan

Set a huge default value using

const html =
  '<html>' +
  Array(100)
    .fill(`<h1><u>Test</u></h1><ul><li>First item</li></ul><h2>Test h2</h2>`)
    .join('') +
  '</html>';

Test that scrolling/typing is working well

Provide clear steps so another contributor can reproduce the behavior or verify the feature works.
For example:

Steps to reproduce the bug (if this is a bug fix)
Steps to verify the new feature
Expected vs actual results
Any special conditions or edge cases to test

Screenshots / Videos

Initial layout + scrolling

Screen.Recording.2025-12-21.at.18.40.18.mov

Long single paragraph

Screen.Recording.2025-12-21.at.18.45.17.mov

New line insertion:

Please watch these videos at 0.25x speed.

Before

Screen.Recording.2025-12-21.at.18.48.49.mov

After

Screen.Recording.2025-12-21.at.18.46.10.mov

Content size layout measurement (Before)

Uploading Screen Recording 2025-12-21 at 18.55.16.mov…

Error that content size is ambiguous

Compatibility

OS	Implemented
iOS	✅
Android	❌

szydlovsky · 2025-12-18T15:17:00Z

Hey @IvanIhnatsiuk the changes look promising but we need to make sure absolutely no regressions are introduced.
Can you please check the reproductions from these three PR's:

We cannot proceed with the PR no matter how big the performance gains if any of these re-emerge.

If it comes to the measuring part, I'll check it on my end.

IvanIhnatsiuk · 2025-12-18T15:19:19Z

@szydlovsky Sure and it's obviously clear to me 😄 . I will test all of these scenarios and comeback with update 🙂

IvanIhnatsiuk · 2025-12-18T17:02:58Z

@szydlovsky

It is unclear what I should test
Works as expected

Screen.Recording.2025-12-18.at.17.57.54.mov

Again, it works:

Screen.Recording.2025-12-18.at.18.01.27.mov

szydlovsky · 2025-12-19T12:20:44Z

@IvanIhnatsiuk okay, we anyway want to test it out really thoroughly. Might be as late as at the beginning of the new year so we'll need some patience here 🙏

IvanIhnatsiuk · 2025-12-21T18:08:31Z

example/ios/Podfile.lock

    - ReactCommon/turbomodule/core
    - SocketRocket
    - Yoga
+  - react-native-safe-area-context (5.6.2):


Please, let me know if you want to keep separate screens in the example app or I should remove all of this logic.

NOTE:

Initially, I added it to simplify testing on your side

It should be removed. If we considered extending example app, we would like to this separately

@exploIF Okay, then I will keep it for testing purposes. Once you test it and confirm that there are no issues, I will revert these changes

IvanIhnatsiuk added 8 commits December 21, 2025 17:48

fix: proper layout calculation

54306e6

fix: remove unused code

1bea6e3

fix: update contentSize size

7748f19

fix: return anyTextHaveBeenModified

aa3963e

fix: use self.bounds.size

15bde74

fix: use contentSize

a3d61c4

feat: proper layout handling

1e204a2

fix: improve button layout

4caf62b

IvanIhnatsiuk force-pushed the fix/prope-layout-calculation branch from f72acb5 to 4caf62b Compare December 21, 2025 16:53

IvanIhnatsiuk added 2 commits December 21, 2025 18:30

fix: better naming

4f5d2ad

fix: remove default value

80a7eca

IvanIhnatsiuk commented Dec 21, 2025

View reviewed changes

IvanIhnatsiuk mentioned this pull request Dec 21, 2025

fix: proper layout calculation 7m 7Mountains/react-native-enriched#11

Merged

IvanIhnatsiuk changed the title ~~fix: proper layout calculation~~ fix(iOS): proper layout calculation Dec 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(iOS): proper layout calculation #339

fix(iOS): proper layout calculation #339

Uh oh!

IvanIhnatsiuk commented Dec 18, 2025 •

edited

Loading

Uh oh!

szydlovsky commented Dec 18, 2025 •

edited

Loading

Uh oh!

IvanIhnatsiuk commented Dec 18, 2025

Uh oh!

IvanIhnatsiuk commented Dec 18, 2025

Uh oh!

szydlovsky commented Dec 19, 2025

Uh oh!

IvanIhnatsiuk Dec 21, 2025

Uh oh!

exploIF Dec 22, 2025

Uh oh!

IvanIhnatsiuk Dec 22, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(iOS): proper layout calculation #339

Are you sure you want to change the base?

fix(iOS): proper layout calculation #339

Uh oh!

Conversation

IvanIhnatsiuk commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problems:

Why did it happen?

InputTextView Content Size Measurement Issue

Problem Description

Root Cause

Benchmarks

Test Plan

Screenshots / Videos

Initial layout + scrolling

Long single paragraph

New line insertion:

Before

After

Content size layout measurement (Before)

Error that content size is ambiguous

Compatibility

Uh oh!

szydlovsky commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

IvanIhnatsiuk commented Dec 18, 2025

Uh oh!

IvanIhnatsiuk commented Dec 18, 2025

Uh oh!

szydlovsky commented Dec 19, 2025

Uh oh!

IvanIhnatsiuk Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

exploIF Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

IvanIhnatsiuk Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

IvanIhnatsiuk commented Dec 18, 2025 •

edited

Loading

szydlovsky commented Dec 18, 2025 •

edited

Loading

IvanIhnatsiuk Dec 22, 2025 •

edited

Loading