DingdongRider/modals/AlertModalScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import * as Animatable from 'react-native-animatable';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';

import { RootStackParamList } from '../types';

export default function AlertModalScreen({
  navigation,
  route,
}: StackScreenProps<RootStackParamList, 'AlertModal'>) {
  const { params } = route;
  const { title, msg, hasCancel, submitText, submitEvent } = params;
  const { t } = useTranslation();

  return (
    <Div flex={1} bg="black600" alignItems="center" justifyContent="center">
      <Animatable.View animation="slideInUp" duration={300}>
        <Div bg="white" p={10} rounded="sm" minW={287}>
          <Text fontSize="lg" textAlign="center">
            {title || t('ti-shi')}
          </Text>

          <Text fontSize="md" p={10} textAlign="center">
            {msg}
          </Text>

          <Div row py={10} mt={10}>
            <Button
              flex={1}
              mx={3}
              rounded="xs"
              bg="white"
              color="black"
              borderWidth={1}
              borderColor="yellow500"
              fontSize="sm"
              onPress={() => navigation.goBack()}
            >
              {hasCancel ? t('qu-xiao') : submitText || t('que-ren')}
            </Button>
            <Button
              flex={1}
              mx={3}
              rounded="xs"
              bg="yellow500"
              fontSize="sm"
              onPress={() => {
                if (submitEvent) {
                  submitEvent();
                }
                navigation.goBack();
              }}
            >
              {submitText || t('que-ren')}
            </Button>
          </Div>
        </Div>
      </Animatable.View>
    </Div>
  );
}