Text Component

Displaying Text

The Text component is how you display words on screen in React Native. Unlike the web where you can just type text inside a div, React Native requires you to wrap all text in a Text component. This is because React Native needs to know exactly what parts of your UI are text for proper rendering and accessibility.

You can't just put raw text inside a View — it will cause an error. Always wrap your strings in Text components.

Basic Text Usage

Here's how to display text in its simplest form:

import React from 'react';
import { Text, View } from 'react-native';

function Message() {
  return (
    <View>
      <Text>Hello, World!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

export default Message;

Each Text component displays a block of text. If you want text to appear on separate lines, use separate Text components or add newlines inside a single Text. Text components don't automatically wrap like HTML paragraphs — they behave more like inline elements by default.

Styling Text

Text supports many of the same style properties as CSS, adapted for mobile. You can change font size, weight, color, alignment, and much more.

<Text style={{
  fontSize: 24,
  fontWeight: 'bold',
  color: '#333333',
  textAlign: 'center',
  lineHeight: 32,
  letterSpacing: 1,
}}>
  Styled Text
</Text>

Common text styles include fontSize, fontWeight, color, textAlign, lineHeight, and fontFamily. You can also use fontStyle for italics and textDecorationLine for underlines or strikethroughs.

Nesting Text Components

You can nest Text components to style parts of your text differently — like making one word bold in a sentence. This is similar to using <span> tags in HTML.

<Text style={{ fontSize: 18 }}>
  This is a <Text style={{ fontWeight: 'bold' }}>bold word</Text> in a sentence.
</Text>

<Text style={{ fontSize: 18 }}>
  You can also use <Text style={{ color: 'blue' }}>colored</Text> text.
</Text>

This is incredibly useful for creating rich text content. You can mix different styles within a single line of text, create links, highlight keywords, or format dynamic content. Just remember that nested Text components must be direct children — you can't put a View between them.