Why Text inherits styles but View does not
rationale behind text inheritance.
nested Text inherits text styles because it maps to platform attributed-text rendering, while Views are independent layout boxes with no style cascade.
WHAT THIS TESTS This probes the why, not just the what. It separates candidates who memorized that Text inherits from those who understand the rendering model that makes inheritance natural for text and intentionally absent for layout.
A GOOD ANSWER COVERS Nested Text components inherit text-specific properties such as color, fontSize, fontWeight, fontStyle, and fontFamily from ancestor Text. This exists because Text maps onto each platform's native attributed-text system, iOS NSAttributedString and Android Spannable, where a string is composed of runs that each carry attributes. Wrapping text in nested Text simply applies attributes to spans, and child spans inherit the surrounding attributes unless they override them, mirroring how styled text works natively. Views are different: each View is an independent layout rectangle, and React Native deliberately does not implement a general CSS-like style cascade. There is no inheritance of properties like backgroundColor or padding from a parent View to its children. This design keeps layout explicit, avoids surprising action at a distance, and makes flex layout predictable. The distinction therefore reflects two different rendering domains: attributed text versus boxed layout.
COMMON WRONG ANSWERS Saying React Native has full CSS inheritance like the web. Claiming Views cascade styles to children. Believing the inheritance is a generic feature rather than specific to text attributes; non-text properties on Text do not inherit either.
LIKELY FOLLOW-UPS Which properties do not inherit even between Text? How would you share View styling without inheritance? What native text systems back this behavior?
ONE CONCRETE EXAMPLE A parent Text with color gray and fontSize 16 wraps a sentence and contains an inner Text setting fontWeight bold. The inner Text inherits gray and 16 while overriding weight. By contrast, a parent View with a blue background containing a child View gives the child no background at all, demonstrating the absence of cascade for layout boxes.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.