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.

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.

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.

Sometimes, when updating state based on the previous value, it’s best to use a functional state updater. This is especially useful if your state update depends on the current state value, which can help avoid bugs when multiple updates happen quickly.

Instead of writing:

You can use a functional updater:

Here, prevExpanded is always the latest value of the state, so your update will be reliable even if React batches multiple updates together. This pattern is especially important in more complex components or when your state updates might happen in quick succession.

Let’s look at a simple example. Suppose you want to show a message only when a user presses a button:

In this example, the showMessage state determines whether the greeting is displayed. When the button is pressed, setShowMessage(true) updates the state, and the message appears. This is the core idea behind conditional rendering.

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:

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 . The button at the bottom lets the user toggle between showing more or less information, and its label updates accordingly.

When building dynamic UI elements like this, it’s important to keep your code clear and maintainable.

• Use descriptive variable names, like expanded, so it’s obvious what each piece of state controls.
• Use functional state updaters when your new state depends on the previous state.
• Add comments if something isn’t immediately clear.
• Make sure your UI remains user-friendly — buttons should be easy to find and understand, and the card should look good whether it’s expanded or collapsed.

For example, in the code above, the button label changes based on the state, so users always know what will happen if they press it. The styles are organized in a StyleSheet to keep the component tidy and easy to update.

In this lesson, you learned how to use state and conditional rendering to create a dynamic warning card in React Native. You saw how to let users control what information they see, making your app more interactive and user-friendly. These skills are essential for building modern mobile apps that respond to user needs.

Up next, you’ll get hands-on practice by building your own dynamic warning card. You’ll apply what you’ve learned here, reinforcing your understanding of state, event handlers, and conditional rendering. Let’s get started!