Text component in React Native

Introduction

The Text component shows words or sentences on the screen. It helps users read information in your app.

To display a title or heading on a screen.

To show instructions or descriptions to users.

To label buttons or input fields.

To display messages or alerts.

To show any static or dynamic text content.

Syntax

React Native

import { Text } from 'react-native';

export default function App() {
  return (
    <Text>Some text here</Text>
  );
}

The Text component must be inside a parent component like View or SafeAreaView.

You can style Text using the style prop to change color, size, and font.

Examples

Shows simple text on the screen.

React Native

<Text>Hello World</Text>

Text with blue color and bigger font size.

React Native

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

Shows dynamic text using JavaScript variables.

React Native

<Text>{`Count: ${count}`}</Text>

Sample App

This app shows two pieces of text centered on the screen. The first is a bold title, and the second is a smaller description.

React Native

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Welcome to My App</Text>
      <Text style={styles.description}>This is a simple text example.</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10
  },
  description: {
    fontSize: 16,
    color: '#333'
  }
});

Important Notes

Always wrap Text components inside a container like View or SafeAreaView for layout control.

Use the style prop to make text readable and visually appealing.

Text components can contain nested Text components for mixed styles.

Summary

The Text component displays readable text in your app.

Use style to change how text looks.

Text can show static or dynamic content.