fix(text): inherit parent styles in nested Text by Doberjohn · Pull Request #5040 · callstack/react-native-paper

Doberjohn · 2026-08-07T10:36:31Z

Motivation

A nested Text reset the font and color it should inherit: a Text with a variant in a contained Button rendered in onSurface, barely visible in dark theme, and a Chip around a plain Text lost its font.

Now a nested Text or AnimatedText sets only its style and variant font and inherits the rest. With its own theme it renders like a top-level one.

Related issue

Fixes #4351.

Screenshots / Videos

Before

After

Test plan

iOS, Android and web, light and dark: nest Text with and without a variant or theme, and a Text with a variant in a Chip and a contained Button. Children keep the parent color unless they have a theme. Known limit (#5162): a Text in a View in a Text gets the native default color.

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 · 2026-08-07T10:54:23Z

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.

MikitasK

overall, these changes looks good to me 👌 the approach looks solid & aligns with RN's text inheritance behavior 👍
just a few point to address before merge:

Co-authored-by: Mikita Kliushun <nikita.kliushun@gmail.com>

Doberjohn · 2026-08-13T14:06:47Z

@MikitasK thanks for the review, your proposed changes sounded good!

MikitasK

LGTM ✅

JKobrynski

LGTM, good job!

JKobrynski · 2026-08-26T13:22:59Z

@satya164 @artus9033 all yours

satya164

please remove all LLM generated comments, they are either unnecessary or could be replaced with 1-2 lines describing the purpose.

only add comments where you think it's needed for understanding something and write it by hand.

for tests: add tests where

Text isn't a direct child and can be nested inside another component that's used inside Text
child text also sets its variant and theme

this implementation also isn't accurate to what react native does. a View nested inside Text will reset the inheritance, though it might be a reasonable limitation.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

satya164 · 2026-10-22T20:19:48Z

Review by Claude

Screenshots of this code added to the Typography screen, dark theme:

<Text variant="headlineSmall" style={{ color: 'tomato' }}>
  A tomato <Text>plain child</Text>
</Text>
<Text variant="headlineSmall" style={{ color: 'tomato' }}>
  B tomato <Text variant="bodyLarge">variant child</Text>
</Text>
<Text style={{ color: 'tomato', fontWeight: 'bold' }}>
  C tomato bold <Text variant="titleLarge">variant child</Text>
</Text>
<Text variant="headlineSmall">
  D parent <Text theme={{ colors: { onSurface: 'green' } }}>green theme child</Text>
</Text>
<Chip selected onPress={() => {}}><Text variant="labelLarge">Var</Text></Chip>
<Button mode="contained"><Text variant="labelLarge">Var</Text></Button>

iOS

Nested Text with a variant drops the parent color. Steps: render B, C and the "Var" button above. What happens: the children render in onSurface, and the "Var" button label is almost invisible on the primary container. Expected: B and C stay tomato, and the button label keeps the button label color. (via Claude, verify if it makes sense)
Nested Text without a variant ignores its theme prop. Steps: render D above. What happens: the child renders in the parent color. Expected: the child renders green, as it does on main. (via Claude, verify if it makes sense)

Android

Nested Text with a variant drops the parent color. Same steps and result as on iOS. (via Claude, verify if it makes sense)
Nested Text without a variant ignores its theme prop. Same steps and result as on iOS. (via Claude, verify if it makes sense)

Web

Nested Text with a variant drops the parent color. Same steps and result as on iOS. (via Claude, verify if it makes sense)
Nested Text without a variant ignores its theme prop. Same steps and result as on iOS. (via Claude, verify if it makes sense)

satya164

Review by Claude

See the inline comments. (via Claude, verify if it makes sense)

…t-inheritance

Keep a comment only where it helps, in one line, and drop the context sentence that the nested font change made wrong. Check every child for an element instead of copying React Native's three-child cutoff. The provider is still skipped when the children are only strings or numbers.

Assert that a nested Text sets no color of its own and inherits the parent's, and cover a Text nested through another component. Fold the test that did not check what its title said into the one above it, drop the duplicate of the default font test, and replace the three AnimatedText tests with one.

A nested Text or AnimatedText with its own theme renders like a top-level one again, with the theme's color, as it does on main.

A nested Text or AnimatedText with a variant now applies only the variant font, so it no longer resets the color to onSurface. A Text with a variant inside a contained Button keeps the button's label color.

The nested section was inserted above the Custom Variant sample, which made that sample read as one of the nested cases.

Doberjohn · 2026-11-03T20:53:54Z

Comments are trimmed to one line where they help (890995c). New tests cover a Text nested through another component, and a child with its own variant, its own theme, or both (eebf4c7, 34bca85, 0ad63eb). On View: Paper's context doesn't reset there, so on iOS and Android a Paper Text inside a View inside a Text gets React Native's default color and font, while web inherits fine; passing theme or a color works around it. Tracked in #5162, with a fix that uses React Native's own text ancestor context on native.

Review points addressed in 890995c to 0ad63eb; replies are in each thread.

MikitasK

LGTM ✅

Doberjohn added 4 commits August 7, 2026 11:49

fix(text): keep the parent variant when nesting Text

71bb6ce

docs(text): add nested Text example cases

6e1fe71

docs(text): show inherited weight in the nested Text example

3af3142

github-actions Bot added the Contributor: Internal label Aug 7, 2026

Doberjohn self-assigned this Aug 7, 2026

Doberjohn changed the title ~~@doberjohn/nested text inheritance~~ Fix nested Text style inheritance Aug 7, 2026

Doberjohn changed the title ~~Fix nested Text style inheritance~~ fix(text): inherit parent styles in nested Text Aug 7, 2026

Doberjohn requested a review from satya164 August 7, 2026 10:40

Doberjohn marked this pull request as ready for review August 7, 2026 10:40

Doberjohn requested a review from artus9033 August 7, 2026 10:44

MikitasK reviewed Aug 12, 2026

View reviewed changes

Comment thread src/components/__tests__/Typography/Text.test.tsx Resolved

Comment thread src/components/Typography/Text.tsx Resolved

Doberjohn and others added 2 commits August 13, 2026 17:04

Update src/components/__tests__/Typography/Text.test.tsx

cda2eee

Co-authored-by: Mikita Kliushun <nikita.kliushun@gmail.com>

Update src/components/Typography/Text.tsx

8b2cb9d

Co-authored-by: Mikita Kliushun <nikita.kliushun@gmail.com>

perf(text): skip the nesting context when children cannot contain text

adb1f93

MikitasK approved these changes Aug 13, 2026

View reviewed changes

JKobrynski approved these changes Aug 26, 2026

View reviewed changes

satya164 previously requested changes Sep 3, 2026

View reviewed changes

satya164 requested a balanced review from Copilot September 15, 2026 20:33

Copilot AI reviewed Sep 15, 2026

satya164 reviewed Oct 22, 2026

View reviewed changes

Comment thread src/components/Typography/Text.tsx Resolved

Comment thread src/components/Typography/Text.tsx Resolved

Doberjohn added 5 commits November 3, 2026 20:53

Merge remote-tracking branch 'origin/main' into @Doberjohn/nested-tex…

02fd5d0

…t-inheritance

fix(text): respect the theme prop of a nested Text

34bca85

A nested Text or AnimatedText with its own theme renders like a top-level one again, with the theme's color, as it does on main.

fix(text): keep the parent color in a nested Text with a variant

0ad63eb

A nested Text or AnimatedText with a variant now applies only the variant font, so it no longer resets the color to onSurface. A Text with a variant inside a contained Button keeps the button's label color.

docs(text): show the nested Text examples after the custom variant

ae98247

The nested section was inserted above the Custom Variant sample, which made that sample read as one of the nested cases.

Doberjohn mentioned this pull request Nov 3, 2026

Text inside a View inside a Text renders with the default color on iOS and Android #5162

Open

Doberjohn requested review from JKobrynski and MikitasK and removed request for MikitasK and artus9033 November 3, 2026 21:03

JKobrynski approved these changes Nov 4, 2026

View reviewed changes

Comment thread src/components/Typography/Text.tsx Resolved

docs(migration): describe nested Text inheritance

81ae80e

MikitasK approved these changes Nov 4, 2026

View reviewed changes

Doberjohn merged commit 12054e3 into main Nov 4, 2026
13 checks passed

Conversation

Doberjohn commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Related issue

Screenshots / Videos

Before

After

Test plan

Uh oh!

Doberjohn commented Aug 7, 2026

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Doberjohn commented Aug 13, 2026

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

JKobrynski left a comment

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Aug 26, 2026

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

satya164 commented Oct 22, 2026

iOS

Android

Web

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Doberjohn commented Nov 3, 2026

Uh oh!

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Doberjohn commented Aug 7, 2026 •

edited

Loading