React Native's Text Component: Beyond Displaying Words

WHY IT EXISTS The Text component was created to provide a consistent, cross-platform way to display text. It bridges the native UI paradigms (iOS's NSAttributedString, Android's SpannableString) with the familiar component-based model of React, abstracting away the tedious platform-specific formatting.

THE MENTAL MODEL Think of the <Text> component as creating a special "text world" within your UI. Inside this world, the rules of Flexbox no longer apply. Instead, content flows and wraps just like a paragraph in a document. Any text you want to show, from a single word to a long article, must live inside one of these <Text> worlds.

HOW IT WORKS The <Text> component is a fundamental building block. Any string data in your app must be rendered inside it; placing text directly within a <View> will throw an error. To style parts of a sentence, you nest <Text> components. For example, to make one word bold, you wrap that word in its own <Text> component with a fontWeight: 'bold' style, inside the parent <Text>. React Native translates this nested structure into a single, flat, styled string for the underlying native platform.

WHEN TO USE IT Always use <Text> to display any text on the screen. It supports styling, touch handling, and nesting. For consistent styling across an application, a common pattern is to create a custom component, like MyAppText, that wraps the standard <Text> component and applies your app's default font and color.

WHEN NOT TO USE IT Do not use <Text> as a general-purpose container if you need Flexbox layout. If you place two <Text> components inside a <View>, they will behave like block elements that stack vertically. If you place them inside a parent <Text>, they will flow inline. Choose the container (<View> or <Text>) based on the layout behavior you need.

ONE CANONICAL EXAMPLE A common mistake for web developers is assuming styles inherit from a <View>. This will not work: <View style={{color: 'red'}}><Text>This text is NOT red</Text></View>. The correct way to apply styles is either directly on the <Text> component or through nesting: <Text style={{color: 'blue'}}>This text is blue, <Text style={{fontWeight: 'bold'}}>and this part is also bold.</Text></Text>. This strictness ensures components are self-contained and predictable.