Text Components

In React Native, the Text component is used for displaying text. It is one of the most fundamental components and is used extensively to display content to the user. Here’s a detailed explanation of how to use the Text component, including its properties, styling, and some best practices.

Basic Usage

To use the Text component, you simply import it from react-native and include it in your component tree. Here’s a basic example:

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

const MyComponent = () => (
  <View>
    <Text>Hello, world!</Text>
  </View>
);

export default MyComponent;

        

Properties

The Text component has several properties that allow you to customize its appearance and behavior:

Style:An object or array of objects that specify the styles for the text.

            <Text style={{ fontSize: 20, color: 'blue' }}>Styled Text</Text>

        

numberOfLinesLimits the number of lines the text can occupy.

            <Text numberOfLines={1}>This is a very long text that will be truncated.</Text>

        

onPressA function that is called when the text is pressed, making it interactive.

            <Text onPress={() => alert('Text pressed!')}>Pressable Text</Text>

        

ellipsizeModeDetermines how text is truncated when it exceeds the number of lines. Values can be head, middle, tail, or clip.

            <Text numberOfLines={1} ellipsizeMode="tail">This text will end with an ellipsis if it is too long.</Text>

        

selectableAllows the text to be selected and copied.

            <Text selectable>This text can be selected.</Text>
        

adjustsFontSizeToFit

            <Text style={{ fontSize: 100 }} adjustsFontSizeToFit>Adjustable Text</Text>