Dingdong_app/components/Badge.js

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

export default function Badge(props) {
	const theme = useTheme();
	
	const {status,appearance,style,children}=props

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

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