fix(iOS): proper layout calculation by IvanIhnatsiuk · Pull Request #339 · software-mansion/react-native-enriched

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 · 2026-01-07T11:17:36Z

@exploIF kind reminder 🙂

exploIF · 2026-01-13T13:46:59Z

I've noticed one strange behavior (not something crucial but would be good to verify what's happening):

with example app setup
specify default value which consists of 5 paragraphs (one liners)
notice that there is no bouncing when trying to scroll such input, however there is bouncing when we text is 4 or 6 paragraphs 😕

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-01-13.at.14.46.46.mov

IvanIhnatsiuk · 2026-01-13T15:01:13Z

I've noticed one strange behavior (not something crucial but would be good to verify what's happening):

with example app setup

specify default value which consists of 5 paragraphs (one liners)

notice that there is no bouncing when trying to scroll such input, however there is bouncing when we text is 4 or 6 paragraphs 😕

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-01-13.at.14.46.46.mov

@exploIF fixed

kacperzolkiewski

Input scroll works well 👏

exploIF

Works good, thank you!

Reverts #339 due to a iOS layout bug we found; The input sometimes becomes unscrollable when it's inside a scrollable bottom sheet (`@gorhom/bottom-sheet`), with a `KeyboardAwareScrollView` (`react-native-keyboard-controller`) turned into a proper bottom-sheet-scrollview component. The bug doesn't appear when testing a commit before the PR, but does happen on the exact merge commit of the said PR.

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

IvanIhnatsiuk commented Dec 21, 2025

View reviewed changes

Comment thread example/ios/Podfile.lock Outdated

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

IvanIhnatsiuk force-pushed the fix/prope-layout-calculation branch from 80a7eca to f2537b2 Compare December 28, 2025 09:56

IvanIhnatsiuk requested a review from exploIF December 29, 2025 10:46

IvanIhnatsiuk force-pushed the fix/prope-layout-calculation branch from ed2300e to 6e00a9e Compare January 9, 2026 13:27

IvanIhnatsiuk mentioned this pull request Jan 9, 2026

fix: padding applied as margin #358

Closed

IvanIhnatsiuk force-pushed the fix/prope-layout-calculation branch from 7764fdc to a046e54 Compare January 13, 2026 01:14

IvanIhnatsiuk added 11 commits January 13, 2026 15:48

feat: proper layout caclulation

1676a21

fix: return mock view

a0d838a

fix: remove code duplication

1428329

fix: remove unused ivars

5402e2e

feat: use usedRect in layout subviews

da5c6a1

fix: set _prevSize before making yoga node dirty

f4acdfa

fix: properly handle placeholder insets

cc0c84f

fix: remove epsilon comprassion

75a6cc4

fix: rebase with latest main

20f955d

fix: remove unused var

e73c468

fix: always bounce vertically

a4fb053

IvanIhnatsiuk force-pushed the fix/prope-layout-calculation branch from a97d254 to a4fb053 Compare January 13, 2026 15:00

kacperzolkiewski approved these changes Jan 16, 2026

View reviewed changes

Merge branch 'main' into fix/prope-layout-calculation

0e80514

exploIF approved these changes Jan 23, 2026

View reviewed changes

exploIF merged commit dc2de59 into software-mansion:main Jan 23, 2026
6 checks passed

szydlovsky added a commit that referenced this pull request Feb 13, 2026

fix: revert "fix(iOS): proper layout calculation #339"

ffd889d

szydlovsky mentioned this pull request Feb 13, 2026

fix: revert "fix(iOS): proper layout calculation #339" #417

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(iOS): proper layout calculation#339

fix(iOS): proper layout calculation#339
exploIF merged 12 commits intosoftware-mansion:mainfrom
IvanIhnatsiuk:fix/prope-layout-calculation

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!

Uh oh!

IvanIhnatsiuk commented Jan 7, 2026

Uh oh!

exploIF commented Jan 13, 2026 •

edited

Loading

Uh oh!

IvanIhnatsiuk commented Jan 13, 2026

Uh oh!

kacperzolkiewski left a comment

Uh oh!

exploIF left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

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!

Uh oh!

IvanIhnatsiuk commented Jan 7, 2026

Uh oh!

exploIF commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

IvanIhnatsiuk commented Jan 13, 2026

Uh oh!

kacperzolkiewski left a comment

Choose a reason for hiding this comment

Uh oh!

exploIF left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

IvanIhnatsiuk commented Dec 18, 2025 •

edited

Loading

szydlovsky commented Dec 18, 2025 •

edited

Loading

exploIF commented Jan 13, 2026 •

edited

Loading