import React, {ReactNode, useMemo} from 'react'; import {StyleSheet, View, Text, ViewStyle, TextStyle} from 'react-native'; export interface BadgeProps { containerStyle?: ViewStyle; style?: TextStyle; value?: ReactNode; size?: number; color?: string; children?: ReactNode; } export default function Badge({ containerStyle, style, value, size = 18, color = 'red', children, }: BadgeProps) { const handleRenderContent = useMemo(() => { const content = value !== undefined ? value : children; return typeof content === 'string' || typeof content === 'number' ? ( <Text style={StyleSheet.flatten([styles.text, style])}>{content}</Text> ) : ( content ); }, [value, children, style]); return ( <View style={StyleSheet.flatten([ styles.container, containerStyle, {height: size, minWidth: size, borderRadius: size / 2}, color !== undefined && {backgroundColor: 'red'}, ])}> {handleRenderContent} </View> ); } const styles = StyleSheet.create({ container: { flexDirection: 'row', paddingHorizontal: 3, alignItems: 'center', justifyContent: 'center', overflow: 'hidden', }, text: { fontSize: 12, color: 'white', textAlign: 'center', textAlignVertical: 'center', }, });