PopupDialog không còn hỗ trợ nữa thay vào đó dùng Modal (ok)

https://reactnative.dev/docs/modal.html

Cách 1: Dùng function

import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, TouchableHighlight, View } from "react-native";
const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }} >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <TouchableHighlight style={{ ...styles.openButton, backgroundColor: "#2196F3" }} onPress={() => { setModalVisible(!modalVisible); }} >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
      <TouchableHighlight style={styles.openButton} onPress={() => { setModalVisible(true); }} >
        <Text style={styles.textStyle}>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};
const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});
export default App;

Kết quả:

Cách 2: Dùng class

C:\Users\Administrator\Desktop\App\App.js

import React, { Component } from 'react'; 
import { StyleSheet, View, Text, Modal, Alert, TouchableOpacity  } from 'react-native';
import Button from '@material-ui/core/Button';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  onShowModal = () => {
    this.setState({ 
      showModal: true 
    });
  }
  onCloseModal = () => {
    this.setState({ showModal: false }, () => {
      Alert.alert('Alert', 'Press OK to Close');
    });
  }
  render() {
    const { showModal } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onShowModal}>
          <Text style={styles.text}>Press Here</Text>
        </TouchableOpacity>
        <Modal animationType='slide' visible={showModal} onRequestClose={this.onCloseModal3} >
          <View style={styles.container}>
            <Text onPress={this.onCloseModal} style={styles.text}>Close modal immediately</Text>
          </View>
        </Modal>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  button: {
    alignItems: "center",
    backgroundColor: "#3f51b5",
  },
  text: {
    color: "#ffffff",
    fontWeight: "700",
    padding: 10,
    backgroundColor: "#3f51b5"
  }
});

C:\Users\Administrator\Desktop\App\index.js

import { registerRootComponent } from 'expo';
import App from './App';
registerRootComponent(App);