fix: SVGs are filled with black instead of none (#2693)

src/elements/G.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import * as React from 'react';
+import { Children } from 'react';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import { extractFont } from '../lib/extract/extractText';
 import extractTransform from '../lib/extract/extractTransform';
@@ -41,11 +42,18 @@ export default class G<P> extends Shape<GProps & P> {
     if (hasProps(font)) {
       extractedProps.font = font;
     }
+
+    const childArray = props.children
+      ? Children.map(props.children, (child) =>
+          React.cloneElement(child, { ...extractedProps })
+        )
+      : [];
+
     return (
       <RNSVGGroup
         ref={(ref) => this.refMethod(ref as (G<P> & NativeMethods) | null)}
         {...extractedProps}>
-        {props.children}
+        {childArray}
       </RNSVGGroup>
     );
   }

src/lib/extract/extractBrush.ts

@@ -8,7 +8,25 @@ const currentColorBrush = { type: 2 };
 const contextFillBrush = { type: 3 };
 const contextStrokeBrush = { type: 4 };
 
+function isBrush(color: any): boolean {
+  const isObject = !!color && typeof color === 'object';
+  const hasType = () => 'type' in color && typeof color.type === 'number';
+  const hasBrushRef = () => 'brushRef' in color && typeof color.brushRef === 'string';
+  const hasPayload = () => 'payload' in color && typeof color.payload === 'number';
+
+  return (
+    isObject &&
+    hasType() &&
+    (hasBrushRef() || hasPayload())
+  );
+}
+
 export default function extractBrush(color: ColorValue) {
+  if (isBrush(color)) {
+    // If the color comes from the AST it's already a brush
+    return color;
+  }
+
   if (color === 'none') {
     return null;
   }

src/lib/extract/extractFill.ts

@@ -21,6 +21,7 @@ export default function extractFill(
     o.fill =
       !fill && typeof fill !== 'number' ? defaultFill : extractBrush(fill);
   } else {
+    inherited.push('fill');
     // we want the default value of fill to be black to match the spec
     o.fill = defaultFill;
   }