Add Android text font variation settings (#57804) by evankatz14 · Pull Request #57804 · react/react-native

evankatz14 · 2026-08-03T19:19:45Z

Summary:

Add a fontVariationSettings text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for <Text>, applies it to Paint, and includes it in text measurement cache identity because variable axes can affect layout.

Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order.

Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts normal and the React Native empty-string convention as explicit resets.

Changelog:
[Android][Added] - Add fontVariationSettings support for <Text>

Reviewed By: Abbondanzo, huntie

Differential Revision: D113580491

meta-codesync · 2026-08-03T19:19:53Z

@evankatz14 has exported this pull request. If you are a Meta employee, you can view the originating Diff in D113580491.

Summary: Add a `fontVariationSettings` text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for `<Text>`, applies it to `Paint`, and includes it in text measurement cache identity because variable axes can affect layout. Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order. Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts `normal` and the React Native empty-string convention as explicit resets. Changelog: [Android][Added] - Add `fontVariationSettings` support for `<Text>` Reviewed By: Abbondanzo Differential Revision: D113580491

github-actions · 2026-08-03T20:23:36Z

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

Please include a clear changelog message.
This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

matinzd · 2026-08-04T07:57:09Z

Successor to: #44667 :D

Summary: Add a `fontVariationSettings` text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for `<Text>`, applies it to `Paint`, and includes it in text measurement cache identity because variable axes can affect layout. Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order. Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts `normal` and the React Native empty-string convention as explicit resets. Changelog: [Android][Added] - Add `fontVariationSettings` support for `<Text>` Reviewed By: Abbondanzo Differential Revision: D113580491

Summary: Add a `fontVariationSettings` text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for `<Text>`, applies it to `Paint`, and includes it in text measurement cache identity because variable axes can affect layout. Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order. Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts `normal` and the React Native empty-string convention as explicit resets. Changelog: [Android][Added] - Add `fontVariationSettings` support for `<Text>` Reviewed By: Abbondanzo, huntie Differential Revision: D113580491

Summary: Pull Request resolved: react#57804 Add a `fontVariationSettings` text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for `<Text>`, applies it to `Paint`, and includes it in text measurement cache identity because variable axes can affect layout. Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order. Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts `normal` and the React Native empty-string convention as explicit resets. Changelog: [Android][Added] - Add `fontVariationSettings` support for `<Text>` Reviewed By: Abbondanzo, huntie Differential Revision: D113580491

meta-codesync · 2026-08-10T00:12:56Z

This pull request has been merged in 19f7d14.

React Native 0.88 adds a `fontVariationSettings` style prop for `<Text>` and `<TextInput>` (react/react-native#57804, #57815). It sets any variation axis at runtime, and the axes take precedence over `fontWeight` and `fontStyle`. Mentions it in the Variable fonts section, and as the escape hatch where the guide previously offered none: setting axes on iOS, and setting a non-weight axis on a font loaded with `useFonts`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…plied to a reused Paint Summary: `fontVariationSettings` (react#57804, react#57805) is applied with `Paint.setFontVariationSettings` after `Paint.setTypeface`. Android's `Paint.setFontVariationSettings` returns early when the requested settings string equals the value the paint already holds, and `Paint.setTypeface` does not clear that stored string. On the legacy variation path (every shipped Android release), the variation instance lives on the typeface, so once `setTypeface` replaces the typeface the axes are gone, but the paint still reports the old settings and the second `setFontVariationSettings` call is a no-op. React Native hits this sequence on every measurement after the first. `TextLayoutManager.scratchPaintWithAttributes` reuses a thread-local `TextPaint` and resets it with `setTypeface(null)`, which leaves the stale settings string in place. Any subsequent `<Text>` with the same `fontVariationSettings` string is then measured with the un-varied typeface, while the `TextView` draws it through its own paint where the axes apply. The same happens inside `StaticLayout`, whose pooled `MeasuredParagraph`/`TextLine` paints copy the settings string via `Paint.set`. `ReactEditText` has the equivalent problem through `TextView.setFontVariationSettings`, which also skips unchanged values. With a variable font whose default instance is lighter than the requested `wght`, Yoga receives regular-width metrics while semibold glyphs are drawn, so `numberOfLines={1}` text is ellipsized ("Get Start...") and wrapped text breaks in different places than it renders. This change clears the paint's settings before re-applying them in `ReactTypefaceUtils.applyFontVariationSettings` and in `ReactEditText.maybeUpdateTypeface`, so the axes are always rebuilt on the current typeface. Paints without previous settings are unaffected. Changelog: [ANDROID] [FIXED] - Fix text measured with the wrong width when `fontVariationSettings` are re-applied to a reused `Paint` Test Plan: - `./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests "*TextLayoutManagerFontWeightAdjustmentTest*" --tests "*ReactTextInputPropertyTest*"`: 8/8 and 27/27 pass. The three new tests cover the reused-paint reset, the fresh-paint path (no spurious clear), and the measurement scratch paint through `TextLayoutManager.updateTextPaint`. Without the production change, `reused paint re-applies unchanged font variation settings to a new typeface` and `scratch text paint re-applies font variation settings on repeated measurement` fail. - `yarn lint-kotlin-check` (`./gradlew ktfmtCheck`): passes. - Manual, Android 17 emulator (API 37), variable Inter font registered via `ReactFontManager.addCustomFont` with entries for weights 100–900, `<Text numberOfLines={1} style={{ fontFamily: "InterVariable", fontWeight: "600", fontVariationSettings: "'wght' 600" }}>`: - Before: the second and later semibold texts are measured as regular and ellipsized; button label rendered as "Get Start...". - After: labels render in full and the measured bounds match the drawn text for `'wght' 600`, `650` and `700`, including repeated identical styles and `TextInput`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

…8320) Summary: `fontVariationSettings` (#57804, #57805) is applied with `Paint.setFontVariationSettings` after `Paint.setTypeface`. Android's `Paint.setFontVariationSettings` returns early when the requested settings string equals the value the paint already holds, and `Paint.setTypeface` does not clear that stored string. On the legacy variation path, the variation instance lives on the typeface, so once `setTypeface` replaces the typeface the axes are gone, but the paint still reports the old settings and the second `setFontVariationSettings` call is a no-op. With a variable font whose default instance is lighter than the requested `wght`, Yoga receives regular-width metrics while semibold glyphs are drawn, so `numberOfLines={1}` text is ellipsized ("Get Start...") and wrapped text breaks in different places than it renders. This change clears the paint's settings before re-applying them in `ReactTypefaceUtils.applyFontVariationSettings` and in `ReactEditText.maybeUpdateTypeface`, so the axes are always rebuilt on the current typeface. Paints without previous settings are unaffected. ## Changelog: [ANDROID] [FIXED] - Fix text measured with the wrong width when `fontVariationSettings` are re-applied to a reused `Paint` Pull Request resolved: #58320 Test Plan: Ran test suite, validated the fix in my patched react-native instance that backports variable fonts support. Reviewed By: andrewdacenko Differential Revision: D118791592 Pulled By: javache fbshipit-source-id: 937e6bb2ceed937679abfb6ca192a74fd385b3eb

…act#58320) Summary: `fontVariationSettings` (react#57804, react#57805) is applied with `Paint.setFontVariationSettings` after `Paint.setTypeface`. Android's `Paint.setFontVariationSettings` returns early when the requested settings string equals the value the paint already holds, and `Paint.setTypeface` does not clear that stored string. On the legacy variation path, the variation instance lives on the typeface, so once `setTypeface` replaces the typeface the axes are gone, but the paint still reports the old settings and the second `setFontVariationSettings` call is a no-op. With a variable font whose default instance is lighter than the requested `wght`, Yoga receives regular-width metrics while semibold glyphs are drawn, so `numberOfLines={1}` text is ellipsized ("Get Start...") and wrapped text breaks in different places than it renders. This change clears the paint's settings before re-applying them in `ReactTypefaceUtils.applyFontVariationSettings` and in `ReactEditText.maybeUpdateTypeface`, so the axes are always rebuilt on the current typeface. Paints without previous settings are unaffected. ## Changelog: [ANDROID] [FIXED] - Fix text measured with the wrong width when `fontVariationSettings` are re-applied to a reused `Paint` Pull Request resolved: react#58320 Test Plan: Ran test suite, validated the fix in my patched react-native instance that backports variable fonts support. Reviewed By: andrewdacenko Differential Revision: D118791592 Pulled By: javache fbshipit-source-id: 937e6bb2ceed937679abfb6ca192a74fd385b3eb

React Native 0.88 adds a `fontVariationSettings` style prop for `<Text>` and `<TextInput>` (react/react-native#57804, #57815). It sets any variation axis at runtime, and the axes take precedence over `fontWeight` and `fontStyle`. Mentions it in the Variable fonts section, and as the escape hatch where the guide previously offered none: setting axes on iOS, and setting a non-weight axis on a font loaded with `useFonts`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

#48779) # Why React Native 0.88 adds a `fontVariationSettings` style prop for `<Text>` and `<TextInput>` (react/react-native#57804, react/react-native#57815). We should mention that in the font guides. # How Mention the new `fontVariationSettings` prop in our docs; mention it's since RN 0.88 - needs updating once we know what SDK that translates to. # Test Plan # Checklist - [ ] I added a `changelog.md` entry and rebuilt the package sources according to [this short guide](https://github.com/expo/expo/blob/main/CONTRIBUTING.md#-before-submitting) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). - [x] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Summary: Pull Request resolved: react#57804 Add a `fontVariationSettings` text style prop and carry it through Fabric text attributes into Android text rendering. Android now deserializes the prop for `<Text>`, applies it to `Paint`, and includes it in text measurement cache identity because variable axes can affect layout. Preserve the distinction between an absent setting and an explicitly empty setting so nested text can inherit or clear the parent variation axes. Apply high-level font properties before low-level variation settings so explicit axes take precedence, matching CSS font realization order. Settings syntax is intentionally forwarded unchanged through common text attributes and validated only by the Android font variation parser. This avoids narrowing the grammar Android accepts. As a result, malformed child settings are outside the supported inheritance contract: they replace an inherited value before Android validation and are not guaranteed to fall back to the parent settings. Android also accepts `normal` and the React Native empty-string convention as explicit resets. Changelog: [Android][Added] - Add `fontVariationSettings` support for `<Text>` Reviewed By: Abbondanzo, huntie Differential Revision: D113580491 fbshipit-source-id: 46cea13ef5f06b33ed9f9d0b28b5c16f84193ea6

…8320) Summary: `fontVariationSettings` (#57804, #57805) is applied with `Paint.setFontVariationSettings` after `Paint.setTypeface`. Android's `Paint.setFontVariationSettings` returns early when the requested settings string equals the value the paint already holds, and `Paint.setTypeface` does not clear that stored string. On the legacy variation path, the variation instance lives on the typeface, so once `setTypeface` replaces the typeface the axes are gone, but the paint still reports the old settings and the second `setFontVariationSettings` call is a no-op. With a variable font whose default instance is lighter than the requested `wght`, Yoga receives regular-width metrics while semibold glyphs are drawn, so `numberOfLines={1}` text is ellipsized ("Get Start...") and wrapped text breaks in different places than it renders. This change clears the paint's settings before re-applying them in `ReactTypefaceUtils.applyFontVariationSettings` and in `ReactEditText.maybeUpdateTypeface`, so the axes are always rebuilt on the current typeface. Paints without previous settings are unaffected. ## Changelog: [ANDROID] [FIXED] - Fix text measured with the wrong width when `fontVariationSettings` are re-applied to a reused `Paint` Pull Request resolved: #58320 Test Plan: Ran test suite, validated the fix in my patched react-native instance that backports variable fonts support. Reviewed By: andrewdacenko Differential Revision: D118791592 Pulled By: javache fbshipit-source-id: 937e6bb2ceed937679abfb6ca192a74fd385b3eb (cherry picked from commit 96518a8)

meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 3, 2026

facebook-github-tools Bot added p: Facebook Partner: Facebook Partner labels Aug 3, 2026

meta-codesync Bot added the meta-exported label Aug 3, 2026

meta-codesync Bot changed the title ~~Add Android text font variation settings~~ Add Android text font variation settings (#57804) Aug 3, 2026

evankatz14 force-pushed the export-D113580491 branch from f90100a to 15dcc5e Compare August 3, 2026 19:23

evankatz14 force-pushed the export-D113580491 branch from 15dcc5e to bf3cb88 Compare August 3, 2026 19:24

evankatz14 force-pushed the export-D113580491 branch from bf3cb88 to ed01aee Compare August 4, 2026 14:39

mdjastrzebski mentioned this pull request Aug 4, 2026

feat: font variation settings mdjastrzebski/react-native-plain-text#3

Merged

evankatz14 force-pushed the export-D113580491 branch from ed01aee to dc94991 Compare August 5, 2026 14:26

evankatz14 force-pushed the export-D113580491 branch from dc94991 to da95ef9 Compare August 5, 2026 22:01

evankatz14 force-pushed the export-D113580491 branch from da95ef9 to c2964ba Compare August 6, 2026 16:03

evankatz14 force-pushed the export-D113580491 branch 2 times, most recently from 5d1a56a to 6d11961 Compare August 6, 2026 17:56

evankatz14 force-pushed the export-D113580491 branch from 6d11961 to 8bd3dd6 Compare August 7, 2026 20:41

meta-codesync Bot closed this in 19f7d14 Aug 10, 2026

meta-codesync Bot added the Merged This PR has been merged. label Aug 10, 2026

matinzd mentioned this pull request Aug 10, 2026

feat(android): font variation settings #44667

Closed

4 tasks done

Abbondanzo mentioned this pull request Aug 10, 2026

Add font-variation-settings feature for variable fonts react-native-community/discussions-and-proposals#829

Open

This was referenced Aug 11, 2026

[docs] variable fonts are supported in the Fonts guide expo/expo#48777

Merged

[docs] mention the fontVariationSettings style prop in the Fonts guide expo/expo#48779

Merged

jkadamczyk mentioned this pull request Sep 3, 2026

Fix Android text mis-measurement when using fontVariationSettings #58320

Closed

Navigation Menu

Repository navigation

Add Android text font variation settings (#57804) - #57804

Add Android text font variation settings (#57804)#57804
evankatz14 wants to merge 1 commit into
react:mainfrom
evankatz14:export-D113580491

evankatz14 commented Aug 3, 2026 •

edited by meta-codesync Bot

Loading

Uh oh!

meta-codesync Bot commented Aug 3, 2026

Uh oh!

github-actions Bot commented Aug 3, 2026

Uh oh!

matinzd commented Aug 4, 2026

Uh oh!

meta-codesync Bot commented Aug 10, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

evankatz14 commented Aug 3, 2026 • edited by meta-codesync Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meta-codesync Bot commented Aug 3, 2026

Uh oh!

github-actions Bot commented Aug 3, 2026

Uh oh!

matinzd commented Aug 4, 2026

Uh oh!

meta-codesync Bot commented Aug 10, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

evankatz14 commented Aug 3, 2026 •

edited by meta-codesync Bot

Loading