diff --git a/elements/LinearGradient.js b/elements/LinearGradient.js
index 65f077f..cb09c72 100644
--- a/elements/LinearGradient.js
+++ b/elements/LinearGradient.js
@@ -23,7 +23,7 @@ export default class LinearGradient extends Shape {
                 y1={y1}
                 x2={x2}
                 y2={y2}
-                {...extractGradient(props)}
+                {...extractGradient(props, this)}
             />
         );
     }
diff --git a/elements/RadialGradient.js b/elements/RadialGradient.js
index bb1dae1..0e73ea4 100644
--- a/elements/RadialGradient.js
+++ b/elements/RadialGradient.js
@@ -26,7 +26,7 @@ export default class RadialGradient extends Shape {
                 ry={ry || r}
                 cx={cx}
                 cy={cy}
-                {...extractGradient(props)}
+                {...extractGradient(props, this)}
             />
         );
     }
diff --git a/elements/Stop.js b/elements/Stop.js
index efb7a9c..c1c9b35 100644
--- a/elements/Stop.js
+++ b/elements/Stop.js
@@ -7,6 +7,12 @@ export default class Stop extends Component {
         stopColor: "#000",
         stopOpacity: 1,
     };
+    setNativeProps = () => {
+        const { parent } = this.props;
+        if (parent) {
+            parent.forceUpdate();
+        }
+    };
 
     render() {
         return null;
diff --git a/ios/Elements/RNSVGClipPath.m b/ios/Elements/RNSVGClipPath.m
index 3228920..b1746db 100644
--- a/ios/Elements/RNSVGClipPath.m
+++ b/ios/Elements/RNSVGClipPath.m
@@ -12,6 +12,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     [self.svgView defineClipPath:self clipPathName:self.name];
 }
 
diff --git a/ios/Elements/RNSVGDefs.m b/ios/Elements/RNSVGDefs.m
index af9fd1c..1e32b2e 100644
--- a/ios/Elements/RNSVGDefs.m
+++ b/ios/Elements/RNSVGDefs.m
@@ -18,6 +18,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     [self traverseSubviews:^(RNSVGNode *node) {
         if ([node isKindOfClass:[RNSVGNode class]]) {
             [node parseReference];
diff --git a/ios/Elements/RNSVGGroup.m b/ios/Elements/RNSVGGroup.m
index 4af3996..8a02ca4 100644
--- a/ios/Elements/RNSVGGroup.m
+++ b/ios/Elements/RNSVGGroup.m
@@ -197,6 +197,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     if (self.name) {
         typeof(self) __weak weakSelf = self;
         [self.svgView defineTemplate:weakSelf templateName:self.name];
diff --git a/ios/Elements/RNSVGLinearGradient.m b/ios/Elements/RNSVGLinearGradient.m
index e2afbca..da712fe 100644
--- a/ios/Elements/RNSVGLinearGradient.m
+++ b/ios/Elements/RNSVGLinearGradient.m
@@ -85,6 +85,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     NSArray<RNSVGLength *> *points = @[self.x1, self.y1, self.x2, self.y2];
     RNSVGPainter *painter = [[RNSVGPainter alloc] initWithPointsArray:points];
     [painter setUnits:self.gradientUnits];
diff --git a/ios/Elements/RNSVGMask.m b/ios/Elements/RNSVGMask.m
index a9c9c87..021d0b8 100644
--- a/ios/Elements/RNSVGMask.m
+++ b/ios/Elements/RNSVGMask.m
@@ -19,6 +19,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     [self.svgView defineMask:self maskName:self.name];
 }
 
diff --git a/ios/Elements/RNSVGPattern.m b/ios/Elements/RNSVGPattern.m
index 475bd73..90c3eea 100644
--- a/ios/Elements/RNSVGPattern.m
+++ b/ios/Elements/RNSVGPattern.m
@@ -19,6 +19,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     NSArray<RNSVGLength *> *points = @[self.x, self.y, self.patternwidth, self.patternheight];
     RNSVGPainter *painter = [[RNSVGPainter alloc] initWithPointsArray:points];
     [painter setUnits:self.patternUnits];
diff --git a/ios/Elements/RNSVGRadialGradient.m b/ios/Elements/RNSVGRadialGradient.m
index 008d902..ab9f354 100644
--- a/ios/Elements/RNSVGRadialGradient.m
+++ b/ios/Elements/RNSVGRadialGradient.m
@@ -102,6 +102,7 @@
 
 - (void)parseReference
 {
+    self.dirty = false;
     NSArray<RNSVGLength *> *points = @[self.fx, self.fy, self.rx, self.ry, self.cx, self.cy];
     RNSVGPainter *painter = [[RNSVGPainter alloc] initWithPointsArray:points];
     [painter setUnits:self.gradientUnits];
diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m
index 51c6550..0086e58 100644
--- a/ios/RNSVGNode.m
+++ b/ios/RNSVGNode.m
@@ -531,6 +531,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
 
 - (void)parseReference
 {
+    self.dirty = false;
     if (self.name) {
         typeof(self) __weak weakSelf = self;
         [self.svgView defineTemplate:weakSelf templateName:self.name];
diff --git a/lib/extract/extractGradient.js b/lib/extract/extractGradient.js
index f81e7df..f8cfb7c 100644
--- a/lib/extract/extractGradient.js
+++ b/lib/extract/extractGradient.js
@@ -1,4 +1,4 @@
-import { Children } from "react";
+import React, { Children } from "react";
 import Color from "color";
 
 import extractOpacity from "./extractOpacity";
@@ -11,6 +11,12 @@ function percentToFloat(percent) {
     if (typeof percent === "number") {
         return percent;
     }
+    if (
+        typeof percent === "object" &&
+        typeof percent.__getAnimatedValue === "function"
+    ) {
+        return percent.__getAnimatedValue();
+    }
     const matched = percent.match(percentReg);
     if (!matched) {
         console.warn(
@@ -24,20 +30,27 @@ function percentToFloat(percent) {
 
 const offsetComparator = (object, other) => object[0] - other[0];
 
-export default function extractGradient(props) {
+export default function extractGradient(props, parent) {
     const { id, children, gradientTransform, transform, gradientUnits } = props;
     if (!id) {
         return null;
     }
 
     const stops = [];
-    const childArray = Children.toArray(children);
+    const childArray = React.Children.map(children, child =>
+        React.cloneElement(child, {
+            parent,
+        }),
+    );
     const l = childArray.length;
     for (let i = 0; i < l; i++) {
         const { props: { offset, stopColor, stopOpacity } } = childArray[i];
         const offsetNumber = percentToFloat(offset);
         if (stopColor && !isNaN(offsetNumber)) {
-            const color = Color(stopColor).alpha(extractOpacity(stopOpacity)).rgb().array();
+            const color = Color(stopColor)
+                .alpha(extractOpacity(stopOpacity))
+                .rgb()
+                .array();
             const r = color[0] / 255;
             const g = color[1] / 255;
             const b = color[2] / 255;
@@ -58,8 +71,11 @@ export default function extractGradient(props) {
 
     return {
         name: id,
+        children: childArray,
         gradient: colors.concat(offsets),
         gradientUnits: units[gradientUnits] || 0,
-        gradientTransform: extractTransform(gradientTransform || transform || props),
+        gradientTransform: extractTransform(
+            gradientTransform || transform || props,
+        ),
     };
 }