Displaying Modal Screens

The goal of this chapter is to show you how to present information to the user in ways that don’t disrupt the current page. Pages use a View component and render it directly on the screen. There are times, however, when there’s important information that the user needs to see but you don’t necessarily want to kick them off the current page.

You’ll start by learning how to display important information. By knowing what information is important and when to use it, you’ll learn how to get user acknowledgment: both for error and success scenarios. Then, you’ll implement passive notifications that show the user that something has happened. Finally, you’ll implement modal views that show that something is happening in the background.

The following topics will be covered in this chapter:

• Terminology definitions
• Getting user confirmation
• Passive notifications
• Activity modals
...

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter25.

Terminology definitions

Before you dive into implementing alerts, notifications, and confirmations, let’s take a few minutes and think about what each of these items means. I think this is important because if you end up passively notifying the user about an error, it can easily get missed. Here are my definitions of the types of information that you’ll want to display:

• Alert: Something important just happened, and you need to ensure that the user sees what’s going on. Possibly, the user needs to acknowledge the alert.
• Confirmation: This is part of an alert. For example, if the user has just performed an action and then wants to make sure that it was successful before carrying on, they would have to confirm that they’ve seen the information in order to close the modal. A confirmation can also exist within an alert, warning the user about an action that they’re about to perform.
• Notification: Something happened but it’...

Getting user confirmation

In this section, you’ll learn how to show modal views in order to get confirmation from the user. First, you’ll learn how to implement a successful scenario, where an action generates a successful outcome that you want the user to be aware of. Then, you’ll learn how to implement an error scenario where something went wrong and you don’t want the user to move forward without acknowledging the issue.

Displaying a success confirmation

Let’s start by implementing a modal view that’s displayed as a result of the user successfully performing an action. Here’s the Modal component, which is used to show the user a confirmation modal:

type Props = ModalProps & {
  onPressConfirm: () => void;
  onPressCancel: () => void;
};
export default function ConfirmationModal({
  onPressConfirm,
  onPressCancel,
  ...modalProps
}: Props) {
  return (
    <Modal transparent onRequestClose={() => {}} ...

Error confirmation

All of the principles you learned about in the Displaying a success confirmation section are applicable when you need the user to acknowledge an error. If you need more control of the display, use a modal. For example, you might want the modal to be red and scary-looking, like this:

Figure 25.4: The error confirmation modal

Here are the styles that were used to create this look. Maybe you want something a bit more subtle, but the point is that you can make this look however you want:

  modalInner: {
    backgroundColor: "azure",
    padding: 20,
    borderWidth: 1,
    borderColor: "lightsteelblue",
    borderRadius: 2,
    alignItems: "center",
  },

In the modalInner style property, we’ve defined screen styles. Next, we’ll define modal styles:

  modalInnerError: {
    backgroundColor: "lightcoral",
    borderColor: "darkred",
  },
  modalText: {
    fontSize: 16,
    margin...

Passive notifications

The notifications you’ve examined so far in this chapter all have required input from the user. This is by design because it’s important information that you’re forcing the user to look at. However, you don’t want to overdo this. For notifications that are important but not life-altering if ignored, you can use passive notifications. These are displayed in a less obtrusive way than modals and don’t require any user action to dismiss them.

In this section, you’ll create an app that uses the Toast API provided by the react-native-root-toast library. It’s called the Toast API because the information that’s displayed looks like a piece of toast popping up. Toasts is a common component in Android to show some basic information that does not require user response. Since there is no Toast API for iOS, we will use a library that implements a similar API that works well on both platforms.

Here’s what...

Activity modals

In this final section of this chapter, you’ll implement a modal that shows a progress indicator. The idea is to display the modal and then hide it when the promise resolves. Here’s the code for the generic Activity component, which shows a modal with ActivityIndicator:

type ActivityProps = {
  visible: boolean;
  size?: "small" | "large";
};
export default function Activity({ visible, size = "large" }: ActivityProps) {
  return (
    <Modal visible={visible} transparent>
      <View style={styles.modalContainer}>
        <ActivityIndicator size={size} />
      </View>
    </Modal>
  );
}

You might be tempted to pass the promise to the component so that it automatically hides when the promise resolves. I don’t think this is a good idea because then you would have to introduce the state into this component. Furthermore, it would depend on a promise in order to function. With the...

Summary

In this chapter, we learned about the need to show important information to mobile users. This sometimes involves explicit feedback from the user, even if that just means acknowledging the message. In other cases, passive notifications work better, since they’re less obtrusive than confirmation modals.

There are two tools that we can use to display messages to users: modals and alerts. Modals are more flexible because they’re just like regular views. Alerts are good for displaying plain text, and they take care of styling concerns for us. On Android, we have the ToastAndroid interface as well. We saw that it’s also possible to do this on iOS, but it just requires more work.

In the next chapter, we’ll dig deeper into the gesture response system inside React Native, which makes for a better mobile experience than browsers can provide.