[Android] Text with adjustsFontSizeToFit changes the text layout infinitely

[alfonsocj]

Description

A text component that has the property adjustsFontSizeToFit updates the text layout infinitely on Android. It's not reproducible on iOS.

Version

0.66.0

Output of npx react-native info

System:
OS: macOS 10.16
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 42.38 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.1/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
Watchman: 2022.01.31.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
Android NDK: 21.0.6113669
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7486908
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.0 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Add a Text component with adjustsFontSizeToFit and log onTextLayout to see infinite logs

Snack, code example, screenshot, or link to a repository

Check App.js on https://github.com/alfonsocj/RNAdjustsFontSizeToFitBug or add a text component like the one below to a RN 0.66+ project

<Text
  adjustsFontSizeToFit
  onTextLayout={() => {
    console.log('Text layout hanged');
  }}>
  Test
</Text>

[maaxg]

I was able to reproduce this issue in react native 0.67.2 too.
System:
OS: Linux 5.13 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400H @ 2.70GHz
Memory: 8.18 GB / 15.38 GB
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: AI-211.7628.21.2111.8139111
Languages:
Java: 11.0.13 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
npmGlobalPackages:
react-native: Not Found

[alfonsocj]

The problem is related to this commit 5902152.
We have an infinite loop there. onCollectExtraUpdates is part of the node update cycle. By marking the node as updated in onCollectExtraUpdates we are restarting the update infinitely.

Removing the commit fixes the infinite loop, but it will bring back the issue mentioned in the commit #30717. The font size won't change if the parent layout changes as Yoga caches the text measure and won't run the measure function again.

[github-actions]

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.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.