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

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

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 · 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.

satya164 · 2026-09-03T10:24:17Z

+  // Anything longer is assumed to contain an element, since an array is an
+  // object itself.
+  return typeof children === 'object';


this doesn't make much sense. what makes children longer than 3 different?

satya164 · 2026-09-03T10:30:40Z

+  expect(screen.getByTestId('child-text')).not.toHaveStyle({
+    color: LightTheme.colors.onSurface,
+  });


shouldn't this inherit parent colors?

satya164 · 2026-09-03T10:33:05Z

+it('text outside of another text still gets the default font', async () => {
+  await render(<Text testID="lone-text">{content}</Text>);
+  const { fontFamily, fontWeight } = LightTheme.fonts.default;
+
+  expect(screen.getByTestId('lone-text')).toHaveStyle({
+    fontFamily,
+    fontWeight,
+  });
+});


doesn't this duplicate "renders v3 Text component without variant..."?

satya164 · 2026-09-03T10:33:54Z

+it('nested text keeps applying its own style while inheriting the rest', async () => {
+  await render(
+    <Text variant="displayLarge">
+      Parent{' '}
+      <Text testID="child-text" style={{ fontStyle: 'italic' }}>
+        child
+      </Text>
+    </Text>
+  );
+
+  expect(screen.getByTestId('child-text')).toHaveStyle({
+    fontStyle: 'italic',
+  });
+});


this doesn't assert what everything the title says. it should just be consolidated into the above test

satya164 · 2026-09-03T10:34:31Z

+it('text nested in animated text inherits instead of resetting', async () => {
+  await render(
+    <AnimatedText variant="displayLarge">
+      Parent <Text testID="child-text">child</Text>
+    </AnimatedText>
+  );
+  const { fontFamily, fontWeight } = LightTheme.fonts.default;
+
+  expect(screen.getByTestId('child-text')).not.toHaveStyle({ fontFamily });
+  expect(screen.getByTestId('child-text')).not.toHaveStyle({ fontWeight });
+});
+
+it('animated text nested in text inherits instead of resetting', async () => {
+  await render(
+    <Text variant="displayLarge">
+      Parent <AnimatedText testID="child-animated">child</AnimatedText>
+    </Text>
+  );
+  // `AnimatedText` falls back to `bodyMedium` rather than the default font.
+  const { fontFamily, fontSize } = LightTheme.fonts.bodyMedium;
+
+  expect(screen.getByTestId('child-animated')).not.toHaveStyle({ fontFamily });
+  expect(screen.getByTestId('child-animated')).not.toHaveStyle({ fontSize });
+});
+
+it('animated text outside of any text still gets its fallback font', async () => {
+  await render(<AnimatedText testID="lone-animated">{content}</AnimatedText>);
+  const { fontFamily, fontSize } = LightTheme.fonts.bodyMedium;
+
+  expect(screen.getByTestId('lone-animated')).toHaveStyle({
+    fontFamily,
+    fontSize,
+  });
+});


not sure we need separate tests for animated text.

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)

satya164 · 2026-10-22T20:20:10Z

    }

-    return (
+    element = (


A nested Text with a variant still sets color: theme.colors.onSurface (and writingDirection and textAlign) on line 155, so it drops the color of the enclosing text. #4351 covers this case too: the child sets its own variant and should still inherit the rest.

For example, <Button mode="contained"><Text variant="labelLarge">Save</Text></Button> renders the label in onSurface on the primary container. In dark theme the label is almost invisible (the "Var" button):

When isNested is true, apply only the variant font:

style={ isNested ? textStyle : [ styles.text, { writingDirection, color: theme.colors.onSurface }, textStyle, ] }

This keeps the style array of a top-level Text the same, so the snapshots do not change. AnimatedText has the same variant branch and needs the same change. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T20:20:10Z

        {...rest}
      />
    );
+  } else if (isNested) {


This branch also ignores the theme prop. On main, <Text variant="headlineSmall">Parent <Text theme={{ colors: { onSurface: "green" } }}>child</Text></Text> renders the child green. With this change it renders in the parent color (case D in the screenshot comment). themeOverrides in AnimatedText has the same problem. Skip the defaults only when no theme override is passed:

Suggested change

} else if (isNested) {

} else if (isNested && !initialTheme) {

(via Claude, verify if it makes sense)

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

Comment thread src/components/Typography/Text.tsx

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 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

	} else if (isNested) {
	} else if (isNested && !initialTheme) {

Conversation

Doberjohn commented Aug 7, 2026

Motivation

Related issue

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!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

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!

satya164 Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

satya164 Oct 22, 2026 •

edited

Loading