diff --git a/package-lock.json b/package-lock.json
index 404efab..62c53b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-circular-progress",
-  "version": "0.0.8",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8,6 +8,70 @@
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/art/-/art-0.10.1.tgz",
       "integrity": "sha1-OFQYg+OZIlxeGT/yRujxV897IUY="
+    },
+    "color": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
+      "integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
+      "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
+      "requires": {
+        "color-name": "1.1.1"
+      }
+    },
+    "color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok="
+    },
+    "color-string": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz",
+      "integrity": "sha1-JuRYFLw8mny9Z1FkikFDRRSnc6k=",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
+    "lodash": {
+      "version": "4.17.10",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+    },
+    "pegjs": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
+      "integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0="
+    },
+    "react-native-svg": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.3.1.tgz",
+      "integrity": "sha512-0kmfUwKUBWnPuJpy+bdGIYKkXHg/M/X57ji8b3d3ZFB2rRTWMRkwI1D+AJ6FQRX109+FJn6L6hsIokDj1lckzA==",
+      "requires": {
+        "color": "^2.0.1",
+        "lodash": "^4.16.6",
+        "pegjs": "^0.10.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 8817b3f..a851b3d 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
   "homepage": "https://github.com/bgryszko/react-native-circular-progress",
   "dependencies": {
     "art": "^0.10.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-native-svg": "^6.3.1"
   },
   "peerDependencies": {
     "react": ">= 15 || ~16.0.0-0",
diff --git a/src/CircularProgress.js b/src/CircularProgress.js
index 1a26e91..4a6a6aa 100644
--- a/src/CircularProgress.js
+++ b/src/CircularProgress.js
@@ -1,35 +1,38 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ViewPropTypes, Platform, ART, AppState } from 'react-native';
-const { Surface, Shape, Path, Group } = ART;
+import { View, ViewPropTypes } from 'react-native';
+import   { Svg, Path, G } from 'react-native-svg';
 
 export default class CircularProgress extends React.Component {
 
-  state = {
-    // We need to track this to mitigate a bug with RN ART on Android.
-    // After being unlocked the <Surface> is not rendered.
-    // To mitigate this we change the key-prop to forcefully update the <Surface>
-    // It's horrible.
-    // See https://github.com/facebook/react-native/issues/17565
-    appState: AppState.currentState,
+  // eliminate unecessary re-renders
+  shouldComponentUpdate(nextProps, nextState, nextContext) {
+    if (this.props === nextProps) return false;
+    return true;
   }
 
-  circlePath(cx, cy, r, startDegree, endDegree) {
-    let p = Path();
-    p.path.push(0, cx + r, cy);
-    p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, (endDegree * .9999) * Math.PI / 180, 1);
-    return p;
+  polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
+    return {
+        x: centerX + (radius * Math.cos(angleInRadians)),
+        y: centerY + (radius * Math.sin(angleInRadians))
+    };
+  }
+
+  circlePath(x, y, radius, startAngle, endAngle){
+    var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
+    var end = this.polarToCartesian(x, y, radius, startAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    var d = [
+        "M", start.x, start.y,
+        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
+    ].join(" ");  
+    return d;
   }
 
   clampFill = fill => Math.min(100, Math.max(0, fill));
 
-  componentDidMount = () => AppState.addEventListener('change', this.handleAppStateChange);
-  
-  componentWillUnmount = () => AppState.removeEventListener('change', this.handleAppStateChange);
-
-  handleAppStateChange = appState => this.setState({ appState });
-
   render() {
     const {
       size,
@@ -62,29 +65,30 @@ export default class CircularProgress extends React.Component {
 
     return (
       <View style={style}>
-        <Surface
+        <Svg
           width={size}
           height={size}
-          key={this.state.appState}
           style={{ backgroundColor: 'transparent' }}
         >
-          <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
+          <G rotation={rotation} originX={size/2} originY={size/2}>
             { backgroundColor && (
-              <Shape
+              <Path
                 d={backgroundPath}
                 stroke={backgroundColor}
                 strokeWidth={backgroundWidth || width}
                 strokeCap={lineCap}
+                fill="transparent"
               />
             )}
-            <Shape
+            <Path
               d={circlePath}
               stroke={tintColor}
               strokeWidth={width}
               strokeCap={lineCap}
+              fill="transparent"
             />
-          </Group>
-        </Surface>
+          </G>
+        </Svg>
         {renderChild && (
           <View style={childContainerStyle}>
             {renderChild(fill)}