Badge content on top of avatars / images

[madhenry]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-magnus@1.0.62 for the project I'm working on.

With this change I am able to use the (unused?) count prop to set the avatar badge contents when the avatar is a child of Badge. Was it meant for exactly this usecase?

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx b/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
index c8d099f..e8a7a92 100644
--- a/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
+++ b/node_modules/react-native-magnus/src/ui/badge/badge.component.tsx
@@ -73,6 +73,7 @@ const Badge: React.FunctionComponent<BadgeProps> = (incomingProps) => {
   } = props;
   const { theme } = useTheme();
   const computedStyle = getStyle(theme, props);
+  const badgeContent = count || children
 
   return (
     <RNView style={computedStyle.container}>
@@ -80,12 +81,12 @@ const Badge: React.FunctionComponent<BadgeProps> = (incomingProps) => {
         {typeof children !== 'string' && children}
 
         <RNView style={computedStyle.div} {...rest}>
-          {typeof children === 'string' && (
+          {(typeof badgeContent === 'string' || typeof badgeContent == 'number') && (
             <Text
               {...getSpecificProps(props, ...textProps)}
               style={computedStyle.text}
             >
-              {children}
+              {badgeContent}
             </Text>
           )}
         </RNView>

This issue body was partially generated by patch-package.

<Badge count={2}>
   <Avatar source={{ uri: item.avatar }}>
      Avatar Initials
   </Avatar>
</Badge>

[jsartisan]

Hey nice patch. Possible to submit a PR for the same?