fix(helpers.js): adds platform check to extractColor (#31)

* fix(helpers.js): adds platform check to extractColor

* test(jest): adds jest.config.js n jest.mock.js to mock Platform

* test(eslint): adds jest env to eslintrc

* refactor(helpers): converts color to hex

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ['@react-native-community'],
+  env: {
+    jest: true
+  }
 };

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

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

lib/helpers.js

@@ -10,15 +10,15 @@
 import Color from 'art/core/color';
 import Transform from 'art/core/transform';
 import type {
-  OpacityProps,
-  TransformProps,
-  ColorType,
-  StrokeJoin,
-  StrokeCap,
-  Brush,
   Alignment,
+  Brush,
+  ColorType,
   Font,
   GradientStops,
+  OpacityProps,
+  StrokeCap,
+  StrokeJoin,
+  TransformProps,
 } from './types';
 
 export function childrenAsString(children?: string | Array<string>) {
@@ -78,7 +78,7 @@ export function extractColor(color?: ColorType) {
     return null;
   }
   const c = new Color(color);
-  return [c.red / 255, c.green / 255, c.blue / 255, c.alpha];
+  return c.toHEX();
 }
 
 export function extractStrokeJoin(strokeJoin?: StrokeJoin) {