callstack / callstack/react-native-paper

Nested Text components do not inherit style

Open
#4,351 1 comment 2 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
When nesting `Text` components, the child component does not inherit the style of the parent element.

### Expected behaviour
I would expect the styles to be inherited and overridden by the child component instead of simply overridden. The Text component from react-native exhibits this behavior.

### How to reproduce?
Nest a Text component inside another Text component and apply styles to both (e.g., color on one and fontWeight on the other). Note the nested component ignores the styles set on the parent component.

https://snack.expo.dev/lfm3PI-XWFR_YP56qwbn7

### Preview
![image](https://github.com/callstack/react-native-paper/assets/29152776/bc1d88c0-69de-4651-9014-112f03ef1f9a)

### What have you tried so far?
Replacing the nested Text element with the react-native version (instead of RNP) fixes the inheritance, but you lose the default styles from RNP that you may wish to preserve (e.g., if the nested Text is a different variant from the parent, you need to manually apply all of the variant styles to the nested element).

### Your Environment

| software | version
| --------------------- | -------
| ios | 17.2
| android | 30
| react-native | 0.73.2
| react-native-paper | 4.9.2
| node | 18.17.1
| yarn | 1.22.19
| expo sdk | 50.0.0

Contributor guide

Open the contributing guide

Research direction

Start with the linked Expo Snack and the Text component implementation; reproduce nested Text components with parent and child styles such as color and fontWeight. Compare the behavior with React Native's Text component. Done means child Text preserves inheritable parent styles while allowing its own styles and variants to override them.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.