Fixed dynamic behavior of <Text adjustsFontSizeToFit={true}> on Android #31538
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR fixes facebook#30717, a bug in `<Text adjustsFontSizeToFit={true}>` implementation that prevents it from adjusting text size dynamically on Android. The way `adjustsFontSizeToFit` was implemented in facebook#26389 (and the design of ReactTextShadowNode) implies that Yoga will call `onMeasure` on every size change of a `<Text>` component, which is actually not the case (Yoga can cache the results of the measures, call the function multiple times or do not call at all inferring the size from the size constraints). The implementation of `adjustsFontSizeToFit` computes the adjusted string inside the measure function and then eventually passes that to the view layer where it's being rendered. The proper fix of this issue requires the full redesign of the measure and rendering pipelines and separating them, and that... would be too invasive. And, I believe, this issue is already fixed in Fabric where this part is already designed this way. Instead, this diff implements a small workaround: if `adjustsFontSizeToFit` is enabled, we manually dirty the Yoga node and mark the shadow node updated to force remeasuring.
facebook-github-bot
added
the
CLA Signed
Base commit: ebc89bf |
Base commit: ebc89bf |
|
@yungsters has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator. |
facebook-github-bot
pushed a commit
that referenced
this pull request
Jun 1, 2021
Summary: Creates a new RNTester example to verify #31538 (D28631465). Changelog: [Android][Added] - RNTester example for adjusting text with dynamic layout. Reviewed By: kacieb Differential Revision: D28779870 fbshipit-source-id: 5297a823645d1e9e35d4c86b491f3c225ecc9543
|
@yungsters merged this pull request in 5902152. |
alfonsocj
pushed a commit
to alfonsocj/react-native
that referenced
this pull request
Feb 17, 2022
…on Android (facebook#31538)" This reverts commit 5902152.
facebook-github-bot
pushed a commit
that referenced
this pull request
Feb 17, 2022
…tely (#33135) Summary: Fixes the infinite loop explained in the issue #33129 by reverting commit 5902152. PR #31538. `onCollectExtraUpdates` is part of the node update cycle. By marking the node as updated `markUpdated()` in `onCollectExtraUpdates` we are restarting the update infinitely. Unfortunately, reverting this PR also reintroduces the original issue #30717 which IMO is minor compared to the infinite loop. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Text with adjustsFontSizeToFit changes the text layout infinitely Pull Request resolved: #33135 Test Plan: I added a console.log to the Text `onTextLayout` in [packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js ](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js) to see if the infinite loop is gone.   ``` Reviewed By: ShikaSD Differential Revision: D34310218 Pulled By: lunaleaps fbshipit-source-id: 0d40f49d15c562ec25983145897bd95dc182f897
ShikaSD
pushed a commit
that referenced
this pull request
Feb 22, 2022
…tely (#33135) Summary: Fixes the infinite loop explained in the issue #33129 by reverting commit 5902152. PR #31538. `onCollectExtraUpdates` is part of the node update cycle. By marking the node as updated `markUpdated()` in `onCollectExtraUpdates` we are restarting the update infinitely. Unfortunately, reverting this PR also reintroduces the original issue #30717 which IMO is minor compared to the infinite loop. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Text with adjustsFontSizeToFit changes the text layout infinitely Pull Request resolved: #33135 Test Plan: I added a console.log to the Text `onTextLayout` in [packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js ](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js) to see if the infinite loop is gone.   ``` Reviewed By: ShikaSD Differential Revision: D34310218 Pulled By: lunaleaps fbshipit-source-id: 0d40f49d15c562ec25983145897bd95dc182f897
ShikaSD
pushed a commit
that referenced
this pull request
Feb 24, 2022
…tely (#33135) Summary: Fixes the infinite loop explained in the issue #33129 by reverting commit 5902152. PR #31538. `onCollectExtraUpdates` is part of the node update cycle. By marking the node as updated `markUpdated()` in `onCollectExtraUpdates` we are restarting the update infinitely. Unfortunately, reverting this PR also reintroduces the original issue #30717 which IMO is minor compared to the infinite loop. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Text with adjustsFontSizeToFit changes the text layout infinitely Pull Request resolved: #33135 Test Plan: I added a console.log to the Text `onTextLayout` in [packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js ](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js) to see if the infinite loop is gone.   ``` Reviewed By: ShikaSD Differential Revision: D34310218 Pulled By: lunaleaps fbshipit-source-id: 0d40f49d15c562ec25983145897bd95dc182f897
Saadnajmi
pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
…tely (facebook#33135) Summary: Fixes the infinite loop explained in the issue facebook#33129 by reverting commit 5902152. PR facebook#31538. `onCollectExtraUpdates` is part of the node update cycle. By marking the node as updated `markUpdated()` in `onCollectExtraUpdates` we are restarting the update infinitely. Unfortunately, reverting this PR also reintroduces the original issue facebook#30717 which IMO is minor compared to the infinite loop. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Text with adjustsFontSizeToFit changes the text layout infinitely Pull Request resolved: facebook#33135 Test Plan: I added a console.log to the Text `onTextLayout` in [packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js ](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js) to see if the infinite loop is gone.   ``` Reviewed By: ShikaSD Differential Revision: D34310218 Pulled By: lunaleaps fbshipit-source-id: 0d40f49d15c562ec25983145897bd95dc182f897
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes #30717, a bug in
<Text adjustsFontSizeToFit={true}>implementation that prevents it from adjusting text size dynamically on Android.The way
adjustsFontSizeToFitwas implemented in #26389 (and the design of ReactTextShadowNode) implies that Yoga will callonMeasureon every size change of a<Text>component, which is actually not the case (Yoga can cache the results of the measures, call the function multiple times or do not call at all inferring the size from the size constraints). The implementation ofadjustsFontSizeToFitcomputes the adjusted string inside the measure function and then eventually passes that to the view layer where it's being rendered.The proper fix of this issue requires the full redesign of the measure and rendering pipelines and separating them, and that... would be too invasive. And, I believe, this issue is already fixed in Fabric where this part is already designed this way.
Instead, this diff implements a small workaround: if
adjustsFontSizeToFitis enabled, we manually dirty the Yoga node and mark the shadow node updated to force remeasuring.Changelog
[Android] [Fixed] - Fixed dynamic behavior of on Android
Test Plan
text-adjustments-android.mov