fix fillOpacity with gradients

elements/Ellipse.js

@@ -28,6 +28,7 @@ class Ellipse extends Shape{
 
     render() {
         let props = this.props;
+
         return <RNSVGEllipse
             ref={ele => this.root = ele}
             {...this.extractProps(props)}

ios/Brushes/RNSVGBaseBrush.m

@@ -28,6 +28,11 @@
 
 - (void)paint:(CGContextRef)context opacity:(CGFloat)opacity brushConverter:(RNSVGBrushConverter *)brushConverter
 {
+    BOOL transparency = opacity < 1;
+    if (transparency) {
+        CGContextSetAlpha(context, opacity);
+        CGContextBeginTransparencyLayer(context, NULL);
+    }
     
     if (brushConverter.type == kRNSVGLinearGradient) {
         [brushConverter drawLinearGradient:context];
@@ -36,6 +41,10 @@
     } else if (brushConverter.type == kRNSVGPattern) {
         // todo:
     }
+    
+    if (transparency) {
+        CGContextEndTransparencyLayer(context);
+    }
 }
 
 @end

ios/Brushes/RNSVGBrushConverter.m

@@ -58,6 +58,7 @@
     
     CGAffineTransform transform = CGAffineTransformMakeScale(1, ry / rx);
     CGContextConcatCTM(context, transform);
+    
     CGContextDrawRadialGradient(context, gradient, CGPointMake(fx, fy), 0, CGPointMake(cx, cy), rx, extendOptions);
     CGGradientRelease(gradient);
 }

ios/Elements/RNSVGPath.m

@@ -59,7 +59,7 @@
             CGContextAddPath(context, self.d);
             CGContextClip(context);
             RNSVGBrushConverter *brushConverter = [[self getSvgView] getDefinedBrushConverter:[self.fill brushRef]];
-            [self.fill paint:context opacity:self.strokeOpacity brushConverter:brushConverter];
+            [self.fill paint:context opacity:self.fillOpacity brushConverter:brushConverter];
             CGContextRestoreGState(context);
             if (!self.stroke) {
                 return;

ios/Elements/RNSVGUse.m

@@ -23,21 +23,12 @@
 {
     RNSVGNode* template = [[self getSvgView] getDefinedTemplate:self.href];
     if (template) {
-        CGFloat opacity = self.opacity;
+        [self beginTransparencyLayer:context];
-        BOOL transparent = opacity < 1;
-        
-        if (transparent) {
-            CGContextBeginTransparencyLayer(context, NULL);
-        }
-        
         [self clip:context];
         [template mergeProperties:self mergeList:self.mergeList];
         [template renderTo:context];
         [template resetProperties];
-        
+        [self endTransparencyLayer:context];
-        if (transparent) {
-            CGContextEndTransparencyLayer(context);
-        }
     } else if (self.href) {
         // TODO: calling yellow box here
         RCTLogWarn(@"`Use` element expected a pre-defined svg template as `href` prop, template named: %@ is not defined.", self.href);

ios/RNSVGNode.h

@@ -76,4 +76,8 @@
  */
 - (void)resetProperties;
 
+- (void)beginTransparencyLayer:(CGContextRef)context;
+
+- (void)endTransparencyLayer:(CGContextRef)context;
+
 @end

ios/RNSVGNode.m

@@ -11,6 +11,9 @@
 #import "RNSVGClipPath.h"
 
 @implementation RNSVGNode
+{
+    BOOL transparent;
+}
 
 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
 {
@@ -52,8 +55,9 @@
     } else if (opacity > 1) {
         opacity = 1;
     }
-
+    
     [self invalidate];
+    transparent = opacity < 1;
     _opacity = opacity;
 }
 
@@ -63,27 +67,33 @@
     super.transform = transform;
 }
 
+- (void)beginTransparencyLayer:(CGContextRef)context
+{
+    if (transparent) {
+        CGContextBeginTransparencyLayer(context, NULL);
+    }
+}
+
+- (void)endTransparencyLayer:(CGContextRef)context
+{
+    if (transparent) {
+        CGContextEndTransparencyLayer(context);
+    }
+}
+
 - (void)renderTo:(CGContextRef)context
 {
     float opacity = self.opacity;
     
-    BOOL transparent = opacity < 1;
-
     // This needs to be painted on a layer before being composited.
     CGContextSaveGState(context);
     CGContextConcatCTM(context, self.transform);
     CGContextSetAlpha(context, opacity);
     
-    if (transparent) {
+    [self beginTransparencyLayer:context];
-        CGContextBeginTransparencyLayer(context, NULL);
-    }
-    
     [self renderClip:context];
     [self renderLayerTo:context];
-    
+    [self endTransparencyLayer:context];
-    if (transparent) {
-        CGContextEndTransparencyLayer(context);
-    }
     
     CGContextRestoreGState(context);
 }