← Back to Chapters

React Native Text Component

? React Native Text Component

? Quick Overview

The Text component in React Native is used to display text on the screen. It supports styling, nesting, touch handling, and accessibility features, making it the foundation for showing readable content in mobile applications.

? Key Concepts

  • All text must be wrapped inside a <Text> component
  • Supports nesting of multiple Text elements
  • Styling is done using JavaScript objects
  • Text is responsive across Android and iOS

? Syntax / Theory

The Text component behaves differently than HTML text. It does not allow raw strings outside Text and supports inline nesting for mixed styles.

? View Code Example 
// Basic Text component syntax
import { Text } from 'react-native';

<Text>Hello World</Text>

? Code Example(s)

? View Code Example 
// Styled text with custom font size and color
import { Text, StyleSheet } from 'react-native';

<Text style={styles.title}>Welcome to React Native</Text>

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    color: 'blue'
  }
});

? Live Output / Explanation

Output

The text appears in blue color with a larger font size, styled using the StyleSheet API.

? Interactive Example

Explore React Native Text Props by toggling options below. This simulates how props change the UI and code.

React Native Text supports nesting, styling, and touch handling. This is a longer paragraph designed to demonstrate how text truncation works when you restrict the number of lines.

<Text style={{}}>
  React Native Text supports...
</Text>

? Use Cases

  • Displaying headings and labels
  • Showing dynamic content from APIs
  • Inline styled text for emphasis
  • Touchable text links

✅ Tips & Best Practices

  • Always wrap text inside the Text component
  • Use StyleSheet for better performance
  • Avoid deeply nested Text components
  • Use numberOfLines to prevent overflow

? Try It Yourself

  • Create a Text component with italic style
  • Change text color based on state
  • Limit text to two lines
  • Nest bold text inside normal text