React Native UI Kitten Badge component

By Firuz Haciyev on August 14, 2021

Create your badge component easily

I have been using the ui kit for a while. It has very good features, but it also has a lot of shortcomings. One of these the Badge component. That’s why I prepared a simple but functional component. You can use the code below until you see the Badge component in the official library.

Create badge component

// badge.js
import React from "react";
import { View } from "react-native";
import { Text, styled } from "@ui-kitten/components";
import styles from "./badge.style";

@styled("Badge")

class Badge extends React.Component {
  rendeBadgeComponent = () => {
    const { eva, style, count, children, …restProps } = this.props;
    switch (typeof count) {
      case "number":
      case "string":
        return (
          <View style={[eva.style, styles.badge, style]} {…restProps}>
            <Text
              style={{
                color: eva.style.textColor,
                fontSize: eva.style.textFontSize,
                fontWeight: eva.style.textFontWeight,
              }}
            >
              {this.props.count}
            </Text>
          </View>
        );
      case "function":
        return count();
    }
  };
  render() {
    const { children } = this.props;
    return (
      <View style={styles.badgeContainer}>
        <View style={children ? styles.badgeContainerAbsolute : null}>
          {this.rendeBadgeComponent()}
        </View>
        {children}
      </View>
    );
  }
}

Add badge styles

// badge.style.js
import { StyleSheet } from "react-native";
export default StyleSheet.create({
  badgeContainer: {
    position: "relative",
  },
  badgeContainerAbsolute: {
    position: "absolute",
    zIndex: 1,
    right: 0,
    top: 0,
    transform: [{ translateX: "5%" }, { translateY: "-5%" }],
  },
  badge: {
    alignItems: "center",
    justifyContent: "center",
  },
});

Add mapping to mapping.json

// mapping.json
{
  "Badge": {
    "meta": {
      "scope": "all",
      "parameters": {
        "height": {
          "type": "number"
        },
        "paddingHorizontal": {
          "type": "number"
        },
        "textColor": {
          "type": "string"
        },
        "textFontSize": {
          "type": "number"
        },
        "textFontWeight": {
          "type": "string"
        },
        "textFontFamily": {
          "type": "string"
        },
        "borderRadius": {
          "type": "number"
        },
        "borderColor": {
          "type": "string"
        },
        "borderWidth": {
          "type": "number"
        },
        "backgroundColor": {
          "type": "string"
        }
      },
      "appearances": {
        "filled": {
          "default": true
        },
        "outline": {
          "default": false
        }
      },
      "variantGroups": {
        "status": {
          "primary": {
            "default": true
          },
          "success": {
            "default": false
          },
          "info": {
            "default": false
          },
          "warning": {
            "default": false
          },
          "danger": {
            "default": false
          }
        },
        "size": {
          "small": {
            "default": false
          },
          "medium": {
            "default": true
          },
          "large": {
            "default": false
          }
        }
      },
      "states": {
        "active": {
          "default": false,
          "priority": 2,
          "scope": "all"
        }
      }
    },
    "appearances": {
      "filled": {
        "mapping": {
          "borderRadius": "border-radius-full",
          "textFontFamily": "$text-font-family"
        },
        "variantGroups": {
          "status": {
            "primary": {
              "borderColor": "color-primary-default-border",
              "backgroundColor": "color-primary-default",
              "textColor": "text-control-color"
            },
            "success": {
              "borderColor": "color-success-default-border",
              "backgroundColor": "color-success-default",
              "textColor": "text-control-color"
            },
            "info": {
              "borderColor": "color-info-default-border",
              "backgroundColor": "color-info-default",
              "textColor": "text-control-color"
            },
            "warning": {
              "borderColor": "color-warning-default-border",
              "backgroundColor": "color-warning-default",
              "textColor": "text-control-color"
            },
            "danger": {
              "borderColor": "color-danger-default-border",
              "backgroundColor": "color-danger-default",
              "textColor": "text-control-color"
            }
          },
          "size": {
            "small": {
              "height": 15,
              "paddingHorizontal": 4,
              "borderWidth": "border-width",
              "textFontSize": 10,
              "textFontWeight": "text-caption-1-font-weight"
            },
            "medium": {
              "height": 20,
              "paddingHorizontal": 6,
              "borderWidth": "border-width",
              "textFontSize": 12,
              "textFontWeight": "bold"
            },
            "large": {
              "height": 25,
              "paddingHorizontal": 8,
              "borderWidth": "border-width",
              "textFontSize": 14,
              "textFontWeight": "bold"
            }
          }
        }
      },
      "outline": {
        "variantGroups": {
          "status": {
            "primary": {
              "borderColor": "color-primary-default-border",
              "backgroundColor": "transparent",
              "textColor": "color-primary-default"
            },
            "success": {
              "borderColor": "color-success-default-border",
              "backgroundColor": "transparent",
              "textColor": "color-success-default"
            },
            "info": {
              "borderColor": "color-info-default-border",
              "backgroundColor": "transparent",
              "textColor": "color-info-default"
            },
            "warning": {
              "borderColor": "color-warning-default-border",
              "backgroundColor": "transparent",
              "textColor": "color-warning-default"
            },
            "danger": {
              "borderColor": "color-danger-default-border",
              "backgroundColor": "transparent",
              "textColor": "color-danger-default"
            }
          }
        }
      }
    }
  }
}

Usage

<Badge count={1} appearance=”filled” status=”danger” size=”medium” />
//or
<Badge count={1} appearance=”filled” status=”danger” size=”medium”>
 <CustomComponent />
</Badge>
//or
<Badge count={() => <CustomIcon />} />

Optional. If you want to show badge props on code editor then create badge.d.ts

// badge.d.ts
import React from ‘react’;
export interface BadgeProps {
 count: any;
 status: ‘primary’ | ‘success’ | ‘danger’ | ‘warning’ | ‘info’ | string;
 appearance: ‘filled’ | ‘outline’ | string;
 size: ‘small’ | ‘medium’ | ‘large’ | string;
}
export default class Badge extends React.Component<BadgeProps> {}

Firuz Haciyev

I'm a front end developer. I love sharing what I've learned and learning new things. Years from now, I hope this will be an informative blog for new developers.