Welcome to the very first lesson of the core components in React Native course! In this course, you’ll learn how to use React Native’s essential building blocks to create engaging and useful mobile interfaces. We’ll start our journey with a practical example: building a space docking notification card. Notification cards are common features in many mobile apps, providing users with timely information and clear actions. By focusing on this example, you’ll get hands-on experience with the most important React Native components and see how they come together to form a polished, interactive UI.

To build our notification card, we’ll use several core React Native components. The View component is the foundation for layout and grouping other elements. Text displays readable content, while Image lets us show pictures or icons. For interactive elements, we’ll use TouchableOpacity, which allows users to tap on parts of the UI and trigger actions. Finally, SafeAreaView ensures our content is displayed correctly on all devices, respecting notches and screen edges.

Let’s look at a simple example of how these components work together. Here’s a minimal notification card layout:

In this example, View acts as a container for all the elements. The Text components display the title and description, the Image shows a spacecraft icon, and the TouchableOpacity wraps a button label. This structure forms the basis of our notification card.

To ensure your notification card is displayed correctly on all devices—especially those with notches, rounded corners, or special screen areas—you should wrap your top-level component in a SafeAreaView. This component automatically adds padding to keep your content within the safe, visible area of the screen.

When building UI components, arranging content and making it look good on different devices can be challenging. React Native provides Flexbox for flexible layouts and the StyleSheet API for consistent styling. Flexbox helps you align and space elements, while StyleSheet lets you define reusable style rules.

For example, to center the notification card and give it a background color, you might write:

Here, flexDirection: "column" ensures that the child elements are arranged vertically (which is the default, but it's good to be explicit when learning). If you want to arrange elements side by side, you would use flexDirection: "row".

For example, to arrange action buttons horizontally, you can use:

Applying these styles to your View ensures the card is centered and visually distinct. Using Flexbox properties like flexDirection, justifyContent, and alignItems allows you to arrange elements horizontally or vertically, space them evenly, and align them as needed.

Now, let’s put these ideas into practice by building the space docking notification card step by step. We’ll start by creating the card’s background and structure using a styled View. Next, we’ll add a title and description with Text components, followed by an Image to represent the incoming spacecraft. Finally, we’ll add two action buttons — “Accept” and “Decline” — using TouchableOpacity for a custom look and feel.

Here’s a simplified version of the complete card, with the component and styles separated for clarity:

And here are the styles used in the component:

In this lesson, you learned how notification cards play a key role in mobile apps and how to use React Native’s core components — View, Text, Image, TouchableOpacity, and SafeAreaView — to build a practical, styled UI element. We discussed common layout and styling challenges and saw how Flexbox and StyleSheet help solve them, including the use of flexDirection for arranging elements. You also walked through a step-by-step example of building a space docking notification card, which brings together all these concepts.

You’re now ready to apply what you’ve learned in the upcoming practice exercises. These will give you hands-on experience building and styling your own notification card, reinforcing your understanding of React Native’s core components. Let’s get started!