feat: strokeDasharray with Animated (#2089)

PR adding the proper handling of strokeDasharray prop for when used with Animated and Reanimated. Code based on #1464 by @bardliu, but with the newest state of the repository.
software-mansion · Jul 7, 2023 · 78aaffa · 78aaffa
1 parent 24dba65
commit 78aaffa
Show file tree

Hide file tree

Showing 40 changed files with 219 additions and 23 deletions.
diff --git a/TestsExample/App.js b/TestsExample/App.js
@@ -9,7 +9,8 @@ import Test1845 from './src/Test1845';
 import Test2080 from './src/Test2080';
 import PointerEventsBoxNone from './src/PointerEventsBoxNone';
 import Test2071 from './src/Test2071';
+import Test2089 from './src/Test2089';
 
 export default function App() {
-  return <Test1718 />;
+  return <ColorTest />;
 }
diff --git a/TestsExample/src/Test2089.tsx b/TestsExample/src/Test2089.tsx
@@ -0,0 +1,66 @@
+import React, {useEffect} from 'react';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  Easing,
+  withRepeat,
+  interpolate,
+  useDerivedValue,
+  useAnimatedProps,
+} from 'react-native-reanimated';
+import {Svg, Circle} from 'react-native-svg';
+
+export default () => {
+  const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+  const animatedValue = useSharedValue(0);
+  const timingAnimatedValue = useDerivedValue(() =>
+    withRepeat(
+      withTiming(animatedValue.value, {
+        duration: 1250,
+        easing: Easing.out(Easing.cubic),
+      }),
+      -1,
+    ),
+  );
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDasharray: [
+      interpolate(
+        timingAnimatedValue.value,
+        [0, 50, 100],
+        [8.1681408993, 40.8407044967, 8.1681408993],
+      ),
+      interpolate(
+        timingAnimatedValue.value,
+        [0, 50, 100],
+        [73.513268094, 40.8407045967, 73.513268094],
+      ),
+    ],
+  }));
+
+  useEffect(() => {
+    animatedValue.value = 100;
+  }, []);
+
+  return (
+    <Animated.View
+      style={{
+        flex: 1,
+        paddingTop: 200,
+        justifyContent: 'center',
+        alignContent: 'center',
+      }}>
+      <Svg>
+        <AnimatedCircle
+          cx="15"
+          cy="15"
+          r="13"
+          stroke="red"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          animatedProps={animatedProps}
+          fill="none"
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/android/src/main/java/com/horcrux/svg/RenderableView.java
@@ -266,6 +266,28 @@ public void setStrokeDasharray(@Nullable ReadableArray strokeDasharray) {
     invalidate();
   }
 
+  public void setStrokeDasharray(@Nullable String strokeDasharray) {
+    if (strokeDasharray != null) {
+      String stringValue = strokeDasharray.trim();
+      stringValue = stringValue.replaceAll(",", " ");
+      String[] strings = stringValue.split(" ");
+      ArrayList<SVGLength> list = new ArrayList<>(strings.length);
+      for (String length : strings) {
+        list.add(new SVGLength(length));
+      }
+      this.strokeDasharray = new SVGLength[Math.max(list.size(), 2)];
+      for (int i = 0; i < list.size(); i++) {
+        this.strokeDasharray[i] = list.get(i);
+      }
+      if (list.size() == 1) {
+        this.strokeDasharray[1] = this.strokeDasharray[0];
+      }
+    } else {
+      this.strokeDasharray = null;
+    }
+    invalidate();
+  }
+
   public void setStrokeDashoffset(float strokeDashoffset) {
     this.strokeDashoffset = strokeDashoffset * mScale;
     invalidate();

diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
@@ -2043,6 +2043,11 @@ public void setStrokeDasharray(T node, @Nullable ReadableArray strokeDasharray)
     node.setStrokeDasharray(strokeDasharray);
   }
 
+  @ReactProp(name = "strokeDasharray")
+  public void setStrokeDasharray(T node, @Nullable String strokeDasharray) {
+    node.setStrokeDasharray(strokeDasharray);
+  }
+
   @ReactProp(name = "strokeDashoffset")
   public void setStrokeDashoffset(T node, float strokeDashoffset) {
     node.setStrokeDashoffset(strokeDashoffset);

diff --git a/android/src/main/java/com/horcrux/svg/SVGLength.java b/android/src/main/java/com/horcrux/svg/SVGLength.java
@@ -33,7 +33,7 @@ private SVGLength() {
     unit = UnitType.NUMBER;
   }
 
-  private SVGLength(String length) {
+  SVGLength(String length) {
     length = length.trim();
     int stringLength = length.length();
     int percentIndex = stringLength - 1;
@@ -143,8 +143,13 @@ static ArrayList<SVGLength> arrayFrom(Dynamic dynamic) {
         }
       case String:
         {
-          ArrayList<SVGLength> list = new ArrayList<>(1);
-          list.add(new SVGLength(dynamic.asString()));
+          String stringValue = dynamic.asString().trim();
+          stringValue = stringValue.replaceAll(",", " ");
+          String[] strings = stringValue.split(" ");
+          ArrayList<SVGLength> list = new ArrayList<>(strings.length);
+          for (String length : strings) {
+            list.add(new SVGLength(length));
+          }
           return list;
         }
       default:

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGCircleManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGClipPathManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGEllipseManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/...oid/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java b/...oid/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/...id/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java b/...id/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGForeignObjectManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGGroupManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGImageManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGLineManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGMarkerManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGMaskManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGPathManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGPatternManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java
@@ -90,7 +90,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
         mViewManager.setStrokeLinejoin(view, value == null ? 0 : ((Double) value).intValue());
         break;
       case "strokeDasharray":
-        mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        if (value instanceof String) {
+          mViewManager.setStrokeDasharray(view, (String) value);
+        } else if (value instanceof ReadableArray) {
+          mViewManager.setStrokeDasharray(view, (ReadableArray) value);
+        }
         break;
       case "strokeDashoffset":
         mViewManager.setStrokeDashoffset(view, value == null ? 0f : ((Double) value).floatValue());

diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java
@@ -37,6 +37,7 @@ public interface RNSVGRectManagerInterface<T extends View> {
   void setStrokeLinecap(T view, int value);
   void setStrokeLinejoin(T view, int value);
   void setStrokeDasharray(T view, @Nullable ReadableArray value);
+  void setStrokeDasharray(T view, @Nullable String value);  
   void setStrokeDashoffset(T view, float value);
   void setStrokeMiterlimit(T view, float value);
   void setVectorEffect(T view, int value);