atlas-mobile-ts/src/components/Badge.tsx

/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */

import React, { memo } from "react"
import { View, Text, ViewStyle } from "react-native"
import { colors } from "../utils/GlobalUtils"

const Badge: React.FC<{value: number, positioning: {top?: number, left?: number, right?: number, bottom?: number}}> = ({value, positioning}) => {
    return (
        <View style={[positioning, {position: 'absolute', backgroundColor: 'white', paddingVertical: 2, paddingHorizontal: 5, borderRadius: 50}]}>
            <Text style={{fontSize: 10, color: colors.red}}>{value}</Text>
        </View>
    )
}

export default memo(Badge)