Text Component in React Native

Text is a built-in React Native component used to display text content on the screen.

import { Text } from "react-native";

It can display simple text as well as styled and nested text.

The Text component is imported from the react-native package.

import { Text } from "react-native";

You can import Text together with other React Native components.

import {
    View,
    Text
} from "react-native";

<Text>
    Hello React Native
</Text>

The text is written between the opening and closing Text tags.

Text is commonly placed inside a View.

import {
    View,
    Text
} from "react-native";

export default function App() {

    return (
        <View>

            <Text>
                Welcome to React Native
            </Text>

        </View>
    );
}

React Native does not require separate HTML-style heading tags. You can create headings by styling the Text component.

<Text style={{
    fontSize: 28,
    fontWeight: "bold"
}}>
    Student Dashboard
</Text>

The style prop is used to change the appearance of text.

<Text style={styles.title}>
    Hello Student
</Text>

const styles = StyleSheet.create({

    title: {
        fontSize: 24,
        fontWeight: "bold"
    }

});

The fontSize property controls the size of text.

const styles = StyleSheet.create({

    text: {
        fontSize: 20
    }

});

<Text style={styles.text}>
    React Native
</Text>

The fontWeight property controls the thickness of text.

const styles = StyleSheet.create({

    title: {
        fontWeight: "bold"
    }

});

Common values include normal and bold.

The color property changes the text color.

const styles = StyleSheet.create({

    title: {
        color: "blue",
        fontSize: 24
    }

});

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

The textAlign property controls horizontal text alignment.

const styles = StyleSheet.create({

    title: {
        textAlign: "center"
    }

});

Common values include left, center and right.

The textDecorationLine property can add decoration to text.

const styles = StyleSheet.create({

    text: {
        textDecorationLine: "underline"
    }

});

This can be useful for links and emphasized content.

The letterSpacing property controls the spacing between characters.

const styles = StyleSheet.create({

    title: {
        letterSpacing: 2
    }

});

The lineHeight property controls the height of each line of text.

const styles = StyleSheet.create({

    paragraph: {
        fontSize: 16,
        lineHeight: 26
    }

});

It is useful for improving readability in longer text.

The textTransform property can change the presentation of text.

const styles = StyleSheet.create({

    title: {
        textTransform: "uppercase"
    }

});

Possible values include uppercase, lowercase and capitalize.

A screen can contain multiple Text components.

<View>

    <Text>Student Name</Text>

    <Text>Rahul Kumar</Text>

    <Text>Course: React Native</Text>

</View>

Each Text component can have its own style.

Text components can be nested inside other Text components. This is useful when different parts of a sentence need different styles.

<Text>
    Hello
    <Text style={{
        fontWeight: "bold"
    }}>
        Rahul
    </Text>
</Text>

Nested Text allows different parts of the same sentence to use different styles.

<Text>

    Welcome to
    <Text style={{
        fontWeight: "bold"
    }}>
        React Native
    </Text>

</Text>

This technique is useful for highlighted words and labels.

JavaScript variables can be displayed inside Text using curly braces.

const name = "Rahul";

return (
    <Text>
        Hello {name}
    </Text>
);

The output will display Hello Rahul.

JavaScript expressions can also be used inside Text.

const marks = 80;

return (
    <Text>
        Marks: {marks}
    </Text>
);

Expressions inside curly braces are evaluated by JavaScript.

A component can receive text through props.

function Student(props) {

    return (
        <Text>
            Student: {props.name}
        </Text>
    );

}

<Student name="Rahul" />

Text can display values stored in React state.

import {
    useState
} from "react";

const [name, setName] = useState("Rahul");

return (
    <Text>
        {name}
    </Text>
);

Whenever the state changes, React can update the displayed value.

Text is frequently used inside card-style Views.

<View style={styles.card}>

    <Text style={styles.title}>
        Student Details
    </Text>

    <Text>
        Name: Rahul
    </Text>

    <Text>
        Course: React Native
    </Text>

</View>

Text is commonly placed inside interactive components such as Pressable.

import {
    Pressable,
    Text
} from "react-native";

<Pressable
    onPress={() => alert("Button Pressed")}
>

    <Text>
        Submit
    </Text>

</Pressable>

Text can be used to display validation or error messages.

const styles = StyleSheet.create({

    error: {
        color: "red",
        fontSize: 14
    }

});

<Text style={styles.error}>
    Please enter your name.
</Text>

Text can contain longer content such as descriptions and instructions.

<Text style={styles.description}>

    React Native allows developers
    to create mobile applications
    using React and JavaScript.

</Text>

For long content, components such as ScrollView can be used when the surrounding screen needs scrolling.

The numberOfLines prop can limit the number of visible lines.

<Text numberOfLines={2}>

    React Native is used to build
    mobile applications for different
    platforms.

</Text>

This can be useful when displaying previews or limited descriptions.

import {
    View,
    Text,
    StyleSheet
} from "react-native";

export default function App() {

    return (
        <View style={styles.container}>

            <Text style={styles.title}>
                Student Dashboard
            </Text>

            <Text style={styles.name}>
                Rahul Kumar
            </Text>

            <Text style={styles.course}>
                Course: React Native
            </Text>

            <Text style={styles.description}>
                Welcome to the mobile app
                development course.
            </Text>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20,
        justifyContent: "center"
    },

    title: {
        fontSize: 28,
        fontWeight: "bold",
        textAlign: "center"
    },

    name: {
        marginTop: 20,
        fontSize: 22,
        fontWeight: "bold"
    },

    course: {
        marginTop: 10,
        fontSize: 18
    },

    description: {
        marginTop: 15,
        fontSize: 16,
        lineHeight: 24
    }

});

React Native uses the Text component for displaying text instead of HTML elements.

• Use Text for displaying text content.
• Use StyleSheet for reusable text styles.
• Create meaningful styles such as title, subtitle and description.
• Use readable font sizes.
• Use appropriate line height for paragraphs.
• Use nested Text when only part of a sentence needs different styling.
• Use numberOfLines when a text preview needs a fixed number of lines.
• Keep text components simple and reusable.

Text
 ↓
Display Content
 ↓
Apply Style
 ↓
Use Variables
 ↓
Use Props
 ↓
Use State
 ↓
Nested Text
 ↓
Interactive Content
 ↓
Complete Mobile Screen

The Text component is fundamental for creating readable mobile interfaces. You will use it throughout your React Native applications for headings, labels, descriptions, messages, buttons and dynamic data.