Space Docking Notification Card

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:

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

const Notification = () => {
  return (
    <View>
      <Text>Docking Request</Text>
      <Text>A new spacecraft is requesting to dock.</Text>
      <Image source={{ uri: "https://example.com/spacecraft.png" }} style={{ width: 32, height: 32 }} />
      <TouchableOpacity>
        <Text>Accept</Text>
      </TouchableOpacity>
    </View>
  );
};

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.

Here’s a simple example of how you can use SafeAreaView to render the notification card safely:

import React from "react";
import { View, Text, SafeAreaView } from "react-native";
import { useKeepAwake } from 'expo-keep-awake';
import Notification from './Notification';

const App = () => {
  useKeepAwake();

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Notification />
    </SafeAreaView>
  );
};

export default App;

By wrapping your content in SafeAreaView, you make sure the notification card won’t be hidden or cut off by device-specific screen features. This is a best practice for building mobile UIs that look great on all devices.

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:

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#101523",
    borderRadius: 10,
    padding: 18,
    flexDirection: "column", // Explicitly set flexDirection for clarity
  },
});

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:

actions: {
  flexDirection: "row",            // Arrange buttons side by side
  justifyContent: "space-between", // Space out the buttons
  width: "100%",                   // Take full width of the card
},

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:

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

const Notification = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Docking Request</Text>
      <Text style={styles.description}>A new spacecraft is requesting to dock.</Text>
      <Image source={{ uri: "https://codesignal-staging-assets.s3.amazonaws.com/uploads/1741022537531/headonly-default.png" }} style={styles.image} />
      <View style={styles.actions}>
        <TouchableOpacity>
          <Text style={styles.accept}>Accept</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={styles.decline}>Decline</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

And here are the styles used in the component:

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#101523",      // Dark background for the card
    borderRadius: 10,                // Rounded corners
    padding: 18,                     // Space inside the card
    alignItems: "center",            // Center items horizontally
    width: "80%",                    // Card width relative to the screen
    flexDirection: "column",         // Arrange children vertically (explicit)
  },
  title: {
    fontSize: 14,                    // Slightly larger text for the title
    fontWeight: "bold",              // Bold for emphasis
    color: "#fff",                   // White text
    marginBottom: 5,                 // Space below the title
  },
  description: {
    fontSize: 12,                    // Smaller text for the description
    color: "#aaa",                   // Light gray color
    marginBottom: 10,                // Space below the description
  },
  image: {
    width: 32,                       // Image width
    height: 32,                      // Image height
    marginBottom: 10,                // Space below the image
  },
  actions: {
    flexDirection: "row",            // Arrange buttons side by side
    justifyContent: "space-between", // Space out the buttons
    width: "100%",                   // Take full width of the card
  },
  accept: {
    color: "#1062fb",                // Blue color for "Accept"
    fontWeight: "bold",              // Bold text
    marginRight: 20,                 // Space to the right of the button
  },
  decline: {
    color: "#e6193f",                // Red color for "Decline"
    fontWeight: "bold",              // Bold text
  },
});

What the styles do:

• container: Sets the card’s background color, rounded corners, padding, centers its content, and arranges children vertically using flexDirection: "column".
• title: Styles the card’s title with larger, bold, white text and spacing below.
• description: Styles the description with smaller, light gray text and spacing below.
• image: Sets the size of the spacecraft image and spacing below it.
• actions: Arranges the action buttons in a row using flexDirection: "row", spaces them apart, and stretches them across the card’s width.
• accept and decline: Give each button a distinct color (blue for accept, red for decline), bold text, and spacing between them.

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!