Line markerEnd doesn't work on Android

[iphonic]

Simply trying to draw an arrow line using the following code

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Svg, { Defs, Line, Marker, Path } from "react-native-svg";
export default function App() {
  return (
     <Svg>
        <Defs>
          <Marker
            id="arrow"
            refX={0}
            refY={3}
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <Path d="M 0 0 L 6 3 L 0 6 z" fill={"red"} stroke={"red"} strokeWidth="2" />
          </Marker>
        </Defs>
        <Line
          x1={80}
          y1={80}
          x2={220}
          y2={220}
          stroke={"green"}
          strokeWidth="2"
          markerEnd="url(#arrow)"
        />
      </Svg>
  );
}

The above code draws a line with an arrow fine on iOS but doesn't work on Android at all, it draws a simple line in Android without the markerEnd.

Is this is a bug, or I am doing anything wrong?

Live example here https://snack.expo.dev/@vedexpo/d2ed3c

Thanks.

[iphonic]

@msand @magicismight Would you please look into it, it seems unnoticed. Thanks.

[iphonic]

I managed to solve this by drawing a dynamic arrowhead. Hope it helps someone.

import React, { Component } from 'react';
import Svg, { Line, Polygon } from 'react-native-svg';

export default class App extends Component {

drawHead(x0, y0, x1, y1, h, w){
    var L = Math.sqrt(Math.pow((x0 - x1),2)+Math.pow((y0 - y1),2));

    //first base point coordinates
    var base_x0 = x1 + (w/2) * (y1 - y0) / L;
    var base_y0 = y1 + (w/2) * (x0 - x1) / L;

    //second base point coordinates
    var base_x1 = x1 - (w/2) * (y1 - y0) / L;
    var base_y1 = y1 - (w/2) * (x0 - x1) / L;

    var dx=0
    var dy=0;
    var head_x=0;
    var head_y=0;

    if (x1 == x0){
        dx = 0;
        dy = h;
      if (y1 < y0){
          dy = -h
      }else{
          dy = h
      }
    }else{
      if (x1 < x0) {
          h = -h
      }
      var slope = (y1 - y0) / (x1 - x0)
      dx = h / Math.sqrt(1 + (slope^2))
      dy = dx * slope
    }

    //head_points
    head_x = x1 + dx;
    head_y = y1 + dy;

    return `${base_x0},${base_y0} ${base_x1},${base_y1} ${head_x},${head_y}`
}

  render(){
      var x1=50
      var y1=80
      var x2=150
      var y2=30

      var arrowPoints = this.drawHead(x1,y1,x2,y2,8,10)

      return (
        <Svg width={300} height={300}>
          <Line
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke={'green'}
            strokeWidth="2"
            markerEnd="url(#arrow)"
          />
          <Polygon
            points={arrowPoints}
            fill="green"
          />
        </Svg>
      );
  }
}

However the bug remains open, were looking to use markerEnd which could have saved my lot of time.

I have posted same solution in Stackoverflow

[Ahmed-Imam]

This works Perfect @iphonic but wondering if there is an easier to achieve this ?

[jankapunkt]

This is still an issue. Anyone knows why exactly markerEnd is not working on Android?

[WoLewicki]

It should be fixed with #1594. I will close this issue then. Feel free to comment here if something is wrong and we can always reopen it then.