Skip to content

fix(text): inherit parent styles in nested Text - #5040

Open
Doberjohn wants to merge 4 commits into
mainfrom
@Doberjohn/nested-text-inheritance
Open

fix(text): inherit parent styles in nested Text#5040
Doberjohn wants to merge 4 commits into
mainfrom
@Doberjohn/nested-text-inheritance

Conversation

@Doberjohn

Copy link
Copy Markdown

Motivation

Two related bugs in nested Text, both reproduced on main first.

A variant parent lost its typography. When a Text with a variant wrapped a
nested Paper Text, it replaced its own font with the child's style instead of
layering 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: Chip renders <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 Text did not inherit. A nested Text or AnimatedText without a
variant applied 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 Text already inherits from an enclosing Text
natively, 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, and
lives in its own module so the Text and AnimatedText imports stay
one-directional.

AnimatedText was broken in both directions and is fixed too. It falls back to
bodyMedium where Text falls back to fonts.default, so an animated child
inside a displayLarge parent was snapping to fontSize: 14. That fallback
inconsistency 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.tsx that no
longer 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.

  • 6 new unit tests. Each behaviour-changing one was confirmed to fail without its fix.
  • The 3 pre-existing nesting tests still pass, so the intentional
    child-overrides-parent behaviour is preserved.
  • AnimatedText had no test coverage before this; it now has 3 tests.
  • Full suite: 55 suites, 740 tests, 169 snapshots, with no snapshot churn.
  • yarn lint and yarn typecheck clean.

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 Doberjohn self-assigned this Aug 7, 2026
@Doberjohn Doberjohn changed the title @doberjohn/nested text inheritance Fix nested Text style inheritance Aug 7, 2026
@Doberjohn Doberjohn changed the title Fix nested Text style inheritance fix(text): inherit parent styles in nested Text Aug 7, 2026
@Doberjohn
Doberjohn requested a review from satya164 August 7, 2026 10:40
@Doberjohn
Doberjohn marked this pull request as ready for review August 7, 2026 10:40
@Doberjohn
Doberjohn requested a review from artus9033 August 7, 2026 10:44
@Doberjohn

Copy link
Copy Markdown
Author

A quick note on the Typography work: because a nested Text without a variant no longer applies fonts.default at all, this fix is immune to Body variants switching typeface. Before it, that switch would have caused a visible sans-serif inside sans-serif-medium mismatch on Android. A nested Text that declares its own variant still applies it, which is unchanged here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nested Text components do not inherit style

1 participant