Fix avatar badge color (#2408)

Author: lidord-wix

demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -632,6 +632,11 @@ exports[`AvatarScreen renders screen 1`] = `
           accessibilityLabel="badge"
           accessibilityRole="text"
           accessible={false}
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           modifiers={Object {}}
           size={10}
           style={
@@ -857,6 +862,11 @@ exports[`AvatarScreen renders screen 1`] = `
           accessibilityLabel="badge"
           accessibilityRole="text"
           accessible={false}
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           modifiers={Object {}}
           size={10}
           style={
@@ -1082,6 +1092,11 @@ exports[`AvatarScreen renders screen 1`] = `
           accessibilityLabel="badge"
           accessibilityRole="text"
           accessible={false}
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           modifiers={Object {}}
           size={10}
           style={
@@ -1488,6 +1503,11 @@ exports[`AvatarScreen renders screen 1`] = `
           accessibilityLabel="badge"
           accessibilityRole="text"
           accessible={false}
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           modifiers={Object {}}
           size={14}
           style={
@@ -1719,6 +1739,11 @@ exports[`AvatarScreen renders screen 1`] = `
               "testUri": "../../../demo/src/assets/icons/star.png",
             }
           }
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           iconStyle={
             Object {
               "backgroundColor": "#FFC50D",
@@ -1796,9 +1821,7 @@ exports[`AvatarScreen renders screen 1`] = `
               }
               style={
                 Array [
-                  Object {
-                    "tintColor": "#FFFFFF",
-                  },
+                  null,
                   undefined,
                   undefined,
                   undefined,
@@ -2693,6 +2716,11 @@ exports[`AvatarScreen renders screen 1`] = `
           accessibilityRole="text"
           accessible={true}
           borderColor="#FFFFFF"
+          iconProps={
+            Object {
+              "tintColor": null,
+            }
+          }
           label="+2"
           modifiers={Object {}}
           size={24}

src/components/avatar/index.tsx

@@ -324,7 +324,13 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
   const renderBadge = () => {
     if (!_.isEmpty(badgeProps)) {
       return (
-        <Badge testID={`${testID}.onlineBadge`} {...badgeProps} size={badgeSize} containerStyle={_badgePosition}/>
+        <Badge
+          testID={`${testID}.onlineBadge`}
+          iconProps={{tintColor: null}}
+          {...badgeProps}
+          size={badgeSize}
+          containerStyle={_badgePosition}
+        />
       );
     }
   };