Text Component in React Native

The Text component in React Native is used to display textual content inside mobile applications. It supports both static and dynamic text with styling options for creating rich user interfaces.

• Displays text such as labels, headings, and paragraphs.
• Supports dynamic data rendering.
• Allows styling like color, size, and alignment.
• Works similar to HTML text elements.

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

export default function App() {
  return (
    <View style={{ marginTop: 40 }}>
      <Text style={{ fontSize: 20, color: "blue" }}>
        Hello Geeks
      </Text>
    </View>
  );
}

• Text component displays the message "Hello Geeks" on the screen.
• Style properties change the text color and font size.

Syntax:

<Text>
  Sample Text 
</Text>

Props for Text Component

Text props control how text is displayed, styled, and interacted with in a React Native application.

• style: Applies styles like color, font size, and alignment.
• numberOfLines: Limits how many lines of text are shown.
• ellipsizeMode: Controls how overflow text is trimmed (head, middle, tail, clip).
• onPress: Executes a function when the text is tapped.
• selectable: Allows the user to select and copy the text.
• allowFontScaling: Enables or disables font scaling based on device settings.
• adjustsFontSizeToFit: Automatically adjusts text size to fit inside the container.
• minimumFontScale: Sets the smallest font size allowed when auto-scaling.
• suppressHighlighting: Prevents text from highlighting when pressed.
• textBreakStrategy: Controls how words break across lines (Android).

Styling the Text Component

The Text component provides several styling properties that control how text looks and appears in a React Native app. These properties help customize size, color, alignment, and spacing.

• fontSize: Sets the size of the text.
• fontWeight: Defines the thickness of the text (bold, normal, etc.).
• color: Changes the text color.
• textAlign: Aligns the text horizontally.
• lineHeight: Controls the vertical spacing between lines.

Implementing Text Component

It involves using it in JSX to display and style textual content in a React Native application.

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init myapp

Step 3: Now go into your project folder i.e. myapp

cd myapp

Project Structure:

Step 4: Now let's implement the Text in App.js file. Here's an example of how you can use the 'Text' component in a React Native application:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native!</Text>
      <Text style={styles.subtitle}>Build amazing mobile apps with ease.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
  },
});

export default App;

Output: