react-native-svg - Marker / Line markerEnd doesn't work on Android-CodePudding

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 which clearly shows it doesn't work on Android.

Thanks.

CodePudding user response：

faced this very problem in my project, after countless hours of trying to find a solution and failing. I gave up and used Polygon. It works in both Android and IOS

<Polygon
        points="215,225, 225,215, 228,228"
        fill="green"
       
      />

modified your snack code, you can check it here