Badges

Badges are used to add show a numeric or boolean information (mostly) related to specific context like user, notifications, calls etc. We provide Avatar and Icon Badges by default and mechanism to create a custom badge according to any custom use cases.

Usage

Avatar Badge Demo

import {Badge} from "arivaa-basic";
import {getRandom} from 'arivaa-basic/components/util';
<Badge
    type="avatar"
    dot={true}
    image = {getRandom("image")}
/>
<Badge
    type="avatar"
    text = {30}
    image = {getRandom("image")}
/>
<Badge
    type="avatar"
    text = {30}
    overflowCount = {30}
    height = {100}
    width = {100}
    image = {getRandom("image")}
/>

 

Icon Badge Demo

import {Badge} from "arivaa-basic";
import {getRandom} from 'arivaa-basic/components/util';
<Badge
    type="icon"
    dot={true}
    icon = "ios-notifications-outline"
/>
<Badge
    type="icon"
    text={10}
    icon = "ios-notifications-outline"
/>
<Badge
    type="icon"
    text={30}
    overflowCount={20}
    icon = "ios-call-outline"
/>

 

Custom Badge Demo

import React,{View} from "react-native";
import {Colors} from "arivaa-basic/styles";
import {Badge,Thumbnail} from "arivaa-basic";
import {getRandom} from 'arivaa-basic/components/util';

const styles = React.StyleSheet.create({
    customBadge : {
        width: 50,
        height: 50,
        borderRadius: 50,
        backgroundColor: '#eee'
    },
    customBadgeContainer : {
        marginRight : 30
    }
});

<Badge
    dot={true}
    size={'large'}
    text = {20}
    containerStyle = {styles.customBadgeContainer}
    content = {
        <View style = {styles.customBadge}></View>
    }
/>

<Badge
    text={10}
    size={'large'}
    overflowCount = {5}
    containerStyle = {styles.customBadgeContainer}
    content = {
        <Thumbnail
            text="A"
            borderRadius = {50}
        />
    }
/>

<Badge
    text={10}
    size={'large'}
    containerStyle = {styles.customBadgeContainer}
    content = {
        <Thumbnail
            text="I"
            iconStyle = {{
                color : Colors.primaryColor
            }}
            borderRadius = {50}
        />
    }
/>

 

Supported properties (Custom badge)

Properties Description Type Default
type Type of badge ( avatar , icon , custom ) String custom
content Content for badge React Element Null
size size of badge, optional: large small string small
text text or number inside badge ​string | number -
dot show badge inside a red dot boolean false
overflowCount Maximum count after which + sign should be

shown i,e it should be considered as a overflow
number 99
corner Used for styling the badge (Refer detailed styles usage below)    
style Style for the badge container (Refer detailed styles usage below) React Native View Styles -
contentStyle Style for the content (Refer detailed styles usage below) React Native View Styles -
containerStyle Style for badge container (Refer detailed styles usage below) React Native View Styles -
styles For detailed customization of component's internal styles.(Refer detailed styles usage below) Custom Object( DetailedStyles ) (Refer the format below)

DetailedStyles Usage

Below is the tree structure of React Native's core elements used in this component's view implementation and how styles property is applied when this component is rendered. So feel free to customize it if you need to.

<View style={[styles.container,containerStyle]}>
    <View  style={[styles.wrap,style]}>
        <View style = {corner?styles.textCornerWrap:styles.textDomWrap}>
            <View style = {contentStyle}>
                <Text style={styles.text}>
                    {/*Text*/}
                </Text>
            </View>
        </View>
    </View>
</View>

Published On October 14, 2020 12:27 PM

Last Updated October 14, 2020 12:27 PM