refactor(android): updates implementation of stroke

android/src/main/java/com/reactnativecommunity/art/ARTShapeShadowNode.java

@@ -51,7 +51,7 @@ public class ARTShapeShadowNode extends ARTVirtualNode {
   private static final int COLOR_TYPE_PATTERN = 3;
 
   protected @Nullable Path mPath;
-  private @Nullable float[] mStrokeColor;
+  private @Nullable String mStrokeColor;
   private @Nullable float[] mBrushData;
   private @Nullable float[] mStrokeDash;
   private float mStrokeWidth = 1;
@@ -68,8 +68,8 @@ public void setShapePath(@Nullable ReadableArray shapePath) {
   }
 
   @ReactProp(name = "stroke")
-  public void setStroke(@Nullable ReadableArray strokeColors) {
-    mStrokeColor = PropHelper.toFloatArray(strokeColors);
+  public void setStroke(@Nullable String strokeColors) {
+    mStrokeColor = strokeColors;
     markUpdated();
   }
 
@@ -128,7 +128,7 @@ public void draw(Canvas canvas, Paint paint, float opacity) {
    * if the stroke should be drawn, {@code false} if not.
    */
   protected boolean setupStrokePaint(Paint paint, float opacity) {
-    if (mStrokeWidth == 0 || mStrokeColor == null || mStrokeColor.length == 0) {
+    if (mStrokeWidth == 0 || mStrokeColor == null) {
       return false;
     }
     paint.reset();
@@ -163,11 +163,7 @@ protected boolean setupStrokePaint(Paint paint, float opacity) {
             "strokeJoin " + mStrokeJoin + " unrecognized");
     }
     paint.setStrokeWidth(mStrokeWidth * mScale);
-    paint.setARGB(
-        (int) (mStrokeColor.length > 3 ? mStrokeColor[3] * opacity * 255 : opacity * 255),
-        (int) (mStrokeColor[0] * 255),
-        (int) (mStrokeColor[1] * 255),
-        (int) (mStrokeColor[2] * 255));
+    paint.setColor(Color.parseColor(mStrokeColor));
     if (mStrokeDash != null && mStrokeDash.length > 0) {
       paint.setPathEffect(new DashPathEffect(mStrokeDash, 0));
     }

example/components/Heart.js

@@ -32,16 +32,12 @@ export default function Heart() {
       width={surfaceDimensions}
       height={surfaceDimensions / 2}
       style={styles.surface}>
-      <Group
-        x={surfaceDimensions / 2 - 50}
-        y={surfaceDimensions / 4 - 50}
-        visible={true}>
+      <Group x={surfaceDimensions / 2 - 50} y={surfaceDimensions / 4 - 50}>
         <Shape
           d={HEART_SHAPE}
           strokeWidth={5}
           stroke={'#00ff00'}
           fill={gradient}
-          visible={true}
         />
       </Group>
     </Surface>

lib/Shape.js

@@ -14,7 +14,6 @@ import {
   extractTransform,
   extractOpacity,
   childrenAsString,
-  extractColor,
   extractStrokeJoin,
   extractStrokeCap,
   extractBrush,
@@ -58,7 +57,7 @@ export default class Shape extends React.Component<ShapeProps> {
       <NativeShape
         fill={extractBrush(props.fill, props)}
         opacity={extractOpacity(props)}
-        stroke={extractColor(props.stroke)}
+        stroke={props.stroke}
         strokeCap={extractStrokeCap(props.strokeCap)}
         strokeDash={props.strokeDash || null}
         strokeJoin={extractStrokeJoin(props.strokeJoin)}

lib/Text.js

@@ -11,24 +11,23 @@ import * as React from 'react';
 import Path from './ARTSerializablePath';
 import {NativeText} from './nativeComponents';
 import {
+  childrenAsString,
+  extractAlignment,
   extractBrush,
+  extractFontAndLines,
   extractOpacity,
-  extractColor,
   extractStrokeCap,
   extractStrokeJoin,
   extractTransform,
-  extractAlignment,
-  childrenAsString,
-  extractFontAndLines,
 } from './helpers';
 import type {
-  TransformProps,
-  OpacityProps,
   Alignment,
   Brush,
+  Font,
+  OpacityProps,
   StrokeCap,
   StrokeJoin,
-  Font,
+  TransformProps,
 } from './types';
 
 export type TextProps = TransformProps &
@@ -68,7 +67,7 @@ export default class Text extends React.Component<TextProps> {
       <NativeText
         fill={extractBrush(props.fill, props)}
         opacity={extractOpacity(props)}
-        stroke={extractColor(props.stroke)}
+        stroke={props.stroke}
         strokeCap={extractStrokeCap(props.strokeCap)}
         strokeDash={props.strokeDash || null}
         strokeJoin={extractStrokeJoin(props.strokeJoin)}

lib/helpers.js

@@ -20,7 +20,6 @@ import type {
   Font,
   GradientStops,
 } from './types';
-import {Platform} from 'react-native';
 
 export function childrenAsString(children?: string | Array<string>) {
   if (!children) {
@@ -74,17 +73,6 @@ export function extractTransform(props: TransformProps): Array<number> {
   ];
 }
 
-export function extractColor(color?: ColorType) {
-  if (color == null) {
-    return null;
-  }
-  if (Platform.OS === 'ios') {
-    return color;
-  }
-  const c = new Color(color);
-  return [c.red / 255, c.green / 255, c.blue / 255, c.alpha];
-}
-
 export function extractStrokeJoin(strokeJoin?: StrokeJoin) {
   switch (strokeJoin) {
     case 'miter':

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-community/art",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "author": "@react-native-community",
   "homepage": "https://github.com/react-native-community/react-native-art",