Asteroid Field Warning

Introduction: Dynamic Warnings in Mobile Apps

Welcome to the third lesson of the "Introduction to Props and Event Handlers in React Native" course! So far, you’ve learned how to pass data between components using props and how to manage state and handle user interactions with event handlers. In this lesson, we’ll build on those skills by exploring how to create dynamic warning cards — UI elements that can show more or less information based on user actions. This is a common pattern in mobile apps, where users often need to expand or collapse details in notifications, alerts, or info panels. By the end of this lesson, you’ll be able to use state and conditional rendering to make your app’s interface more interactive and user-friendly.

The Challenge: Showing More or Less Information

Imagine you’re building a space adventure app, and you want to alert users when their ship is approaching an asteroid field. Sometimes, a brief warning is enough, but other times, users may want to see more details — like the number of asteroids, their size, and recommended actions. The challenge is to design a warning card that can expand to show more information or collapse to keep things simple, all based on what the user wants to see. This pattern — expandable and collapsible cards — is everywhere in real-world apps. Think of notification banners that can be tapped to reveal more, or info panels that hide advanced details until you need them. In this lesson, you’ll learn how to implement this pattern in React Native using state and conditional rendering .

Key Concepts for This Lesson

Before we dive into the code, let’s review and introduce the key concepts you’ll use. You’ve already seen how to use the useState hook to track values that change over time, such as a click count. Here, we’ll use useState to keep track of whether the warning card is expanded or collapsed. Conditional rendering is another essential concept. In React Native, you can decide what to show in your UI based on the current state . For example, you might display extra details only if a certain variable is true . We’ll also use event handlers — functions that run when the user presses a button — to let users control what they see.

Functional State Updaters

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Step-by-Step Example: Building the Asteroid Warning Card

Now, let’s put these concepts into practice by building the asteroid field warning card. We’ll start by creating a card that always shows a brief warning. Then, we’ll add a button that lets the user expand or collapse the card to show more or less information.

Here’s the core code for the warning card, using a functional state updater for toggling:

TypeScript

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

const AsteroidWarning = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    setExpanded(prevExpanded => !prevExpanded);
  };

  return (
    <View style={styles.card}>
      <View style={styles.warningHeader}>
        <View style={styles.alertIcon}>
          <Text style={styles.alertIconText}>!</Text>
        </View>
        <Text style={styles.title}>ASTEROID FIELD WARNING</Text>
      </View>
      <Text style={styles.mainText}>
        Multiple asteroids detected ahead. Current shields at 85% capacity.
      </Text>
      {expanded && (
        <View style={styles.detailsContainer}>
          <Text style={styles.detailsText}>
            • Estimated asteroid count: 237{'\n'}
            • Size range: 1m - 25m diameter{'\n'}
            • Closest approach: 0.8km{'\n'}
            • Recommended action: Reduce speed to 50% and engage evasive pattern Delta{'\n'}
            • Alternative route available via Sector 7-G
          </Text>
        </View>
      )}
      <TouchableOpacity onPress={toggleExpand} style={styles.button}>
        <Text style={styles.buttonText}>
          {expanded ? "Show Less" : "Show More"}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

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

const AsteroidWarning = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    setExpanded(prevExpanded => !prevExpanded);
  };

  return (
    <View style={styles.card}>
      <View style={styles.warningHeader}>
        <View style={styles.alertIcon}>
          <Text style={styles.alertIconText}>!</Text>
        </View>
        <Text style={styles.title}>ASTEROID FIELD WARNING</Text>
      </View>
      <Text style={styles.mainText}>
        Multiple asteroids detected ahead. Current shields at 85% capacity.
      </Text>
      {expanded && (
        <View style={styles.detailsContainer}>
          <Text style={styles.detailsText}>
            • Estimated asteroid count: 237{'\n'}
            • Size range: 1m - 25m diameter{'\n'}
            • Closest approach: 0.8km{'\n'}
            • Recommended action: Reduce speed to 50% and engage evasive pattern Delta{'\n'}
            • Alternative route available via Sector 7-G
          </Text>
        </View>
      )}
      <TouchableOpacity onPress={toggleExpand} style={styles.button}>
        <Text style={styles.buttonText}>
          {expanded ? "Show Less" : "Show More"}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

Let’s break down what’s happening here. We use the useState hook to create an expanded variable, which starts as false. The toggleExpand function flips the value of expanded whenever the user presses the button, using a functional state updater for reliability. The main warning message is always visible, but the detailed information is shown only if expanded is true. The button at the bottom lets the user toggle between showing more or less information, and its label updates accordingly.

This approach keeps your UI flexible and responsive to user actions, making it easy to add or hide details as needed.