Dingdong_app/components/Badge.js

import * as React from "react";
import { Icon, useTheme, Text, Button } from "@ui-kitten/components";

export default function Badge(props) {
    const theme = useTheme();

    const useColor = React.useMemo(() => {
        if (props.status) {
            return theme["text-" + props.status + "-color"];
        } else {
            return theme["text-danger-color"];
        }
    }, [props.status]);

    if (props.appearance == "fill") {
        return (
            <Button
                appearance='badge'
                status={props.status || "primary"}
                style={{
                    marginRight: props.right || 0,
                    marginBottom: props.bottom || 0,
                    flexShrink: 0,
                }}
            >
                {props.children}
            </Button>
        );
    } else {
        return (
            <Text
                category='h1'
                status={props.status || "danger"}
                style={[
                    {
                        borderWidth: props.appearance == "ghost" ? 0 : 1,
                        borderRadius: 20,
                        paddingHorizontal: props.appearance == "ghost" ? 0 : 3,
                        borderColor: useColor,
                    },
                    props.style,
                ]}
            >
                {props.children}
            </Text>
        );
    }
}