Text

<Text>Hello, World!</Text>

<Text>This is a longer text that demonstrates how the Text component handles multiple lines of content. It will wrap naturally based on the container width.</Text>

<Text lineLimit={2}>This is a very long text that will be truncated after the specified number of lines. The lineLimit prop controls how many lines are shown before truncation occurs.</Text>

<Text lineLimit={1}>This text will be truncated to a single line with an ellipsis if it exceeds the container width.</Text>

<Text style={{
      fontSize: '24px',
      fontWeight: 'bold',
      color: '#007AFF'
    }}>Text with custom style</Text>

<VStack spacing={10}>
      <Text>First line</Text>
      <Text>Second line</Text>
      <Text>Third line</Text>
    </VStack>

<HStack spacing={10}>
      <Text>Left</Text>
      <Text>Center</Text>
      <Text>Right</Text>
    </HStack>

Overview

Text is a view that displays one or more lines of read-only text. Use Text to display a string in your app's user interface. The Text view draws a string in a given font, with support for multiple lines, text truncation, and wrapping.

SwiftUI Correspondence: Similar to SwiftUI's Text.

Long Text

Text automatically wraps to multiple lines when needed:

Line Limit

Control the maximum number of lines displayed using the lineLimit prop:

Custom Styling

Apply custom styles to text:

Notes

• Text automatically wraps when it exceeds the container width
• Use lineLimit to control text truncation
• Text supports all standard CSS text styling properties
• Text can contain other React components as children

Best Practices

1. Readability: Ensure sufficient contrast between text and background colors
2. Line limits: Use lineLimit appropriately to prevent layout issues with long text
3. Responsive: Text automatically adapts to container width
4. Accessibility: Use semantic HTML and proper heading hierarchy
5. Performance: Avoid excessive nested text components for better performance