react-native-wagmi-charts 2.3.0 → 2.3.2

package/lib/typescript/src/charts/line/useCurrentY.d.ts

@@ -1,3 +1,4 @@
 export declare function useCurrentY(): Readonly<{
     value: number;
 }>;
+//# sourceMappingURL=useCurrentY.d.ts.map

package/lib/typescript/src/charts/line/useCurrentY.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurrentY.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/useCurrentY.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW;;GAc1B"}

package/lib/typescript/src/charts/line/useDatetime.d.ts

@@ -11,3 +11,4 @@ export declare function useLineChartDatetime({ format, locale, options, }?: {
         value: string;
     }>;
 };
+//# sourceMappingURL=useDatetime.d.ts.map

package/lib/typescript/src/charts/line/useDatetime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatetime.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/useDatetime.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,OAAO,GACR,GAAE;IACD,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;CACjC;;;;;;;EA4BL"}

package/lib/typescript/src/charts/line/useLineChart.d.ts

@@ -17,3 +17,4 @@ export declare function useLineChart(): {
     xLength: number;
     xDomain?: [number, number] | undefined;
 };
+//# sourceMappingURL=useLineChart.d.ts.map

package/lib/typescript/src/charts/line/useLineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLineChart.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/useLineChart.ts"],"names":[],"mappings":"AAMA,wBAAgB,YAAY;;;;;;;;;;;;;;;;;;EAY3B"}

package/lib/typescript/src/charts/line/usePrice.d.ts

@@ -11,3 +11,4 @@ export declare function useLineChartPrice({ format, precision, index, }?: {
         value: string;
     }>;
 };
+//# sourceMappingURL=usePrice.d.ts.map

package/lib/typescript/src/charts/line/usePrice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrice.d.ts","sourceRoot":"","sources":["../../../../../src/charts/line/usePrice.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAa,EACb,KAAK,GACN,GAAE;IAAE,MAAM,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO;;;;;;;EAuB5E"}

package/lib/typescript/src/charts/line/utils/getArea.d.ts

@@ -1,9 +1,11 @@
 import type { TLineChartData, YDomain } from '../types';
-export declare function getArea({ data, width, height, gutter, shape: _shape, yDomain, }: {
+export declare function getArea({ data, width, height, gutter, shape: _shape, yDomain, xDomain, }: {
     data: TLineChartData;
     width: number;
     height: number;
     gutter: number;
     shape?: unknown;
     yDomain: YDomain;
+    xDomain?: [number, number];
 }): string;
+//# sourceMappingURL=getArea.d.ts.map

package/lib/typescript/src/charts/line/utils/getArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getArea.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getArea.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKxD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,EACP,OAAO,GACR,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,MAAM,CAgBT"}

package/lib/typescript/src/charts/line/utils/getDomain.d.ts

@@ -1,2 +1,3 @@
 import type { TLineChartPoint } from '../types';
 export declare function getDomain(rows: TLineChartPoint[]): [number, number];
+//# sourceMappingURL=getDomain.d.ts.map

package/lib/typescript/src/charts/line/utils/getDomain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDomain.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getDomain.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,wBAAgB,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAInE"}

package/lib/typescript/src/charts/line/utils/getPath.d.ts

@@ -10,3 +10,4 @@ export declare function getPath({ data, from, to, width, height, gutter, shape:
     yDomain: YDomain;
     xDomain?: [number, number];
 }): string;
+//# sourceMappingURL=getPath.d.ts.map

package/lib/typescript/src/charts/line/utils/getPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPath.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getPath.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,EACP,OAAO,GACR,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,MAAM,CAsBT"}

package/lib/typescript/src/charts/line/utils/getXPositionForCurve.d.ts

@@ -0,0 +1,3 @@
+import type { Path } from 'react-native-redash';
+export declare function getXPositionForCurve(path: Path, index: number): number;
+//# sourceMappingURL=getXPositionForCurve.d.ts.map

package/lib/typescript/src/charts/line/utils/getXPositionForCurve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getXPositionForCurve.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/getXPositionForCurve.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEhD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAM7D"}

package/lib/typescript/src/charts/line/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './getDomain';
 export * from './getPath';
 export * from './interpolatePath';
 export * from './lineChartDataPropToArray';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/charts/line/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

package/lib/typescript/src/charts/line/utils/interpolatePath.d.ts

@@ -48,3 +48,4 @@ export declare function interpolatePathCommands(aCommandsInput: any, bCommandsIn
  * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
  */
 export declare function interpolatePath(a: any, b: any, excludeSegment: any): (t: any) => any;
+//# sourceMappingURL=interpolatePath.d.ts.map

package/lib/typescript/src/charts/line/utils/interpolatePath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolatePath.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/interpolatePath.ts"],"names":[],"mappings":"AA6IA;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,YAAY,KAAA,EAAE,UAAU,KAAA,EAAE,YAAY,KAAA,QAahE;AA8QD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,KAAA;;IAiCvC;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,KAAA,EACd,cAAc,KAAA,EACd,cAAc,KAAA,mBAsGf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,cAAc,KAAA,mBAuCnD"}

package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts

@@ -1,2 +1,3 @@
 import type { TLineChartData, TLineChartDataProp } from '../types';
 export declare function lineChartDataPropToArray(dataProp: TLineChartDataProp): TLineChartData;
+//# sourceMappingURL=lineChartDataPropToArray.d.ts.map

package/lib/typescript/src/charts/line/utils/lineChartDataPropToArray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartDataPropToArray.d.ts","sourceRoot":"","sources":["../../../../../../src/charts/line/utils/lineChartDataPropToArray.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnE,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,kBAAkB,GAC3B,cAAc,CAoBhB"}

package/lib/typescript/src/components/AnimatedText.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { TextProps as RNTextProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 interface AnimatedTextProps {
     text: Animated.SharedValue<string>;
     style?: Animated.AnimateProps<RNTextProps>['style'];
 }
-export declare const AnimatedText: ({ text, style }: AnimatedTextProps) => JSX.Element;
+export declare const AnimatedText: ({ text, style }: AnimatedTextProps) => React.JSX.Element;
 export {};
+//# sourceMappingURL=AnimatedText.d.ts.map

package/lib/typescript/src/components/AnimatedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedText.d.ts","sourceRoot":"","sources":["../../../../src/components/AnimatedText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE9E,OAAO,QAGN,MAAM,yBAAyB,CAAC;AAIjC,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC;CACrD;AAID,eAAO,MAAM,YAAY,oBAAqB,iBAAiB,sBAuC9D,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -2,3 +2,4 @@ export * from './charts/candle';
 export * from './charts/line';
 export * from './components/AnimatedText';
 export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC"}

package/lib/typescript/src/utils/formatDatetime.d.ts

@@ -6,3 +6,4 @@ export declare function formatDatetime({ value, locale, options, }: {
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
 }): string;
+//# sourceMappingURL=formatDatetime.d.ts.map

package/lib/typescript/src/utils/formatDatetime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatDatetime.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatDatetime.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAgB,EAChB,OAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;CACtC,UAIA"}

package/lib/typescript/src/utils/formatPrice.d.ts

@@ -6,3 +6,4 @@ export declare function formatPrice({ value: _value, defaultPrice: _defaultPrice
     defaultPrice?: string;
     precision?: number;
 }): string;
+//# sourceMappingURL=formatPrice.d.ts.map

package/lib/typescript/src/utils/formatPrice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatPrice.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatPrice.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,aAAkB,EAChC,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,UA4BA"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatDatetime';
 export * from './formatPrice';
 export * from './usePrevious';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/lib/typescript/src/utils/usePrevious.d.ts

@@ -1 +1,2 @@
 export declare function usePrevious<T>(value: T): T | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

package/lib/typescript/src/utils/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../../../src/utils/usePrevious.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,iBAUtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,17 +39,18 @@
     "d3-interpolate-path": "^2.2.3",
     "d3-scale": "^2",
     "d3-shape": "^3.0.1",
+    "d3-array": "^3.1.6",
     "react-keyed-flatten-children": "^1.3.0",
     "react-native-redash": "^16.1.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^12.0.4",
     "@react-native-community/eslint-config": "^3.0.0",
-    "@types/d3-array": "^3.0.4",
+    "@types/d3-array": "^3.0.5",
     "@types/d3-scale": "^4.0.3",
     "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.14",
-    "@types/react-native": "^0.64.12",
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.72.8",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -58,13 +59,13 @@
     "jest": "^27.0.6",
     "pod-install": "^0.1.24",
     "prettier": "^2.3.2",
-    "react": "17.0.1",
-    "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.18.1",
+    "react": "^18.2.0",
+    "react-native": "^0.72.8",
+    "react-native-builder-bob": "^0.23.2",
     "react-native-gesture-handler": "^2.1.0",
-    "react-native-reanimated": "~2.3.1",
+    "react-native-reanimated": "~3.3.0",
     "react-native-svg": "^12.1.1",
-    "typescript": "^4.3.5"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "*",

package/src/charts/candle/Candle.tsx

@@ -4,7 +4,6 @@ import Animated, {
   useAnimatedProps,
 } from 'react-native-reanimated';
 import {
-  Color,
   Line,
   LineProps,
   NumberProp,
@@ -14,6 +13,7 @@ import {
 
 import type { TCandle, TDomain } from './types';
 import { getY, getHeight } from './utils';
+import { ColorValue } from 'react-native';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 const AnimatedLine = Animated.createAnimatedComponent(Line);
@@ -41,7 +41,7 @@ export type CandlestickChartCandleProps = {
     y: NumberProp;
     width: NumberProp;
     height: NumberProp;
-    fill: Color;
+    fill: ColorValue;
     useAnimations: boolean;
   }) => React.ReactNode;
   renderLine?: ({
@@ -56,7 +56,7 @@ export type CandlestickChartCandleProps = {
     y1: NumberProp;
     x2: NumberProp;
     y2: NumberProp;
-    stroke: Color;
+    stroke: ColorValue;
     strokeWidth: NumberProp;
     useAnimations: boolean;
   }) => React.ReactNode;

package/src/charts/candle/CrosshairTooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StyleProp, TextStyle, ViewProps } from 'react-native';
+import type { LayoutChangeEvent, StyleProp, TextStyle, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedStyle,
@@ -49,7 +49,7 @@ export function CandlestickChartCrosshairTooltip({
   const elementWidth = useSharedValue(0);
 
   const handleLayout = React.useCallback(
-    (event) => {
+    (event: LayoutChangeEvent) => {
       elementHeight.value = event.nativeEvent.layout.height;
       elementWidth.value = event.nativeEvent.layout.width;
     },

package/src/charts/line/Chart.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 // @ts-ignore
 import * as d3Shape from 'd3-shape';
+
 import { Dimensions, StyleSheet, View, ViewProps } from 'react-native';
-import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
-
+import { Path, parse } from 'react-native-redash';
 import { getArea, getPath } from './utils';
-import { parse, Path } from 'react-native-redash';
+
+import { LineChartContext } from './Context';
 
 export const LineChartDimensionsContext = React.createContext({
   width: 0,
@@ -84,10 +85,11 @@ export function LineChart({
         gutter: yGutter,
         shape,
         yDomain,
+        xDomain,
       });
     }
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
 
   const dataLength = data.length;
   const parsedPath = React.useMemo(() => parse(path), [path]);

package/src/charts/line/Cursor.tsx

@@ -1,25 +1,26 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+} from 'react-native-reanimated';
 import {
   GestureEvent,
   LongPressGestureHandler,
   LongPressGestureHandlerEventPayload,
   LongPressGestureHandlerProps,
 } from 'react-native-gesture-handler';
-import Animated, {
-  runOnJS,
-  useAnimatedGestureHandler,
-} from 'react-native-reanimated';
 
 import { LineChartDimensionsContext } from './Chart';
-import { useLineChart } from './useLineChart';
-import { scaleLinear } from 'd3-scale';
+import { StyleSheet } from 'react-native';
 import { bisectCenter } from 'd3-array';
-import type { Path } from 'react-native-redash';
+import { scaleLinear } from 'd3-scale';
+import { useLineChart } from './useLineChart';
 
 export type LineChartCursorProps = LongPressGestureHandlerProps & {
   children: React.ReactNode;
   type: 'line' | 'crosshair';
+  // Does not work on web due to how the Cursor operates on web
   snapToPoint?: boolean;
 };
 
@@ -27,50 +28,6 @@ export const CursorContext = React.createContext({ type: '' });
 
 LineChartCursor.displayName = 'LineChartCursor';
 
-const linearScalePositionAndIndex = ({
-  timestamps,
-  width,
-  xToUpdate,
-  currentIndex,
-  xPosition,
-  path,
-  xDomain,
-}: {
-  timestamps: number[];
-  width: number;
-  xToUpdate: Animated.SharedValue<number>;
-  currentIndex: Animated.SharedValue<number>;
-  xPosition: number;
-  path: Path | undefined;
-  xDomain: [number, number] | undefined;
-}) => {
-  if (!path) {
-    return;
-  }
-
-  const domainArray = xDomain ?? [0, timestamps.length];
-
-  // Same scale as in /src/charts/line/utils/getPath.ts
-  const scaleX = scaleLinear().domain(domainArray).range([0, width]);
-
-  // Calculate a scaled timestamp for the current touch position
-  const xRelative = scaleX.invert(xPosition);
-
-  const closestIndex = bisectCenter(timestamps, xRelative);
-  const pathDataDelta = Math.abs(path.curves.length - timestamps.length); // sometimes there is a difference between data length and number of path curves.
-  const closestPathCurve = Math.max(
-    Math.min(bisectCenter(timestamps, xRelative), path.curves.length + 1) -
-      pathDataDelta,
-    0
-  );
-
-  const p0 = (closestIndex > 0 ? path.curves[closestPathCurve].to : path.move)
-    .x;
-  // Update values
-  currentIndex.value = closestIndex;
-  xToUpdate.value = p0;
-};
-
 export function LineChartCursor({
   children,
   snapToPoint,
@@ -81,17 +38,53 @@ export function LineChartCursor({
     LineChartDimensionsContext
   );
   const { currentX, currentIndex, isActive, data, xDomain } = useLineChart();
+  const xValues = React.useMemo(
+    () => data.map(({ timestamp }, i) => (xDomain ? timestamp : i)),
+    [data, xDomain]
+  );
+
+  // Same scale as in /src/charts/line/utils/getPath.ts
+  const scaleX = React.useMemo(() => {
+    const domainArray = xDomain ?? [0, xValues.length];
+    return scaleLinear().domain(domainArray).range([0, width]);
+  }, [width, xDomain, xValues.length]);
+
+  const linearScalePositionAndIndex = ({
+    xPosition,
+  }: {
+    xPosition: number;
+  }) => {
+    if (!parsedPath) {
+      return;
+    }
+
+    // Calculate a scaled timestamp for the current touch position
+    const xRelative = scaleX.invert(xPosition);
+
+    const closestIndex = bisectCenter(xValues, xRelative);
+    const pathDataDelta = Math.abs(parsedPath.curves.length - xValues.length); // sometimes there is a difference between data length and number of path curves.
+    const closestPathCurve = Math.max(
+      Math.min(closestIndex, parsedPath.curves.length + 1) - pathDataDelta,
+      0
+    );
+
+    const newXPosition = (
+      closestIndex > 0
+        ? parsedPath.curves[closestPathCurve].to
+        : parsedPath.move
+    ).x;
+    // Update values
+    currentIndex.value = closestIndex;
+    currentX.value = newXPosition;
+  };
 
   const onGestureEvent = useAnimatedGestureHandler<
     GestureEvent<LongPressGestureHandlerEventPayload>
   >({
     onActive: ({ x }) => {
       if (parsedPath) {
-        const boundedX = Math.max(0, x <= width ? x : width);
+        const xPosition = Math.max(0, x <= width ? x : width);
         isActive.value = true;
-        const xValues = data.map(({ timestamp }, i) =>
-          xDomain ? timestamp : i
-        );
 
         // on Web, we could drag the cursor to be negative, breaking it
         // so we clamp the index at 0 to fix it
@@ -99,22 +92,14 @@ export function LineChartCursor({
         const minIndex = 0;
         const boundedIndex = Math.max(
           minIndex,
-          Math.round(boundedX / width / (1 / (data.length - 1)))
+          Math.round(xPosition / width / (1 / (data.length - 1)))
         );
 
         if (snapToPoint) {
           // We have to run this on the JS thread unfortunately as the scaleLinear functions won't work on UI thread
-          runOnJS(linearScalePositionAndIndex)({
-            timestamps: xValues,
-            width,
-            xToUpdate: currentX,
-            currentIndex,
-            xPosition: boundedX,
-            path: parsedPath,
-            xDomain,
-          });
+          runOnJS(linearScalePositionAndIndex)({ xPosition });
         } else if (!snapToPoint) {
-          currentX.value = boundedX;
+          currentX.value = xPosition;
           currentIndex.value = boundedIndex;
         }
       }

package/src/charts/line/Dot.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import Animated, {
   Easing,
   useAnimatedProps,
@@ -8,10 +9,11 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { Circle, CircleProps } from 'react-native-svg';
-import { getYForX } from 'react-native-redash';
 
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
+import { getYForX } from 'react-native-redash';
 import { useLineChart } from './useLineChart';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -58,9 +60,7 @@ export function LineChartDot({
   outerSize = size * 4,
 }: LineChartDotProps) {
   const { isActive } = useLineChart();
-  const { parsedPath, pointWidth } = React.useContext(
-    LineChartDimensionsContext
-  );
+  const { parsedPath } = React.useContext(LineChartDimensionsContext);
 
   ////////////////////////////////////////////////////////////
 
@@ -72,10 +72,10 @@ export function LineChartDot({
 
   ////////////////////////////////////////////////////////////
 
-  const x = useDerivedValue(
-    () => withTiming(pointWidth * at),
-    [at, pointWidth]
-  );
+  const x = useDerivedValue(() => {
+    return withTiming(getXPositionForCurve(parsedPath, at));
+  }, [at, parsedPath]);
+
   const y = useDerivedValue(
     () => withTiming(getYForX(parsedPath!, x.value) || 0),
     [parsedPath, x]

package/src/charts/line/Gradient.tsx

@@ -52,6 +52,7 @@ export function LineChartGradient({
             y1="0"
             y2="100%"
           >
+            {/*@ts-ignore*/}
             {children}
           </LinearGradient>
         </Defs>

package/src/charts/line/HorizontalLine.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import Animated, {
   useAnimatedProps,
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { Line as SVGLine, LineProps } from 'react-native-svg';
-import { getYForX } from 'react-native-redash';
+import { LineProps, Line as SVGLine } from 'react-native-svg';
 
 import { LineChartDimensionsContext } from './Chart';
+import React from 'react';
+import { getXPositionForCurve } from './utils/getXPositionForCurve';
+import { getYForX } from 'react-native-redash';
 import { useLineChart } from './useLineChart';
 
 const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
@@ -53,7 +54,7 @@ export function LineChartHorizontalLine({
   at = { index: 0 },
   offsetY = 0,
 }: HorizontalLineProps) {
-  const { width, parsedPath, pointWidth, height, gutter } = React.useContext(
+  const { width, parsedPath, height, gutter } = React.useContext(
     LineChartDimensionsContext
   );
   const { yDomain } = useLineChart();
@@ -61,7 +62,8 @@ export function LineChartHorizontalLine({
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;
-      const yForX = getYForX(parsedPath!, pointWidth * index) || 0;
+      const yForX =
+        getYForX(parsedPath!, getXPositionForCurve(parsedPath, index)) || 0;
       return withTiming(yForX + offsetY);
     }
     /**
@@ -82,16 +84,7 @@ export function LineChartHorizontalLine({
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
 
     return withTiming(offsetTopPixels + offsetY);
-  }, [
-    at,
-    gutter,
-    height,
-    offsetY,
-    parsedPath,
-    pointWidth,
-    yDomain.max,
-    yDomain.min,
-  ]);
+  }, [at, gutter, height, offsetY, parsedPath, yDomain.max, yDomain.min]);
 
   const lineAnimatedProps = useAnimatedProps(
     () => ({