railbird-gql/component/custom-grid.tsx

import React from 'react';
import { G, Line } from 'react-native-svg';
import { colors } from '../styles';
import { ScaleFunction } from './graph-types';

interface CustomGridProps {
  y: ScaleFunction;
  ticks: Array<number>;
}

export const CustomGrid: React.FC<CustomGridProps> = ({ y, ticks }) => {
  const [firstTick, ...remainingTicks] = ticks;
  const dashArray = [1, 3];
  const strokeSolidWidth = 0.2;
  const strokeSolidColor = colors.bgBlack;
  const strokeDashWidth = 1;
  const strokeDashColor = colors.lightGrey;

  const renderLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => (
    <Line
      key={`line-${tick}`}
      x1="0%"
      x2="100%"
      y1={y(tick)}
      y2={y(tick)}
      stroke={stroke}
      strokeWidth={strokeWidth}
      strokeDasharray={dashArray}
    />
  );

  return (
    <G>
      {renderLine(firstTick, strokeSolidColor, strokeSolidWidth)}
      {remainingTicks.map((tick) => renderLine(tick, strokeDashColor, strokeDashWidth, dashArray))}
    </G>
  );
};