Dingdong_app/components/Loading.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Text,
    Layout,
    Spinner,
    Icon,
} from "@ui-kitten/components";
import { useModel, setModel } from "flooks";
import loadingModel from "../models/loadingModel";

setModel("loadingModel", loadingModel);

const styles = StyleSheet.create({
    backdrop: {
        // backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    loadingBox: {
        width: 120,
        height: 120,
        borderRadius: 10,
        backgroundColor: "rgba(0,0,0,0.8)",
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#fff",
        marginTop: 10,
    },
    icon: {
        width: 60,
        height: 60,
    },
    warning: {
        paddingHorizontal: 15,
        paddingVertical: 5,
        backgroundColor: "rgba(0,0,0,0.8)",
        borderRadius: 3,
        marginHorizontal: 20,
    },
});



export default function Loading() {
    const {  getWordsStr } = useModel("wordsModel");

    const { show, title, status } = useModel("loadingModel");

    return (
      <Modal visible={show} backdropStyle={styles.backdrop}>
        {status === "loading" && (
        <Layout style={styles.loadingBox}>
          <Spinner size='giant' status='control' />
          <Text style={styles.text}>{getWordsStr("loading")}</Text>
        </Layout>
            )}

        {status === "success" && (
        <Layout style={styles.loadingBox}>
          <Icon style={styles.icon} name='checkmark' fill='#fff' />
          <Text style={styles.text}>{title}</Text>
        </Layout>
            )}

        {status === "warn" && (
        <Layout style={styles.warning}>
          <Text style={{ color: "#fff", textAlign: "center" }}>
            {title}
          </Text>
        </Layout>
            )}
      </Modal>
    );
}