React Native Text

Summary: in this tutorial, you’ll learn about the React Native Text component and how to use it to display text in your mobile apps.

Introduction to React Native Text component

To display text on your mobile app, you use the Text component. The Text component supports styling, nesting, and touch-handling.

To use the Text component, you follow these steps:

First, import the Text component from the react-native library:

import {Text} from 'react-native';Code language: JavaScript (javascript)

Second, place text inside the Text component:

<Text>Hi there!</Text>Code language: JavaScript (javascript)

Styling Text components

By default, the Text component uses the default style to render text. For example, Text components have a black color, and system font family (e.g., Roboto on Android and SF Pro on iOS).

To apply a custom style to the Text component, you use the style property. The Text component supports various styles including font size, color, alignment, etc.

For example, the following set the font size of the text to 16 and align it center:

<Text style={{ fontSize: 16, textAlign: center }}>Hi there!</Text>Code language: JavaScript (javascript)

To separate the style from the component, you can use the StyleSheet. In the following example, we create a StyleSheet object with the text style and use it in the Text component:

<Text style={styles.text}>Hi there!</Text>

// ...
const styles = StyleSheet.create({
    text: {
       fontSize: 16,
       textAlign: center
    }
});Code language: JavaScript (javascript)

Here’s the complete example:

import { Text, StyleSheet, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>Hi, there!</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        fontSize: 16,
        textAlign: 'center',
    },
});

export default App;Code language: JavaScript (javascript)

Nesting Text components

Text components can be nested within each other as follows:

<Text>
   <Text>Learn from the best </Text>
   <Text>React Native Tutorial.</>
</Text>Code language: JavaScript (javascript)

React Native will render the text as it is from a single text component:

Learn from the best React Native Tutorial.Code language: JavaScript (javascript)

This can be useful when you want to apply different styles to different parts of the text.

For example, you can make the React Native Tutorial bold as follows:

<Text>
    <Text>Learn from the best </Text>
    <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

Additionally, the nested text component will automatically inherit the style of the parent text components. For example, you can set the font size for the parent Text component to 40, the font size of the nested Text component will be also set to 40:

<Text style={{ fontSize: 40 }}>
   <Text>Learn from the best </Text>
   <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

Here’s the complete component:

import { Text, StyleSheet, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={{ fontSize: 40 }}>
               <Text>Learn from the best </Text>
               <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
            </Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

export default App;Code language: JavaScript (javascript)

Output:

Adding touch events

When you press the Text component, it can react to the press event. The following example shows how to style a text component as a button and handle the press event:

import { Text, StyleSheet, SafeAreaView, Alert } from 'react-native';

const App = () => {
    const handlePress = () => Alert.alert('Text Pressed!');
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.button} onPress={handlePress}> Click me</Text>
        </SafeAreaView >
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    button: {
        fontSize: 18,
        textAlign: 'center',
        padding: 10,
        borderRadius: 99,
        fontWeight: 'bold',
        color: '#fff',
        backgroundColor: 'black',
    }
});

export default App ;Code language: JavaScript (javascript)

Output:

Text components can have custom fonts. However, you need to load the custom font to your app before applying it to the Text components.

Summary

• Use the React Native Text component to display text on your mobile app.