View and Text

React Native provides two essential building blocks for constructing user interfaces: the View component and the Text component. The View component acts as a container for layout and grouping other components. You use View to arrange, nest, and style sections of your UI, much like a div in web development. The Text component is used for displaying strings of text to the user. It supports nesting, styling, and formatting text content, making it the primary way to show readable information in your app.

To see how View and Text work together, consider a simple card layout. In this example, you wrap your content in a View to create the card container, and use Text elements to display the card title and description. Here is what the code might look like:

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

export default function SimpleCard() {
  return (
    <View style={{ padding: 16, backgroundColor: "#f8f8f8", borderRadius: 8 }}>
      <Text style={{ fontSize: 20, fontWeight: "bold", marginBottom: 8 }}>
        Card Title
      </Text>
      <Text style={{ fontSize: 16, color: "#555" }}>
        This is a simple card layout using View and Text components.
      </Text>
    </View>
  );
}

In this code, the outer View acts as the card container, applying padding, background color, and rounded corners for visual structure. The first Text displays a bold card title, while the second Text shows the card description. By combining View and Text, you can build organized and visually appealing layouts in your React Native app.