Dashed line

[Angelk90]

Description

@wcandillon, @kimchouard :

How can I create a dashed lines like the one in the figure, without using Path and DashPathEffect.

[kimchouard]

I usually use the Skia.Path API to make dotted lines:

For example:

const dottedLinePath = Skia.Path.Make();
dottedLinePath.moveTo(xPos, dottedKeyYPosition);
dottedLinePath.lineTo(xPos, lastKeyYPosition);
dottedLinePath.dash(6, 8, 0);

Then load it with <Path />:

<Path
  path={ dottedLinePath }
  color={ connectingLineColor }
  style="stroke"
  strokeJoin="round"
  strokeWidth={connectingLineWidth}
  (...)
/>

[Angelk90]

@kimchouard: I wouldn't have wanted to use Skia.Path, however this is the solution at the moment: https://snack.expo.dev/07PWugq_VWSFQul4oHrcd

[davelsio]

Late reply for any passer-by. For a straight line, it is also possible to use <Line />, if you'd prefer to avoid Skia.Path.

Using the previous example, it could be as follows:

import {
  DashPathEffect,
  Line,
  vec,
} from '@shopify/react-native-skia';

type DashedLineProps = {
  lineColor: string;
  lineWidth: number;
}

export function DashedLine({ lineColor, lineWidth }: DashedLineProps) {
  // declare your start (p1x, p1y) and end (p2x, p2y) coords

  return (
    <Line
      p1={vec(p1x, p1y)}
      p2={vec(p2x, p2y)}
      color={lineColor}
      strokeJoin="round"
      strokeWidth={lineWidth}
      style="stroke"
    >
      <DashPathEffect intervals={[6, 8]} phase={0} />
    </Line>
  );
}