add custom-grid and mock code, add direnv to gitignore

component/custom-grid.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { G, Line } from 'react-native-svg';
+import * as scale from 'd3-scale'
+import { colors } from '../styles';
+
+type scaleFunction = (value: number) => number;
+
+interface CustomGridProps {
+  y: scaleFunction;
+  ticks: number[];
+}
+
+export const CustomGrid: React.FC = ({ y, ticks }: Partial<CustomGridProps>) => {
+  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>
+  );
+};