MinimalReproAlert.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

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

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const [authState, setAuthState] = useState<
    'unknown' | 'waiting' | 'denied' | 'authenticated'
  >('unknown');

  const [modalVisible, setModalVisible] = useState(false);

  const backgroundStyle = {
    backgroundColor: Colors.lighter,
  };

  function authenticate() {
    setAuthState('waiting');
    setModalVisible(true);
  }

  return (
    <SafeAreaView style={backgroundStyle}>
      <View style={backgroundStyle}>
        <Button title="Authenticate" onPress={authenticate} />
        <Text>Current state: {authState}</Text>
      </View>
      <Modal
        visible={modalVisible}
        animationType="slide"
        onDismiss={() => alert('Authentication Completed')}>
        <SafeAreaView style={backgroundStyle}>
          <Text>Accept authentication?</Text>
          <Button
            title="Yes"
            onPress={() => {
              setModalVisible(false);
              setAuthState('authenticated');
            }}
          />
          <Button
            title="No"
            onPress={() => {
              setModalVisible(false);
              setAuthState('denied');
            }}
          />
        </SafeAreaView>
      </Modal>
    </SafeAreaView>
  );
}

export default App;