Text: what it is, text display and React Native

What is Text in React Native

Text is a React Native component for displaying text content. Unlike web development, where there are many semantic tags for text, in React Native all text elements are created through Text. The component can display both simple text and complex structures with nested Text and styled fragments.

Text automatically handles line wrapping, manages font family, size, color, and alignment. The component supports touch events (onPress), allowing clickable links without additional wrappers. An important limitation: Text cannot be nested directly inside View — only inside other Text components or as direct children.

According to React Native Nested Text, 2024, nested Text components inherit styles from the parent. This allows setting a base style at the top level and overriding individual properties for specific fragments — similar to how span works with CSS on the web.

Properties and API of the Text Component

The Text component provides a set of props for controlling display, behavior, and accessibility. Key categories: style props (font, size, color, alignment), display props (numberOfLines, lineBreakMode), and interactive props (onPress, onLongPress).

Text Display Props

numberOfLines limits the number of displayed lines, adding an ellipsis at the end. ellipsizeMode controls the ellipsis position (head, middle, tail, clip). adjustsFontSizeToFit automatically reduces font size to fit text within given bounds. lineBreakMode determines how text is truncated beyond numberOfLines.

Interactive Props

Text supports onPress and onLongPress for handling touches. This allows creating text links without using TouchableOpacity. onTextLayout returns information about text layout after rendering — useful for animations and positioning.

Platform-Specific Props

On iOS, disabled (disables text), selectable (enables selection), and dataDetectorTypes (automatic detection of links, phones, addresses) are available. On Android, selectable (via textSelectable) and includeFontPadding (removes extra padding) are available.

Differences Between Text and HTML p and span Elements

Although Text visually resembles the HTML tags p and span, the architectural differences are significant. React Native lacks a DOM model with semantic text elements — all text nodes are handled through a single Text component with various props.

The key difference is style inheritance through Text nesting. If an outer Text has fontSize: 18 and color: blue, all nested Text components inherit these styles. Any prop can be overridden in the inner Text by setting a specific value. This saves code and keeps the structure cleaner.

Text Styling and Fonts

Text supports most CSS properties for typography: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. In React Native, fonts are connected at the platform level, not via @font-face.

Using Custom Fonts

To use custom fonts, they must be added to the assets/fonts folder and specified in react-native.config.js. After rebuilding the application, the font becomes available via fontFamily. React Native does not support web fonts (Google Fonts) directly — you need to download .ttf or .otf files.

Style Inheritance and Cascade

The inheritance mechanism in Text differs from CSS. Styles are passed only from Text to nested Text, but not from View to Text. To set a font for the entire application, use defaultProps of the Text component or a custom wrapper component.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

In this example, the outer Text sets fontSize: 18 and color: #333. The inner Text inherits fontSize (18), but overrides fontWeight to bold and color to #007AFF. The outer Text only inherits its own styles. This is an exact analogy of how nested span works in HTML.

Practical Examples with Text

Let's look at two typical use cases for Text in React Native: formatting text with nesting and creating a clickable component with line limits.

Example 1: news card with formatting

In this example, Text is used to display multiline text with highlighted elements: title, date, and content with a link.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

This structure has three independent Text components (title, date, content), each with its own style. Inside the content Text, another Text with onPress is nested for the link. This pattern is used for news feeds, blogs, and comments.

Example 2: text with line limits

For displaying text previews with an ellipsis, numberOfLines is used. This is a standard pattern for product cards and article lists.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

The numberOfLines = 2 property limits the text to two lines. If the text is longer, React Native automatically adds an ellipsis at the end of the second line. The ellipsizeMode: 'tail' parameter specifies that the ellipsis should be at the end (head, middle, and clip are also available).