Summary - Alerts

Combine Alert, Toast and Modal to write a confirmation dialog.

Summary - Alerts

In this group you learned three ways to show warnings and notifications to the user. With Alert.alert you open a modal dialog; by adding buttons you get user confirmation. With ToastAndroid you show a brief notification on Android.

With Modal you create a custom overlay covering the screen; you open and close it with visible and add a transition animation with animationType. Now let us combine these in exercises.

Exercise Your turn: confirmation Alert

Call Alert.alert with title 'Delete' and message 'Are you sure?'. Add two buttons: Cancel (empty onPress) and Delete (calling del()).

Show example solution

import { Alert, Button } from 'react-native';

function Screen() {
  return (
    <Button
      title="Delete"
      onPress={() =>
        Alert.alert('Delete', 'Are you sure?', [
          { text: 'Cancel', onPress: () => {} },
          { text: 'Delete', onPress: () => del() }
        ])
      }
    />
  );
}

Exercise Your turn: slide-animated Modal

Add a Modal. Set visible to {visible} and animationType to "slide". Inside place a <Text> and a close button.

Show example solution

import { useState } from 'react';
import { Modal, View, Text, Button } from 'react-native';

function Screen() {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <Button title="Open" onPress={() => setVisible(true)} />
      <Modal visible={visible} animationType="slide">
        <View>
          <Text>Popup</Text>
          <Button title="Close" onPress={() => setVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

Test yourself

What does the visible prop of Modal do?
```
<Modal visible={visible}>
```
- Opens and closes the Modal
- Styles the Modal
- Sets the Modal position
- Changes the Modal size
Show answer

Opens and closes the Modal — visible opens and closes the Modal with true/false.
Match: tool and usage

Alert.alert

modal dialog
ToastAndroid

brief notification
Modal

custom overlay

Next lesson: Platform.OS

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies