Remove unwanted border in CircleSnail

Circle.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import * as ART from '@react-native-community/art';
+import { Surface as ARTSurface } from '@react-native-community/art';
 
 import Arc from './Shapes/Arc';
 import withAnimation from './withAnimation';
 
 const CIRCLE = Math.PI * 2;
 
-const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface);
+const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface);
 const AnimatedArc = Animated.createAnimatedComponent(Arc);
 
 const styles = StyleSheet.create({
@@ -110,7 +110,7 @@ export class ProgressCircle extends Component {
     const textOffset = border + thickness;
     const textSize = size - textOffset * 2;
 
-    const Surface = rotation ? AnimatedSurface : ART.Surface;
+    const Surface = rotation ? AnimatedSurface : ARTSurface;
     const Shape = animated ? AnimatedArc : Arc;
     const progressValue = animated ? this.progressValue : progress;
     const angle = animated

CircleSnail.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, Easing } from 'react-native';
-import * as ART from '@react-native-community/art';
+import { Surface as ARTSurface } from '@react-native-community/art';
 
 import Arc from './Shapes/Arc';
 
@@ -131,11 +131,7 @@ export default class CircleSnail extends Component {
       return null;
     }
 
-    const radius = size / 2 - thickness;
-    const offset = {
-      top: thickness,
-      left: thickness,
-    };
+    const radius = size / 2;
 
     const directionFactor = direction === 'counter-clockwise' ? -1 : 1;
 
@@ -158,7 +154,7 @@ export default class CircleSnail extends Component {
           },
         ]}
       >
-        <ART.Surface width={size} height={size}>
+        <ARTSurface width={size} height={size}>
           <AnimatedArc
             direction={
               direction === 'counter-clockwise'
@@ -167,13 +163,12 @@ export default class CircleSnail extends Component {
             }
             radius={radius}
             stroke={Array.isArray(color) ? color[this.state.colorIndex] : color}
-            offset={offset}
             startAngle={this.state.startAngle}
             endAngle={this.state.endAngle}
             strokeCap={strokeCap}
             strokeWidth={thickness}
           />
-        </ART.Surface>
+        </ARTSurface>
         {children}
       </Animated.View>
     );

Pie.js

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, StyleSheet, View } from 'react-native';
-import * as ART from '@react-native-community/art';
+import { Surface as ARTSurface } from '@react-native-community/art';
 
 import Circle from './Shapes/Circle';
 import Sector from './Shapes/Sector';
 import withAnimation from './withAnimation';
 
 const CIRCLE = Math.PI * 2;
 
-const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface);
+const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface);
 const AnimatedSector = Animated.createAnimatedComponent(Sector);
 
 const styles = StyleSheet.create({
@@ -58,7 +58,7 @@ export class ProgressPie extends Component {
       ...restProps
     } = this.props;
 
-    const Surface = rotation ? AnimatedSurface : ART.Surface;
+    const Surface = rotation ? AnimatedSurface : ARTSurface;
     const Shape = animated ? AnimatedSector : Sector;
 
     const angle = animated

Shapes/Arc.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import * as ART from '@react-native-community/art';
+import { Shape as ARTShape, Path as ARTPath } from '@react-native-community/art';
 
 const CIRCLE = Math.PI * 2;
 
@@ -19,7 +19,7 @@ function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) {
       : endAngle - startAngle;
 
   if (angle >= CIRCLE) {
-    return ART.Path()
+    return (new ARTPath())
       .moveTo(x + radius, y)
       .arc(0, radius * 2, radius, radius)
       .arc(0, radius * -2, radius, radius)
@@ -86,7 +86,7 @@ export default class Arc extends Component {
     );
 
     return (
-      <ART.Shape
+      <ARTShape
         d={path}
         strokeCap={strokeCap}
         strokeWidth={strokeWidth}

Shapes/Circle.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import * as ART from '@react-native-community/art';
+import { Shape as ARTShape, Path as ARTPath } from '@react-native-community/art';
 
 function makeCirclePath(x, y, radius, direction) {
   const arcMethod = direction === 'counter-clockwise' ? 'counterArc' : 'arc';
 
-  return ART.Path()
+  return (new ARTPath())
     .moveTo(x, y)
     .move(radius, 0)
     [arcMethod](0, radius * 2, radius, radius)
@@ -39,7 +39,7 @@ export default class Circle extends Component {
       direction
     );
     return (
-      <ART.Shape
+      <ARTShape
         d={path}
         strokeCap="butt"
         strokeWidth={strokeWidth}

Shapes/Sector.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import * as ART from '@react-native-community/art';
+import { Shape as ARTShape, Path as ARTPath } from '@react-native-community/art';
 
 const CIRCLE = Math.PI * 2;
 
 function makeSectorPath(x, y, angle, radius) {
   if (angle >= CIRCLE) {
-    return ART.Path()
+    return (new ARTPath())
       .moveTo(x, y)
       .move(radius, 0)
       .arc(0, radius * 2, radius, radius)
@@ -50,6 +50,6 @@ export default class Sector extends Component {
       angle,
       radius
     );
-    return <ART.Shape d={path} {...restProps} />;
+    return <ARTShape d={path} {...restProps} />;
   }
 }

package.json

@@ -50,8 +50,8 @@
     "prettier": "^1.16.4"
   },
   "dependencies": {
-    "prop-types": "^15.7.2",
-    "@react-native-community/art": "^1.0.3"
+    "@react-native-community/art": "https://github.com/danielwinkler/react-native-community-art",
+    "prop-types": "^15.7.2"
   },
   "typings": "index.d.ts"
 }

yarn.lock

@@ -90,6 +90,14 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@react-native-community/art@https://github.com/danielwinkler/react-native-community-art":
+  version "1.0.3"
+  resolved "https://github.com/danielwinkler/react-native-community-art#4d31a67f538807e89111bb35ec0e30587b57a61f"
+  dependencies:
+    art "^0.10.3"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+
 acorn-jsx@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
@@ -165,6 +173,11 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+art@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
+  integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
+
 ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -780,6 +793,13 @@ inquirer@^5.2.0:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -905,7 +925,7 @@ lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
-loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==