How to retrieve container layout (width)

[inean]

Hi, i'm trying to compute a custom SVG Line element that extends to parent's width (a View). Right now its implemented by passing a hardcode value, but ideally, this will be computed based on container width,

interface LineDecoratorProps {
  lineWidth: number;
  stroke: number;
  dots: number[];
}

const LineDecorator: React.FC<LineDecoratorProps> = ({
  lineWidth,
  stroke,
  dots,
}) => {
  const dashDots = (dots: number, stroke: number): [string, number] => {
    const total_dots: number = dots * 2;
    return [
      Array.from({ length: total_dots }, (_, i) => stroke).join(','),
      total_dots * stroke,
    ];
  };
  const dashLine = (
    size: number,
    stroke: number,
    dots: [pattern: string, size: number][],
  ): string => {
    // Compute size of the required line
    const dots_length = dots.reduce((acc, [_, size]) => acc + size, 0);
    const line_segments = dots.length > 1 ? dots.length - 1 : 1;
    const line_diff = size - dots_length;
    const line_gap = (line_diff - (line_diff % line_segments)) / line_segments;

    return dots
      .reduce((acc, [pattern, _], i) => {
        acc.push(pattern);
        if (i < line_segments) {
          i % 2 != 0 && acc.push(stroke.toString());
          acc.push((line_gap - (i % 2 != 0 ? stroke - 1 : 0)).toString());
        }
        return acc;
      }, [] as string[])
      .join(',');
  };
  const dash = dashLine(
    lineWidth,
    stroke,
    dots.map((d) => dashDots(d, stroke)),
  );

  const custom = StyleSheet.create({
    line: {
      flex: '1 1 auto',
      height: `${stroke}`,
      paddingTop: 1,
      paddingBottom: 1,
    },
  });

  return (
    <Svg style={custom.line}>
      <Line
        x1="0"
        y1="0"
        x2={lineWidth}
        y2="0"
        strokeWidth={stroke}
        strokeDasharray={dash}
        stroke="black"
      />
    </Svg>
  );
};

Any idea if this can be achieved in react-pdf? thanks