Fix/react native svg 12

README.md

@@ -27,10 +27,10 @@ yarn add @callstack/reanimated-arc
 Install `react-native-svg` peer dependency
 
 ```sh
-yarn add react-native-svg@^10.0.0
+yarn add react-native-svg@^12.0.0
 ```
 
-> Library supports `react-native-svg` in versions from `9.13.4` to last of `10.0.0`. It seems to not work well on Android with `11` and above
+> Library supports `react-native-svg` from version `12.0.0` onward.
 
 Install `react-native-reanimated` peer dependency
 

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/components/Stopwatch.tsx

@@ -27,6 +27,7 @@ const Stopwatch = () => {
         clearTimeout(timeout2);
       };
     }
+    return () => null;
   }, [currentTime, stopWatchActive]);
 
   const startCounting = () => {

example/package.json

@@ -13,7 +13,7 @@
     "react-native": "0.61.5",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.4.0",
-    "react-native-svg": "^10.0.0"
+    "react-native-svg": "^12.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",

reanimated-arc/src/ReanimatedArcBase.tsx

@@ -4,7 +4,7 @@
  */
 
 import * as React from 'react';
-import {View, ViewStyle, StyleProp, Platform} from 'react-native';
+import {View, ViewStyle, StyleProp} from 'react-native';
 import {Svg, Path, G} from 'react-native-svg';
 import Reanimated from 'react-native-reanimated';
 
@@ -144,7 +144,6 @@ export default class AnimatedArc extends React.PureComponent<Props> {
   render() {
     const {diameter, width, color, style, lineCap} = this.props;
 
-    const offsetAndroid = Platform.OS === 'android' ? this.outerRadius : 0;
     const pivot = this.outerRadius;
     return (
       <View style={style}>
@@ -154,11 +153,7 @@ export default class AnimatedArc extends React.PureComponent<Props> {
           viewBox={`${-pivot} ${-pivot} ${diameter} ${diameter}`}>
           <AnimatedG
             style={{
-              transform: [
-                {translateX: -offsetAndroid},
-                {rotate: this.rotation},
-                {translateX: offsetAndroid},
-              ],
+              transform: [{rotate: this.rotation}],
             }}>
             <AnimatedPath
               d={this.circlePath}

reanimated-arc/tsconfig.json

@@ -35,6 +35,7 @@
     "babel.config.js",
     "metro.config.js",
     "jest.config.js",
-    "dist/*"
+    "dist/*",
+    "scripts"
   ]
 }

yarn.lock

@@ -6402,10 +6402,10 @@ react-native-reanimated@^1.4.0:
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz#7f1acbf9be08492d834f512700570978052be2f9"
   integrity sha512-tO7nSNNP+iRLVbkcSS5GXyDBb7tSI02+XuRL3/S39EAr35rnvUy2JfeLUQG+fWSObJjnMVhasUDEUwlENk8IXw==
 
-react-native-svg@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-10.1.0.tgz#f7be0f814fb79b06dda6d938bf8e609f47318789"
-  integrity sha512-mgo6CshQIQrDDBVUPqJK/iOsJEdlagk7N4q8fyo1sqCiSUP2efpt+AQ1IRXZtHXut210/7TliAamvM59NV0Bzg==
+react-native-svg@^12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d"
+  integrity sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w==
   dependencies:
     css-select "^2.1.0"
     css-tree "^1.0.0-alpha.39"