fix(text): inherit parent styles in nested Text - #5040
Open
Doberjohn wants to merge 4 commits into
Open
Conversation
A nested Text or AnimatedText without a variant applied its fallback font unconditionally, overriding the font, weight, letter spacing and color it should have inherited from the enclosing text. React Native inherits these, so a nested one now declares only its own style. The shared context lives in its own module to keep the Text and AnimatedText imports one-directional. Fixes #4351.
Doberjohn
marked this pull request as ready for review
August 7, 2026 10:40
Author
|
A quick note on the Typography work: because a nested |
This file contains hidden or 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
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.
Motivation
Two related bugs in nested
Text, both reproduced onmainfirst.A variant parent lost its typography. When a
Textwith avariantwrapped anested Paper
Text, it replaced its own font with the child's style instead oflayering on top of it. With an unstyled child there was no child style to take
over, so the parent rendered with no typography at all. This reached shipped
components:
Chiprenders<Text variant="labelLarge">around its children, so<Chip><Text>label</Text></Chip>dropped the entire label font block(
fontSize: 14,fontWeight: 500,lineHeight: 20,letterSpacing: 0.1).A nested
Textdid not inherit. A nestedTextorAnimatedTextwithout avariantapplied its fallback font unconditionally, overriding the family,weight, letter spacing and color it should have inherited from the enclosing text.
On the approach: React Native's
Textalready inherits from an enclosingTextnatively, so nothing needs to merge styles. The bug was Paper overriding what
would otherwise be inherited. A nested component now declares only its own
style. The shared context therefore carries a boolean rather than a style, andlives in its own module so the
TextandAnimatedTextimports stayone-directional.
AnimatedTextwas broken in both directions and is fixed too. It falls back tobodyMediumwhereTextfalls back tofonts.default, so an animated childinside a
displayLargeparent was snapping tofontSize: 14. That fallbackinconsistency between the two components still exists, but is no longer
reachable through nesting.
Related issue
Fixes #4351.
#4356 is an earlier attempt at the same issue, taking the opposite approach of
merging the parent's style into the child. It also only publishes the parent
style from the variant-less branch, so a child under a variant parent would
still not inherit, and it is written against a version of
Text.tsxthat nolonger exists on
main.Test plan
Example app, Typography screen, new "Nested text" section with four cases:
unstyled child, styled child, child with its own variant, and a bold parent
whose nested child inherits the weight.
child-overrides-parent behaviour is preserved.
AnimatedTexthad no test coverage before this; it now has 3 tests.yarn lintandyarn typecheckclean.