[Fabric] Implement minimumFontScale in Text #14617

anupriya13 · 2025-04-25T10:57:08Z

Description

Type of Change

New feature (non-breaking change which adds functionality)

Why

What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits.

Resolves #13829

Related
facebook/react-native#50933
facebook/react-native#50934

What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.
[Fabric] Implement minimumFontScale in Text

Refer https://github.com/facebook/react-native/blob/0ad9de86d14a63175029e036af297beaa3b6c743/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java#L88

Screenshots

Add any relevant screen captures here from before or after your changes.

Refer this for upstream changes facebook/react-native#50933

Before:

After:

Testing

minFontScale.mp4

Changelog

Should this change be included in the release notes: indicate yes or no
Yes

Add a brief summary of the change to use in the release notes for the next release.
[Fabric] Implement minimumFontScale in Text

Microsoft Reviewers: Open in CodeFlow

acoates-ms · 2025-04-25T14:59:16Z

While you are looking at this. I noticed that the adjustsFontSizeToFit seems to only account for width? -- In the Text RNTester page, there are buttons to modify the height of the text, which I assume is supposed to change the font size, but doesn't appear to?

acoates-ms · 2025-04-25T14:59:38Z

...Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

  TextMeasurement::Attachments attachments;
  if (paragraphAttributes.adjustsFontSizeToFit) {
+    auto minimumFontScale = 1.0f;
+    // Uncomment below part when minimumFontScale is available in ParagraphAttributes


Is there an issue tracking this?

Oh, I see your PR in RN. Actually, I'm not sure how that would work.
I suspect adjustsFontSizeToFit can only work on single span text. Otherwise, how would we decide which span to scale?

Yes, already raised PR and issue in react-native.

facebook/react-native#50933

facebook/react-native#50934

So in the doc https://reactnative.dev/docs/text#minimumfontscale-ios

it mentions only about font scale not size, minimumFontSize is a different property.

vineethkuttan · 2025-04-25T12:40:27Z

...Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

-      // TODO : changes for minimumFontScale prop can be added.
-
-      if (spTextLayout->GetFontSize() <= defaultMinFontSize) {
+      if (spTextLayout->GetFontSize() <= minimumFontScale) {


You can add additional logic to ensure that the fontSize does not become negative when reducing it.

For example:

If fontSize is 0.9 , minimumFontScale is 0.5 and incase the text doesn't fit, the font size needs to be adjusted by subtracting 1.0, it would result in a negative value.

Ideally this case may not occur, Just letting you know though.

Yes the logic is above in commented code.. minimumFontScale would always be >= 0.01 and <= 1.0

https://reactnative.dev/docs/text#minimumfontscale-ios

Let me look more deeper if this can be optimised further

@vineethkuttan I have updated the code as per Android's https://github.com/facebook/react-native/blob/0ad9de86d14a63175029e036af297beaa3b6c743/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java#L88

vineethkuttan · 2025-04-25T15:08:43Z

While you are looking at this. I noticed that the adjustsFontSizeToFit seems to only account for width? -- In the Text RNTester page, there are buttons to modify the height of the text, which I assume is supposed to change the font size, but doesn't appear to?

Yes @acoates-ms , you are right. I have raised an issue for that already.

#14559

Summary: Support minimumFontScale in paragraphAttributes Resolves #50934 ## Changelog:  Support minimumFontScale in paragraphAttributes Pull Request resolved: #50933 Test Plan: Tested via this code here: microsoft/react-native-windows#14617 Before: ![image](https://github.com/user-attachments/assets/76b94aa8-228b-4a7e-9ec0-c366c7bf38ac) After: ![image](https://github.com/user-attachments/assets/f9fbf8c2-9776-429f-8605-5663f9c7b7c9) https://github.com/user-attachments/assets/fb9ae889-7d01-4317-a6e6-61e6b0708bc4 Reviewed By: NickGerleman Differential Revision: D73658489 Pulled By: cipolleschi fbshipit-source-id: 87ed27c0de2363e2ce0d908cc26670349586e7a6

* Initial support for UIA and tab navigation for a child Island (#14305) * Basic support for stitching the UIA tree for a ContentIslandComponentView's child * Updated comment * Change files * Support shift+tab, and move Automation event handlers to ContentIslandComponentView * Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Round Focus visuals by default, fix nudge rendering (#14312) * Round Focus visuals by default, fix nudge rendering * Change files * Fix react devtools hitting an assert on launch (#14320) * ignore unsupported methods * delete Super::DispatchCommand call * Change files * [Fabric] Fix PlatformColor (#14325) * Fix platform color * Change files * Add missing theme colors * snapshots * TurboModule spec checking should accept hstring for string arguments (#14322) * TurboModule spec checking should accept hstring for string arguments * Change files * example * Fix Number.h not copied from react-native core (#14331) ## Description ### Type of Change - Bug fix (non-breaking change which fixes an issue) ### Why react-native-windows currently maintains its own forked C++ TurboModule bridging files. For untouched stuff we copy JSI and TurboModule files from core react-native in `Layout-MSRN-Headers.ps1`. However, this script misses to copy `Number.h`. This causes compilation error when trying to import `react/bridging/Bridging.h`, which would be the case for example when using codegen to generate C++ TurboModule (JSI) bindings (note: this is for C++ JSI TurboModules, not react-native-windows's TurboModule system). ``` PS C:\Users\CocoT1\Projects\rn77> yarn example windows [...] Time Elapsed 00:00:00.61 ✔ Restoring NuGet packages ✔ Auto-linking... Success: No auto-linking changes necessary. (69ms) ✔ Found Solution: C:\Users\CocoT1\Projects\rn77\example\windows\rn77Example.sln ℹ Build configuration: Debug ℹ Build platform: x64 ✖ Building Solution: Generating Code... ✖ Build failed with message 4:7>C:\Users\CocoT1\.nuget\packages\microsoft.reactnative.cxx\0.77.0-fabric\tools\Microsoft.ReactNative.Cxx\ReactCommon\react\bridging\Bridging.h(18,10): error C1083: Cannot open include file: 'react/bridging/Number.h': No such file or directory [C:\Users\CocoT1\Projects\rn77\example\windows\rn77Example\rn77Example.vcxproj]. Check your build configuration. ``` ### What I'm changing the `Layout-MSRN-Headers.ps1` script to also copy `Number.h`. I think this should be enough for the nuget the contain to file, but I'm no expert here. ## Testing Monkeypatched by copying over Number.h to the microsoft.reactnative.cxx nuget (`C:\Users\CocoT1\.nuget\packages\microsoft.reactnative.cxx\0.77.0-fabric\tools\Microsoft.ReactNative.Cxx\ReactCommon\react\bridging\`). Works all good. I don't know how to run the `Layout-MSRN-Headers.ps1` script locally. Here's a create-react-native-library project: https://github.com/hsjoberg/rnw-cxx-turbomodule Note: it will fail to build unless you copy Number.h over to the nuget cache as explained earlier. * Fix stale focus rects left in UI when last focusable component is removed (#14359) * Fix stale focus rects left in UI when last focusable component is removed * Change files --------- Co-authored-by: Tatiana Kapos <tatianakapos@microsoft.com> * Fix issue when calling arrange on an RN Island during load (#14362) * Fix issue when calling arrange on an RN Island during load * Change files --------- Co-authored-by: Tatiana Kapos <tatianakapos@microsoft.com> * Fix tooltips in high dpi (#14397) * Fix tooltips in high dpi * Change files * format * tooltips dont respect textscalefactor * Fix build issue building component codegen using clang (#14393) * Fix build issue building component codegen using clang * Change files * Components do not lose hover state if pointer leaves window before it leaves the component (#14375) * Components do not lost hover state if pointer leaves window before it leaves the component * format * Change files --------- Co-authored-by: Tatiana Kapos <tatianakapos@microsoft.com> * Property updates switching between PlatformColors would no-op (#14398) * Property updates switching between PlatformColors would no-op * Change files * format * Fix bool operator on transparent colors returning false (#14413) * Fix crash loading logbox * Fix bool operator on transparent colors returning false * Change files * format * [Fabric] Implement textAlign prop in TextInput (#14407) * Introduce support for textAlign * Add playground textinputs demonstrating textAlign * Oops, let's remove textAlignOnUpdateProps * Change files * Lint fixes * Nit * Make textAlign to be of facebook::react::TextAlignment type * Lint fixes * Don't reinvent the wheel :D * Nit: yarn format * [Fabric] Allow text components to have children (#14438) * get images/views inline with text on fabric * add back in comments * Change files * remove duplicate code * add baseline for textinput * add checks for paper vs fabric * try fixing image * add resize:none and tests * fix override * comment out test * fix tests * fix typo * try to fix tests * comment out text test * mark windows-specific changes * Allow TextInput to scroll (#14448) * Allow TextInput to scroll * Change files * update snapshot * Implement onScrollBeginDrag property for ScrollView for fabric (#14446) Implement onScrollBeginDrag property for ScrollView for fabric (#14446) * [Fabric] Implement letterSpacing for TextInput (#14460) * Implement letterSpacing for TextInput * Change files * Update react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json * Update textinput.tsx * optimize code * Added tooltip property for Text (#14470) * Added tooltip property in Text.windows.js TextProps.windows.js for typescript to recognise it as an attribute of Text component * Added override Text.d.ts to src-win/Libraries/Text/ to add tooltip prop to Text component * Change files * Added Sample/text for tooltip prop tests * Added TextPropsWindows to include windows specific prop tooltip * updated TextProps interface to extednd TextPropsWindows * lint fix for Sample/text.tsx file --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> * [Fabric] Add Custom Font Family in Text Input (#14495) * [Fabric] Fix Bug in Narrator Navigation (#14498) * Fix Narrator Bug * Change files * Revert Codegen Changes * Implemented on onEndEditing for TextInput component (#14489) * implemented on onEndEditing * Change files * Update textinput.tsx to remove keyboard=dismiss which actually will cause blur or lost focus implicitly * lint fixes * updated legacy textInput snapshot for component update --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> * [Fabric] Add ImageRequestParams for Image Component (#14494) * [Fabric] Implement onProgress for Image (#14493) * [Fabric] Implement SpellCheck and AutoCorrect for TextInput (#14509) * Textinput double clicking selects text (#14515) * added check for double click on textInput component view connecting it to WM_LBUTTONDBLCLK * Change files * updated for lint fix * updated to remove position( Distance check) --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> * [Fabric] Implement decelerationRate in ScrollView (#14528) * [Fabric] Implement showsVerticalScrollIndicatorValue and showsHorizontalScrollIndicatorValue for ScrollView (#14526) * SetProperties is not exposed on ReactNativeIsland (#14517) * Add SetAppProperties method to ReactNativeIsland * Change files * rename SetAppProperties to SetProperties * change file * fix * fix * [Fabric] Implement Image body in Image Source RequestImage API (#14568) * Implement body in Image Source * Change files * Add test in playground * [Fabric] Implement zoomScale, maximumZoomScale and minimumZoomScale in ScrollView (#14562) * Implemet maximumZoomScale and minimumZoomScalein ScrollView * Change files * lint fix * Add zoomScale * Implement adjustsFontSizeToFit property for Text in Fabric (#14519) * Implementation of adjustFontSizeToFit * Final Changes using TextLayout * Lint Issue Fixes * Change files * prop change detection added * review Changes and E2E test cases added * Lint and Format Changes added * Test Cases Fix added * Update SnapShot * Removed the additional Check for resizing Font * Updated SnapShot * Review Changes * Lint and Format Changes --------- Co-authored-by: Vineeth K <kvineeth@microsoft.com> * [Fabric] Implement scrollEventThrottle for ScrollView (#14555) * Update WindowsAppSDK version to 1.7.250401001 (#14605) * Update WindowsAppSDK version to 1.7.250401001 * Change files * Update nuget lock files * more nuget lock file updates * Bump webview props * updated lock files * Implement accessibilityLevel for Fabric (#14593) * Implement accessibilityLevel for Fabric * Change files * Added Test Cases for the accessibility Label, Level etc. * Updating snapshots --------- Co-authored-by: Vineeth K <kvineeth@microsoft.com> * [Fabric] Implement hidesWhenStopped in ActivityIndicator (#14615) * Fix: Text component pressRetentionOffset issue on Windows (#14596) * Fix: Text component pressRetentionOffset issue on Windows * Change files * lint formatting fixed --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> * [Fabric] Implement minimumFontScale in Text (#14617) * Fix InitialProps (#14620) * Fix InitialProps * Change files * [Fabric] Implement the onPressIn property for the fabric implementation of TextInput (#14480) * Implemented OnPressIn event for textinput --------- * Implement OnScrollEndDrag Event Handler for ScrollView (#14473) * Implement onScrollEndDrag prop * Change files * lint fix * Address comments * add noexcept * Address feedback * Fix : Incorrect view access to obtain ContentIsland from for the DesktopPopupSiteBridge (#14628) * solved access read violation due to incorrect view access to obtain contentIsland * rolling back text.tsx * Update end of line text.tsx * rolled back Playground-Composition.vcxproj * rolled back Playground-Composition.vcxproj * fixed lint Playground-Composition.vcxproj * master Playground-Composition.vcxproj * rolled back Playground-Composition.vcxproj * indentation fix Playground-Composition.vcxproj * Revert unintended changes in Playground-Composition.vcxproj * added patch for winUiex[erimental removal * Change files --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> Co-authored-by: Vineeth <66076509+vineethkuttan@users.noreply.github.com> * [Fabric] Implement selectTextOnFocus prop in TextInput (#14641) * fix change file type * format * Bump hermes version - enable hermes native microtasks (#14635) * Bump hermes version * Change files * Bump JSI_VERSION to 19 * Opt into microtasks * buidl fix * update playground packages.lock with the script * temp: gather crash dmp * try larger machine * Pickup microsoft/node-api-jsi#13 * Update hermes with uap nuget fix * [Fabric] Implementation of accessibiltyAnnotation and adding support for IAnnotationProvider (#14626) * Implement accessibilityAnnotation for RNW Fabric * AccessibilityAnnotation Prop implementation final changes * Playground Changes * IAnnotationProvider Implementation * Adding CompositionAnnotationProvider to the project * Adding Test Cases * Change files * Lint issue Fixes * Lint fix * Updating SnapShots * Review Changes * Updating snapshot * Properly hook up root uia provider to island (#14643) * Properly hook up root uia provider to island * Change files * Modal : Added Titlebar , title , X handling and movable for windows (#14636) * addded titlebar , title handling , X handling , resizable * Change files * lint and format fix * removed debug logs and resizable property * removed unused imports from modalHostView .cpp file * lint and format fix * Update Modal.windows.js syntax after resolve conflict * updated overrides * updated rctmodalhostview file override structure --------- Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> * [Fabric] Implementation of accessibilityAccessKey and accessibilityItemType (#14658) * {Fabric] Implementation of accessibilityAccessKey and accessibilityItemType * Change Files * Updating snapShot * Implement CallInvoker as replacement for JSDispatcher (#14648) * Remove usage of JSDispatcher in various built-in modules * Change files * format * Implement public JSDispatcher on top of CallInvoker * format * Add ReactContext.CallInvoker and JsiInitializers * format * format * build fix * build fixes * Cleanup * Add runtime handle to instance created and instance loaded events * fix * fix * fix * fix * Remove unused JSDispatcherWriter * Bump folly to 2024.10.14.00 (#14532) * merge in folly 2024.10.14.00 * download fastfloat into node_modules * Change files * fix includes * fix cachelocality * fix desktop.dll * clean paths and fix ARM64EC * add FastFloatCommitHash to folly CGManifest * fix types * revert package.lock and fix json file path * manually fix spacing * fix * feedback * Scale loading bar text when island is super small (#14680) * Scale loading bar text when island is super small * Change files * Fix crash when reloading an instance with an active ReactNativeIsland (#14676) * Fix crash when reloading an instance with an active ReactNativeIsland * Change files * Update simple sample to use function component rather than component class * More cleanup * Fix warnings * Reenable optimization in TMs to avoid going through a dynamic for callbacks/promises (#14691) * Reenable optimization in TMs to avoid going through a dynamic for callbacks/promises * Change files * [Fabric] Implement maxFontSizeMultiplier in Text (#14622) * Clean up error messages (#14695) * Clean up error messages * Change files * JSValue exports data fields - should export value reference accessors (#14707) * JSValue shouldn't export data fields, which make it hard to use MS.RN.Cxx across dll boundaries * Change files * missing functions * fix * Fix unreferenced parameter warning in glog stub (#14708) * Fix warning in glog stub * Change files * Update folly exports from rn-win32 (#14710) * Update folly exports from rn-win32 * Change files * change files * lint fix * lint fix * update override * update snapshots * arm64ec fix * Pointer events (#14713) * PointerEvent fixes * Change files * format * Fix integration test --------- Co-authored-by: JesseCol <50150435+JesseCol@users.noreply.github.com> Co-authored-by: Tatiana Kapos <tatianakapos@microsoft.com> Co-authored-by: Hampus Sjöberg <hampus.sjoberg@protonmail.com> Co-authored-by: Daniel Ayala <14967941+danielayala94@users.noreply.github.com> Co-authored-by: Anupriya Verma <54227869+anupriya13@users.noreply.github.com> Co-authored-by: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com> Co-authored-by: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Co-authored-by: Vineeth <66076509+vineethkuttan@users.noreply.github.com> Co-authored-by: Vineeth K <kvineeth@microsoft.com> Co-authored-by: Harini Malothu <harinimalothu17@gmail.com> Co-authored-by: Sharath Manchala <10109130+sharath2727@users.noreply.github.com>

anupriya13 added 2 commits April 25, 2025 16:25

[Fabric] Implement minimumFontScale in Text

1620943

Change files

561c9ea

anupriya13 mentioned this pull request Apr 25, 2025

Support minimumFontScale in paragraphAttributes facebook/react-native#50934

Closed

anupriya13 marked this pull request as ready for review April 25, 2025 11:09

anupriya13 requested a review from a team as a code owner April 25, 2025 11:09

lint fix

8d81884

anupriya13 mentioned this pull request Apr 25, 2025

Implement minimumFontScale property for Text in Fabric #13829

Open

anupriya13 requested review from TatianaKapos, acoates-ms and vivekkhare31 April 25, 2025 11:20

anupriya13 added API: Completion Area: Text New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. labels Apr 25, 2025

acoates-ms reviewed Apr 25, 2025

View reviewed changes

acoates-ms approved these changes Apr 25, 2025

View reviewed changes

vineethkuttan reviewed Apr 25, 2025

View reviewed changes

anupriya13 added 3 commits April 25, 2025 21:38

Optimize and update code as per android/ios

5fbabd1

update default minimumFontScale value

f46627b

Merge branch 'main' into user/anuverma/minFontScale

73865ea

anupriya13 merged commit a4e227e into microsoft:main Apr 25, 2025
59 checks passed

anupriya13 mentioned this pull request Apr 26, 2025

Support minimumFontScale in paragraphAttributes facebook/react-native#50933

Closed

acoates-ms pushed a commit to acoates-ms/react-native-windows that referenced this pull request May 29, 2025

[Fabric] Implement minimumFontScale in Text (microsoft#14617)

8941eca

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Fabric] Implement minimumFontScale in Text #14617

[Fabric] Implement minimumFontScale in Text #14617

Uh oh!

anupriya13 commented Apr 25, 2025 •

edited

Loading

Uh oh!

acoates-ms commented Apr 25, 2025

Uh oh!

acoates-ms Apr 25, 2025

Uh oh!

acoates-ms Apr 25, 2025

Uh oh!

anupriya13 Apr 25, 2025

Uh oh!

vineethkuttan Apr 25, 2025

Uh oh!

anupriya13 Apr 25, 2025

Uh oh!

anupriya13 Apr 25, 2025

Uh oh!

vineethkuttan commented Apr 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Fabric] Implement minimumFontScale in Text #14617

[Fabric] Implement minimumFontScale in Text #14617

Uh oh!

Conversation

anupriya13 commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Uh oh!

acoates-ms commented Apr 25, 2025

Uh oh!

acoates-ms Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

acoates-ms Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

vineethkuttan Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

vineethkuttan commented Apr 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anupriya13 commented Apr 25, 2025 •

edited

Loading