rayan1810
commented
7 months ago As per my understanding, this is caused due to the default color applied from the theme to a NativeText internally. Ideally, it should be overridden by the parent text if that has any conflicting style passed in style prop.
The solution I'm proposing is to provide the Text component with its own context that can be read by the child Text component and merged with the default styling from the theme. Here's the PR with the suggested changes, It's still a WIP, hoping for a little review from the maintainers if this is aligned with them or not before completing it.
Current behaviour
When nesting
Textcomponents, 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
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