tezvyn:

View vs Text and nesting rules

AI-drafted, machine-checkedSource: interviewbeginner
WHAT IT TESTS

layout vs text primitives.

OUTLINE

View is a flexbox layout container; Text renders and lays out text with inheritance. Text nests inside Text and inherits style; View inside Text is constrained and discouraged.

WHAT THIS TESTS It verifies you understand the difference between a layout container and a text primitive, plus the nesting rules that trip up newcomers coming from web HTML.

A GOOD ANSWER COVERS View is the fundamental building block for UI layout. It maps to a platform container view, participates in flexbox, supports styling like padding, borders, and background, and contains other components, but it cannot directly hold a raw text string. Text is the component for displaying strings. It follows text layout semantics rather than pure flexbox, handles wrapping and truncation, and crucially supports style inheritance among nested Text. Nesting a Text inside another Text is supported and common: the inner Text inherits properties such as color and fontSize from the parent and can override them, which is how you style a word differently within a sentence. Nesting a View inside a Text is special and limited; React Native supports certain inline content but arbitrary layout Views inside Text are discouraged and behave inconsistently, so you should generally avoid it.

COMMON WRONG ANSWERS Believing you can write text directly inside a View; raw strings must be wrapped in Text. Treating Text as a flexbox container for arbitrary children. Assuming View inside Text behaves like any normal nesting.

LIKELY FOLLOW-UPS Why does style inheritance work for Text but not for View? How do you style one word in a sentence? What happens if you put a stray string inside a View?

ONE CONCRETE EXAMPLE To bold one word you write a parent Text containing plain text and a nested Text with fontWeight bold, like Text wrapping the phrase with an inner Text around the emphasized word. The inner Text inherits the parent's font size and color, overriding only weight, producing inline emphasis without breaking text flow.

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.