react-native-wagmi-charts 2.0.1 → 2.1.0

package/lib/module/charts/line/ChartPath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","useSharedValue","withTiming","flattenChildren","LineChartDimensionsContext","LineChartPath","useLineChart","BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","createAnimatedComponent","LineChartPathContext","createContext","color","isInactive","isTransitionEnabled","LineChartPathWrapper","displayName","animationDuration","animationProps","children","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","absoluteFill"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Partial<Animated.WithTimingConfig>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<Animated.WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    const duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    return {\n      width: isActive.value\n        ? // on Web, <svg /> elements don't support negative widths\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n          Math.max(currentX.value, 0)\n        : withTiming(\n            inactiveWidth + widthOffset,\n            Object.assign({ duration }, props),\n            () => {\n              hasMountedAnimation.value = true;\n            }\n          ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["ChartPath.tsx"],"names":["React","StyleSheet","View","Svg","Animated","useAnimatedProps","useSharedValue","withTiming","flattenChildren","LineChartDimensionsContext","LineChartPath","useLineChart","BACKGROUND_COMPONENTS","FOREGROUND_COMPONENTS","AnimatedSVG","createAnimatedComponent","LineChartPathContext","createContext","color","isInactive","isTransitionEnabled","LineChartPathWrapper","displayName","animationDuration","animationProps","children","inactiveColor","width","strokeWidth","widthOffset","pathProps","showInactivePath","animateOnMount","mountAnimationDuration","mountAnimationProps","height","pathWidth","useContext","currentX","isActive","isMounted","hasMountedAnimation","useEffect","value","svgProps","shouldAnimateOnMount","inactiveWidth","duration","props","Math","max","Object","assign","viewSize","useMemo","backgroundChildren","foregroundChildren","iterableChildren","filter","child","includes","type","absoluteFill"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport Animated, {\n  useAnimatedProps,\n  useSharedValue,\n  withTiming,\n  WithTimingConfig,\n} from 'react-native-reanimated';\nimport flattenChildren from 'react-keyed-flatten-children';\n\nimport { LineChartDimensionsContext } from './Chart';\nimport { LineChartPath, LineChartPathProps } from './Path';\nimport { useLineChart } from './useLineChart';\n\nconst BACKGROUND_COMPONENTS = [\n  'LineChartHighlight',\n  'LineChartHorizontalLine',\n  'LineChartGradient',\n  'LineChartDot',\n];\nconst FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];\n\nconst AnimatedSVG = Animated.createAnimatedComponent(Svg);\n\nexport const LineChartPathContext = React.createContext({\n  color: '',\n  isInactive: false,\n  isTransitionEnabled: true,\n});\n\ntype LineChartPathWrapperProps = {\n  animationDuration?: number;\n  animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;\n  children?: React.ReactNode;\n  color?: string;\n  inactiveColor?: string;\n  width?: number;\n  widthOffset?: number;\n  pathProps?: Partial<LineChartPathProps>;\n  showInactivePath?: boolean;\n  animateOnMount?: 'foreground';\n  mountAnimationDuration?: number;\n  mountAnimationProps?: Partial<WithTimingConfig>;\n};\n\nLineChartPathWrapper.displayName = 'LineChartPathWrapper';\n\nexport function LineChartPathWrapper({\n  animationDuration = 300,\n  animationProps = {},\n  children,\n  color = 'black',\n  inactiveColor,\n  width: strokeWidth = 3,\n  widthOffset = 20,\n  pathProps = {},\n  showInactivePath = true,\n  animateOnMount,\n  mountAnimationDuration = animationDuration,\n  mountAnimationProps = animationProps,\n}: LineChartPathWrapperProps) {\n  const { height, pathWidth, width } = React.useContext(\n    LineChartDimensionsContext\n  );\n  const { currentX, isActive } = useLineChart();\n  const isMounted = useSharedValue(false);\n  const hasMountedAnimation = useSharedValue(false);\n\n  React.useEffect(() => {\n    isMounted.value = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  ////////////////////////////////////////////////\n\n  const svgProps = useAnimatedProps(() => {\n    const shouldAnimateOnMount = animateOnMount === 'foreground';\n    const inactiveWidth =\n      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;\n\n    let duration =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationDuration\n        : animationDuration;\n    const props =\n      shouldAnimateOnMount && !hasMountedAnimation.value\n        ? mountAnimationProps\n        : animationProps;\n\n    if (isActive.value) {\n      duration = 0;\n    }\n\n    return {\n      width: withTiming(\n        isActive.value\n          ? // on Web, <svg /> elements don't support negative widths\n            // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904\n            Math.max(currentX.value, 0)\n          : inactiveWidth + widthOffset,\n        Object.assign({ duration }, props),\n        () => {\n          hasMountedAnimation.value = true;\n        }\n      ),\n    };\n  });\n\n  const viewSize = React.useMemo(() => ({ width, height }), [width, height]);\n\n  ////////////////////////////////////////////////\n\n  let backgroundChildren;\n  let foregroundChildren;\n  if (children) {\n    const iterableChildren = flattenChildren(children);\n    backgroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      BACKGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n    foregroundChildren = iterableChildren.filter((child) =>\n      // @ts-ignore\n      FOREGROUND_COMPONENTS.includes(child?.type?.displayName)\n    );\n  }\n\n  ////////////////////////////////////////////////\n\n  return (\n    <>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: showInactivePath,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={viewSize}>\n          <Svg width={width} height={height}>\n            <LineChartPath\n              color={color}\n              inactiveColor={inactiveColor}\n              width={strokeWidth}\n              {...pathProps}\n            />\n            {backgroundChildren}\n          </Svg>\n        </View>\n      </LineChartPathContext.Provider>\n      <LineChartPathContext.Provider\n        value={{\n          color,\n          isInactive: false,\n          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,\n        }}\n      >\n        <View style={StyleSheet.absoluteFill}>\n          <AnimatedSVG animatedProps={svgProps} height={height}>\n            <LineChartPath color={color} width={strokeWidth} {...pathProps} />\n            {foregroundChildren}\n          </AnimatedSVG>\n        </View>\n      </LineChartPathContext.Provider>\n    </>\n  );\n}\n"]}

package/lib/module/charts/line/HoverTrap/index.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const LineChartHoverTrap = () => /*#__PURE__*/React.createElement(React.Fragment, null);
+//# sourceMappingURL=index.js.map

package/lib/module/charts/line/HoverTrap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","LineChartHoverTrap"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,mBAAM,yCAAjC","sourcesContent":["import React from 'react';\n\nexport const LineChartHoverTrap = () => <></>;\n"]}

package/lib/module/charts/line/HoverTrap/index.web.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { parse } from 'react-native-redash';
+import { LineChartDimensionsContext } from '../Chart';
+import { useLineChart } from '../useLineChart'; // @ts-expect-error missing types
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+let isEnabled = false; // the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+
+if (canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled() {
+  return isEnabled;
+}
+
+export const LineChartHoverTrap = () => {
+  const {
+    width,
+    path
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    currentX,
+    currentIndex,
+    isActive,
+    data
+  } = useLineChart();
+  const parsedPath = React.useMemo(() => path ? parse(path) : undefined, [path]);
+  const onMouseMove = React.useCallback(({
+    x
+  }) => {
+    if (isHoverEnabled()) {
+      if (parsedPath) {
+        const boundedX = Math.min(x, width);
+        isActive.value = true;
+        currentX.value = boundedX; // on Web, we could drag the cursor to be negative, breaking it
+        // so we clamp the index at 0 to fix it
+        // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+
+        const minIndex = 0;
+        const boundedIndex = Math.max(minIndex, Math.round(boundedX / width / (1 / (data.length - 1))));
+        currentIndex.value = boundedIndex;
+      }
+    } else {
+      isActive.value = false;
+      currentIndex.value = -1;
+    }
+  }, [currentIndex, currentX, data.length, isActive, parsedPath, width]);
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill // @ts-expect-error mouse move event
+    ,
+    onMouseMove: React.useCallback( // eslint-disable-next-line no-undef
+    e => {
+      let rect = e.currentTarget.getBoundingClientRect();
+      let x = e.clientX - rect.left; // x position within the element.
+
+      onMouseMove({
+        x
+      });
+    }, [onMouseMove]),
+    onMouseLeave: onMouseLeave
+  });
+};
+//# sourceMappingURL=index.web.js.map

package/lib/module/charts/line/HoverTrap/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":["React","View","StyleSheet","parse","LineChartDimensionsContext","useLineChart","canUseDOM","isEnabled","HOVER_THRESHOLD_MS","lastTouchTimestamp","enableHover","Date","now","disableHover","document","addEventListener","isHoverEnabled","LineChartHoverTrap","width","path","useContext","currentX","currentIndex","isActive","data","parsedPath","useMemo","undefined","onMouseMove","useCallback","x","boundedX","Math","min","value","minIndex","boundedIndex","max","round","length","onMouseLeave","absoluteFill","e","rect","currentTarget","getBoundingClientRect","clientX","left"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { parse } from 'react-native-redash';\n\nimport { LineChartDimensionsContext } from '../Chart';\nimport { useLineChart } from '../useLineChart';\n\n// @ts-expect-error missing types\nimport { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';\n\nlet isEnabled = false;\n\n// the following logic comes from the creator of react-native-web\n// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a\n// it's also used by MotiPressable's hover interactions\n// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx\nif (canUseDOM) {\n  /**\n   * Web browsers emulate mouse events (and hover states) after touch events.\n   * This code infers when the currently-in-use modality supports hover\n   * (including for multi-modality devices) and considers \"hover\" to be enabled\n   * if a mouse movement occurs more than 1 second after the last touch event.\n   * This threshold is long enough to account for longer delays between the\n   * browser firing touch and mouse events on low-powered devices.\n   */\n  const HOVER_THRESHOLD_MS = 1000;\n  let lastTouchTimestamp = 0;\n\n  function enableHover() {\n    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {\n      return;\n    }\n    isEnabled = true;\n  }\n\n  function disableHover() {\n    lastTouchTimestamp = Date.now();\n    if (isEnabled) {\n      isEnabled = false;\n    }\n  }\n\n  document.addEventListener('touchstart', disableHover, true);\n  document.addEventListener('touchmove', disableHover, true);\n  document.addEventListener('mousemove', enableHover, true);\n}\n\nfunction isHoverEnabled(): boolean {\n  return isEnabled;\n}\n\nexport const LineChartHoverTrap = () => {\n  const { width, path } = React.useContext(LineChartDimensionsContext);\n  const { currentX, currentIndex, isActive, data } = useLineChart();\n\n  const parsedPath = React.useMemo(\n    () => (path ? parse(path) : undefined),\n    [path]\n  );\n\n  const onMouseMove = React.useCallback(\n    ({ x }: { x: number }) => {\n      if (isHoverEnabled()) {\n        if (parsedPath) {\n          const boundedX = Math.min(x, width);\n          isActive.value = true;\n          currentX.value = boundedX;\n\n          // on Web, we could drag the cursor to be negative, breaking it\n          // so we clamp the index at 0 to fix it\n          // https://github.com/coinjar/react-native-wagmi-charts/issues/24\n          const minIndex = 0;\n          const boundedIndex = Math.max(\n            minIndex,\n            Math.round(boundedX / width / (1 / (data.length - 1)))\n          );\n\n          currentIndex.value = boundedIndex;\n        }\n      } else {\n        isActive.value = false;\n        currentIndex.value = -1;\n      }\n    },\n    [currentIndex, currentX, data.length, isActive, parsedPath, width]\n  );\n\n  const onMouseLeave = React.useCallback(() => {\n    isActive.value = false;\n    currentIndex.value = -1;\n  }, [currentIndex, isActive]);\n\n  return (\n    <View\n      style={StyleSheet.absoluteFill}\n      // @ts-expect-error mouse move event\n      onMouseMove={React.useCallback(\n        // eslint-disable-next-line no-undef\n        (e: React.MouseEvent<HTMLElement>) => {\n          let rect = e.currentTarget.getBoundingClientRect();\n          let x = e.clientX - rect.left; // x position within the element.\n\n          onMouseMove({ x });\n        },\n        [onMouseMove]\n      )}\n      onMouseLeave={onMouseLeave}\n    />\n  );\n};\n"]}

package/lib/module/charts/line/index.js

@@ -15,6 +15,7 @@ import { LineChartDatetimeText } from './DatetimeText';
 import { useLineChartDatetime } from './useDatetime';
 import { useLineChartPrice } from './usePrice';
 import { useLineChart } from './useLineChart';
+import { LineChartHoverTrap } from '../line/HoverTrap';
 export * from './Chart';
 export * from './ChartPath';
 export * from './Highlight';
@@ -49,6 +50,7 @@ export const LineChart = Object.assign(_LineChart, {
   DatetimeText: LineChartDatetimeText,
   useDatetime: useLineChartDatetime,
   usePrice: useLineChartPrice,
-  useChart: useLineChart
+  useChart: useLineChart,
+  HoverTrap: LineChartHoverTrap
 });
 //# sourceMappingURL=index.js.map

package/lib/module/charts/line/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["LineChart","_LineChart","LineChartPathWrapper","LineChartHighlight","LineChartProvider","LineChartCursor","LineChartCursorCrosshair","LineChartCursorLine","LineChartDot","LineChartGradient","LineChartGroup","LineChartHorizontalLine","LineChartTooltip","LineChartPriceText","LineChartDatetimeText","useLineChartDatetime","useLineChartPrice","useLineChart","Object","assign","Chart","Dot","Path","Cursor","CursorCrosshair","CursorLine","Gradient","Group","Highlight","HorizontalLine","Tooltip","Provider","PriceText","DatetimeText","useDatetime","usePrice","useChart"],"mappings":"AAAA,SAASA,SAAS,IAAIC,UAAtB,QAAwC,SAAxC;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,SAASC,kBAAT,QAAmC,aAAnC;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,YAAT,QAA6B,OAA7B;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,cAAT,QAA+B,SAA/B;AACA,SAASC,uBAAT,QAAwC,kBAAxC;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,kBAAT,QAAmC,aAAnC;AACA,SAASC,qBAAT,QAAsC,gBAAtC;AACA,SAASC,oBAAT,QAAqC,eAArC;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,cAAc,SAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,mBAAd;AACA,cAAc,cAAd;AACA,cAAc,OAAd;AACA,cAAc,YAAd;AACA,cAAc,WAAd;AACA,cAAc,gBAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AAEA,OAAO,MAAMjB,SAAS,GAAGkB,MAAM,CAACC,MAAP,CAAclB,UAAd,EAA0B;AACjDmB,EAAAA,KAAK,EAAEnB,UAD0C;AAEjDoB,EAAAA,GAAG,EAAEb,YAF4C;AAGjDc,EAAAA,IAAI,EAAEpB,oBAH2C;AAIjDqB,EAAAA,MAAM,EAAElB,eAJyC;AAKjDmB,EAAAA,eAAe,EAAElB,wBALgC;AAMjDmB,EAAAA,UAAU,EAAElB,mBANqC;AAOjDmB,EAAAA,QAAQ,EAAEjB,iBAPuC;AAQjDkB,EAAAA,KAAK,EAAEjB,cAR0C;AASjDkB,EAAAA,SAAS,EAAEzB,kBATsC;AAUjD0B,EAAAA,cAAc,EAAElB,uBAViC;AAWjDmB,EAAAA,OAAO,EAAElB,gBAXwC;AAYjDmB,EAAAA,QAAQ,EAAE3B,iBAZuC;AAajD4B,EAAAA,SAAS,EAAEnB,kBAbsC;AAcjDoB,EAAAA,YAAY,EAAEnB,qBAdmC;AAejDoB,EAAAA,WAAW,EAAEnB,oBAfoC;AAgBjDoB,EAAAA,QAAQ,EAAEnB,iBAhBuC;AAiBjDoB,EAAAA,QAAQ,EAAEnB;AAjBuC,CAA1B,CAAlB","sourcesContent":["import { LineChart as _LineChart } from './Chart';\nimport { LineChartPathWrapper } from './ChartPath';\nimport { LineChartHighlight } from './Highlight';\nimport { LineChartProvider } from './Context';\nimport { LineChartCursor } from './Cursor';\nimport { LineChartCursorCrosshair } from './CursorCrosshair';\nimport { LineChartCursorLine } from './CursorLine';\nimport { LineChartDot } from './Dot';\nimport { LineChartGradient } from './Gradient';\nimport { LineChartGroup } from './Group';\nimport { LineChartHorizontalLine } from './HorizontalLine';\nimport { LineChartTooltip } from './Tooltip';\nimport { LineChartPriceText } from './PriceText';\nimport { LineChartDatetimeText } from './DatetimeText';\nimport { useLineChartDatetime } from './useDatetime';\nimport { useLineChartPrice } from './usePrice';\nimport { useLineChart } from './useLineChart';\n\nexport * from './Chart';\nexport * from './ChartPath';\nexport * from './Highlight';\nexport * from './Context';\nexport * from './Cursor';\nexport * from './CursorCrosshair';\nexport * from './CursorLine';\nexport * from './Dot';\nexport * from './Gradient';\nexport * from './Tooltip';\nexport * from './DatetimeText';\nexport * from './Path';\nexport * from './PriceText';\nexport * from './useDatetime';\nexport * from './useLineChart';\nexport * from './usePrice';\nexport * from './types';\n\nexport const LineChart = Object.assign(_LineChart, {\n  Chart: _LineChart,\n  Dot: LineChartDot,\n  Path: LineChartPathWrapper,\n  Cursor: LineChartCursor,\n  CursorCrosshair: LineChartCursorCrosshair,\n  CursorLine: LineChartCursorLine,\n  Gradient: LineChartGradient,\n  Group: LineChartGroup,\n  Highlight: LineChartHighlight,\n  HorizontalLine: LineChartHorizontalLine,\n  Tooltip: LineChartTooltip,\n  Provider: LineChartProvider,\n  PriceText: LineChartPriceText,\n  DatetimeText: LineChartDatetimeText,\n  useDatetime: useLineChartDatetime,\n  usePrice: useLineChartPrice,\n  useChart: useLineChart,\n});\n"]}
+{"version":3,"sources":["index.ts"],"names":["LineChart","_LineChart","LineChartPathWrapper","LineChartHighlight","LineChartProvider","LineChartCursor","LineChartCursorCrosshair","LineChartCursorLine","LineChartDot","LineChartGradient","LineChartGroup","LineChartHorizontalLine","LineChartTooltip","LineChartPriceText","LineChartDatetimeText","useLineChartDatetime","useLineChartPrice","useLineChart","LineChartHoverTrap","Object","assign","Chart","Dot","Path","Cursor","CursorCrosshair","CursorLine","Gradient","Group","Highlight","HorizontalLine","Tooltip","Provider","PriceText","DatetimeText","useDatetime","usePrice","useChart","HoverTrap"],"mappings":"AAAA,SAASA,SAAS,IAAIC,UAAtB,QAAwC,SAAxC;AACA,SAASC,oBAAT,QAAqC,aAArC;AACA,SAASC,kBAAT,QAAmC,aAAnC;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,YAAT,QAA6B,OAA7B;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,cAAT,QAA+B,SAA/B;AACA,SAASC,uBAAT,QAAwC,kBAAxC;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,kBAAT,QAAmC,aAAnC;AACA,SAASC,qBAAT,QAAsC,gBAAtC;AACA,SAASC,oBAAT,QAAqC,eAArC;AACA,SAASC,iBAAT,QAAkC,YAAlC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,kBAAT,QAAmC,mBAAnC;AAEA,cAAc,SAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,mBAAd;AACA,cAAc,cAAd;AACA,cAAc,OAAd;AACA,cAAc,YAAd;AACA,cAAc,WAAd;AACA,cAAc,gBAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AAEA,OAAO,MAAMlB,SAAS,GAAGmB,MAAM,CAACC,MAAP,CAAcnB,UAAd,EAA0B;AACjDoB,EAAAA,KAAK,EAAEpB,UAD0C;AAEjDqB,EAAAA,GAAG,EAAEd,YAF4C;AAGjDe,EAAAA,IAAI,EAAErB,oBAH2C;AAIjDsB,EAAAA,MAAM,EAAEnB,eAJyC;AAKjDoB,EAAAA,eAAe,EAAEnB,wBALgC;AAMjDoB,EAAAA,UAAU,EAAEnB,mBANqC;AAOjDoB,EAAAA,QAAQ,EAAElB,iBAPuC;AAQjDmB,EAAAA,KAAK,EAAElB,cAR0C;AASjDmB,EAAAA,SAAS,EAAE1B,kBATsC;AAUjD2B,EAAAA,cAAc,EAAEnB,uBAViC;AAWjDoB,EAAAA,OAAO,EAAEnB,gBAXwC;AAYjDoB,EAAAA,QAAQ,EAAE5B,iBAZuC;AAajD6B,EAAAA,SAAS,EAAEpB,kBAbsC;AAcjDqB,EAAAA,YAAY,EAAEpB,qBAdmC;AAejDqB,EAAAA,WAAW,EAAEpB,oBAfoC;AAgBjDqB,EAAAA,QAAQ,EAAEpB,iBAhBuC;AAiBjDqB,EAAAA,QAAQ,EAAEpB,YAjBuC;AAkBjDqB,EAAAA,SAAS,EAAEpB;AAlBsC,CAA1B,CAAlB","sourcesContent":["import { LineChart as _LineChart } from './Chart';\nimport { LineChartPathWrapper } from './ChartPath';\nimport { LineChartHighlight } from './Highlight';\nimport { LineChartProvider } from './Context';\nimport { LineChartCursor } from './Cursor';\nimport { LineChartCursorCrosshair } from './CursorCrosshair';\nimport { LineChartCursorLine } from './CursorLine';\nimport { LineChartDot } from './Dot';\nimport { LineChartGradient } from './Gradient';\nimport { LineChartGroup } from './Group';\nimport { LineChartHorizontalLine } from './HorizontalLine';\nimport { LineChartTooltip } from './Tooltip';\nimport { LineChartPriceText } from './PriceText';\nimport { LineChartDatetimeText } from './DatetimeText';\nimport { useLineChartDatetime } from './useDatetime';\nimport { useLineChartPrice } from './usePrice';\nimport { useLineChart } from './useLineChart';\nimport { LineChartHoverTrap } from '../line/HoverTrap';\n\nexport * from './Chart';\nexport * from './ChartPath';\nexport * from './Highlight';\nexport * from './Context';\nexport * from './Cursor';\nexport * from './CursorCrosshair';\nexport * from './CursorLine';\nexport * from './Dot';\nexport * from './Gradient';\nexport * from './Tooltip';\nexport * from './DatetimeText';\nexport * from './Path';\nexport * from './PriceText';\nexport * from './useDatetime';\nexport * from './useLineChart';\nexport * from './usePrice';\nexport * from './types';\n\nexport const LineChart = Object.assign(_LineChart, {\n  Chart: _LineChart,\n  Dot: LineChartDot,\n  Path: LineChartPathWrapper,\n  Cursor: LineChartCursor,\n  CursorCrosshair: LineChartCursorCrosshair,\n  CursorLine: LineChartCursorLine,\n  Gradient: LineChartGradient,\n  Group: LineChartGroup,\n  Highlight: LineChartHighlight,\n  HorizontalLine: LineChartHorizontalLine,\n  Tooltip: LineChartTooltip,\n  Provider: LineChartProvider,\n  PriceText: LineChartPriceText,\n  DatetimeText: LineChartDatetimeText,\n  useDatetime: useLineChartDatetime,\n  usePrice: useLineChartPrice,\n  useChart: useLineChart,\n  HoverTrap: LineChartHoverTrap,\n});\n"]}

package/lib/module/components/AnimatedText.js

@@ -11,7 +11,7 @@ export const AnimatedText = ({
   text,
   style
 }) => {
-  const inputRef = React.useRef(null);
+  const inputRef = React.useRef(null); // eslint-disable-line @typescript-eslint/no-explicit-any
 
   if (Platform.OS === 'web') {
     // For some reason, the worklet reaction evaluates upfront regardless of any
@@ -23,10 +23,7 @@ export const AnimatedText = ({
       return text.value;
     }, (data, prevData) => {
       if (data !== prevData && inputRef.current) {
-        inputRef.current.setNativeProps({
-          value: data,
-          style
-        });
+        inputRef.current.value = data;
       }
     });
   }

package/lib/module/components/AnimatedText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedText.tsx"],"names":["React","Platform","StyleSheet","TextInput","Animated","useAnimatedProps","useAnimatedReaction","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","AnimatedText","style","inputRef","useRef","OS","value","data","prevData","current","setNativeProps","animatedProps","select","web","styles","create","color"],"mappings":"AAAA;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAA+D,cAA/D;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,mBAFF,QAGO,yBAHP;AAKAF,QAAQ,CAACG,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;AAOA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCP,SAAjC,CAA1B;AAEA,OAAO,MAAMQ,YAAY,GAAG,CAAC;AAAEH,EAAAA,IAAF;AAAQI,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGb,KAAK,CAACc,MAAN,CAAwB,IAAxB,CAAjB;;AAEA,MAAIb,QAAQ,CAACc,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACAT,IAAAA,mBAAmB,CACjB,MAAM;AACJ,aAAOE,IAAI,CAACQ,KAAZ;AACD,KAHgB,EAIjB,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBL,QAAQ,CAACM,OAAlC,EAA2C;AACzCN,QAAAA,QAAQ,CAACM,OAAT,CAAiBC,cAAjB,CAAgC;AAC9BJ,UAAAA,KAAK,EAAEC,IADuB;AAE9BL,UAAAA;AAF8B,SAAhC;AAID;AACF,KAXgB,CAAnB;AAaD;;AACD,QAAMS,aAAa,GAAGhB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLG,MAAAA,IAAI,EAAEA,IAAI,CAACQ,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqC,CAAtC;AAOA,sBACE,oBAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEf,QAAQ,CAACqB,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAEV;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEL,IAAI,CAACQ,KAJd;AAKE,IAAA,KAAK,EAAE,CAACQ,MAAM,CAAChB,IAAR,EAAcI,KAAd,CALT;AAME,IAAA,aAAa,EAAES;AANjB,IADF;AAUD,CAzCM;AA2CP,MAAMG,MAAM,GAAGtB,UAAU,CAACuB,MAAX,CAAkB;AAC/BjB,EAAAA,IAAI,EAAE;AACJkB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<TextInput>(null);\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.setNativeProps({\n            value: data,\n            style,\n          });\n        }\n      }\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}
+{"version":3,"sources":["AnimatedText.tsx"],"names":["React","Platform","StyleSheet","TextInput","Animated","useAnimatedProps","useAnimatedReaction","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","AnimatedText","style","inputRef","useRef","OS","value","data","prevData","current","animatedProps","select","web","styles","create","color"],"mappings":"AAAA;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAA+D,cAA/D;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,mBAFF,QAGO,yBAHP;AAKAF,QAAQ,CAACG,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;AAOA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCP,SAAjC,CAA1B;AAEA,OAAO,MAAMQ,YAAY,GAAG,CAAC;AAAEH,EAAAA,IAAF;AAAQI,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGb,KAAK,CAACc,MAAN,CAAkB,IAAlB,CAAjB,CADkE,CACxB;;AAE1C,MAAIb,QAAQ,CAACc,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACAT,IAAAA,mBAAmB,CACjB,MAAM;AACJ,aAAOE,IAAI,CAACQ,KAAZ;AACD,KAHgB,EAIjB,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBL,QAAQ,CAACM,OAAlC,EAA2C;AACzCN,QAAAA,QAAQ,CAACM,OAAT,CAAiBH,KAAjB,GAAyBC,IAAzB;AACD;AACF,KARgB,CAAnB;AAUD;;AACD,QAAMG,aAAa,GAAGf,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLG,MAAAA,IAAI,EAAEA,IAAI,CAACQ,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqC,CAAtC;AAOA,sBACE,oBAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEf,QAAQ,CAACoB,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAET;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEL,IAAI,CAACQ,KAJd;AAKE,IAAA,KAAK,EAAE,CAACO,MAAM,CAACf,IAAR,EAAcI,KAAd,CALT;AAME,IAAA,aAAa,EAAEQ;AANjB,IADF;AAUD,CAtCM;AAwCP,MAAMG,MAAM,GAAGrB,UAAU,CAACsB,MAAX,CAAkB;AAC/BhB,EAAAA,IAAI,EAAE;AACJiB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.value = data;\n        }\n      }\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}

package/lib/typescript/src/charts/candle/HoverTrap/index.web.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Animated from 'react-native-reanimated';
+import { WithTimingConfig } from 'react-native-reanimated';
 import { LineChartPathProps } from './Path';
 export declare const LineChartPathContext: React.Context<{
     color: string;
@@ -8,7 +8,7 @@ export declare const LineChartPathContext: React.Context<{
 }>;
 declare type LineChartPathWrapperProps = {
     animationDuration?: number;
-    animationProps?: Partial<Animated.WithTimingConfig>;
+    animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;
     children?: React.ReactNode;
     color?: string;
     inactiveColor?: string;
@@ -18,7 +18,7 @@ declare type LineChartPathWrapperProps = {
     showInactivePath?: boolean;
     animateOnMount?: 'foreground';
     mountAnimationDuration?: number;
-    mountAnimationProps?: Partial<Animated.WithTimingConfig>;
+    mountAnimationProps?: Partial<WithTimingConfig>;
 };
 export declare function LineChartPathWrapper({ animationDuration, animationProps, children, color, inactiveColor, width: strokeWidth, widthOffset, pathProps, showInactivePath, animateOnMount, mountAnimationDuration, mountAnimationProps, }: LineChartPathWrapperProps): JSX.Element;
 export declare namespace LineChartPathWrapper {

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

package/lib/typescript/src/charts/line/HoverTrap/index.web.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LineChartHoverTrap: () => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LineChart as _LineChart } from './Chart';
 import { LineChartPathWrapper } from './ChartPath';
 import { LineChartHighlight } from './Highlight';
@@ -50,4 +51,5 @@ export declare const LineChart: typeof _LineChart & {
     useDatetime: typeof useLineChartDatetime;
     usePrice: typeof useLineChartPrice;
     useChart: typeof useLineChart;
+    HoverTrap: () => JSX.Element;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -56,11 +56,11 @@
     "jest": "^27.0.6",
     "pod-install": "^0.1.24",
     "prettier": "^2.3.2",
-    "react": "^17.0.2",
-    "react-native": "^0.64.2",
+    "react": "17.0.1",
+    "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "2.2.4",
+    "react-native-gesture-handler": "^2.1.0",
+    "react-native-reanimated": "~2.3.1",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {

package/src/charts/candle/HoverTrap/index.web.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { parse } from 'react-native-redash';
+
+import { LineChartDimensionsContext } from '../../line/Chart';
+import { useLineChart } from '../../line/useLineChart';
+
+// @ts-expect-error missing types
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+let isEnabled = false;
+
+// the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+if (canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled(): boolean {
+  return isEnabled;
+}
+
+export const LineChartHoverTrap = () => {
+  const { width, path } = React.useContext(LineChartDimensionsContext);
+  const { currentX, currentIndex, isActive, data } = useLineChart();
+
+  const parsedPath = React.useMemo(
+    () => (path ? parse(path) : undefined),
+    [path]
+  );
+
+  const onMouseMove = React.useCallback(
+    ({ x }: { x: number }) => {
+      if (isHoverEnabled()) {
+        if (parsedPath) {
+          const boundedX = Math.min(x, width);
+          isActive.value = true;
+          currentX.value = boundedX;
+
+          // on Web, we could drag the cursor to be negative, breaking it
+          // so we clamp the index at 0 to fix it
+          // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+          const minIndex = 0;
+          const boundedIndex = Math.max(
+            minIndex,
+            Math.round(boundedX / width / (1 / (data.length - 1)))
+          );
+
+          currentIndex.value = boundedIndex;
+        }
+      } else {
+        isActive.value = false;
+        currentIndex.value = -1;
+      }
+    },
+    [currentIndex, currentX, data.length, isActive, parsedPath, width]
+  );
+
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+
+  return (
+    <View
+      style={StyleSheet.absoluteFill}
+      // @ts-expect-error mouse move event
+      onMouseMove={React.useCallback(
+        // eslint-disable-next-line no-undef
+        (e: React.MouseEvent<HTMLElement>) => {
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left; // x position within the element.
+
+          onMouseMove({ x });
+        },
+        [onMouseMove]
+      )}
+      onMouseLeave={onMouseLeave}
+    />
+  );
+};

package/src/charts/line/ChartPath.tsx

@@ -5,6 +5,7 @@ import Animated, {
   useAnimatedProps,
   useSharedValue,
   withTiming,
+  WithTimingConfig,
 } from 'react-native-reanimated';
 import flattenChildren from 'react-keyed-flatten-children';
 
@@ -30,7 +31,7 @@ export const LineChartPathContext = React.createContext({
 
 type LineChartPathWrapperProps = {
   animationDuration?: number;
-  animationProps?: Partial<Animated.WithTimingConfig>;
+  animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;
   children?: React.ReactNode;
   color?: string;
   inactiveColor?: string;
@@ -40,7 +41,7 @@ type LineChartPathWrapperProps = {
   showInactivePath?: boolean;
   animateOnMount?: 'foreground';
   mountAnimationDuration?: number;
-  mountAnimationProps?: Partial<Animated.WithTimingConfig>;
+  mountAnimationProps?: Partial<WithTimingConfig>;
 };
 
 LineChartPathWrapper.displayName = 'LineChartPathWrapper';
@@ -78,7 +79,7 @@ export function LineChartPathWrapper({
     const inactiveWidth =
       !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
 
-    const duration =
+    let duration =
       shouldAnimateOnMount && !hasMountedAnimation.value
         ? mountAnimationDuration
         : animationDuration;
@@ -87,18 +88,22 @@ export function LineChartPathWrapper({
         ? mountAnimationProps
         : animationProps;
 
+    if (isActive.value) {
+      duration = 0;
+    }
+
     return {
-      width: isActive.value
-        ? // on Web, <svg /> elements don't support negative widths
-          // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-          Math.max(currentX.value, 0)
-        : withTiming(
-            inactiveWidth + widthOffset,
-            Object.assign({ duration }, props),
-            () => {
-              hasMountedAnimation.value = true;
-            }
-          ),
+      width: withTiming(
+        isActive.value
+          ? // on Web, <svg /> elements don't support negative widths
+            // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
+            Math.max(currentX.value, 0)
+          : inactiveWidth + widthOffset,
+        Object.assign({ duration }, props),
+        () => {
+          hasMountedAnimation.value = true;
+        }
+      ),
     };
   });
 

package/src/charts/line/HoverTrap/index.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const LineChartHoverTrap = () => <></>;

package/src/charts/line/HoverTrap/index.web.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { parse } from 'react-native-redash';
+
+import { LineChartDimensionsContext } from '../Chart';
+import { useLineChart } from '../useLineChart';
+
+// @ts-expect-error missing types
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+let isEnabled = false;
+
+// the following logic comes from the creator of react-native-web
+// https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
+// it's also used by MotiPressable's hover interactions
+// https://github.com/nandorojo/moti/blob/master/packages/interactions/src/pressable/hoverable.tsx
+if (canUseDOM) {
+  /**
+   * Web browsers emulate mouse events (and hover states) after touch events.
+   * This code infers when the currently-in-use modality supports hover
+   * (including for multi-modality devices) and considers "hover" to be enabled
+   * if a mouse movement occurs more than 1 second after the last touch event.
+   * This threshold is long enough to account for longer delays between the
+   * browser firing touch and mouse events on low-powered devices.
+   */
+  const HOVER_THRESHOLD_MS = 1000;
+  let lastTouchTimestamp = 0;
+
+  function enableHover() {
+    if (isEnabled || Date.now() - lastTouchTimestamp < HOVER_THRESHOLD_MS) {
+      return;
+    }
+    isEnabled = true;
+  }
+
+  function disableHover() {
+    lastTouchTimestamp = Date.now();
+    if (isEnabled) {
+      isEnabled = false;
+    }
+  }
+
+  document.addEventListener('touchstart', disableHover, true);
+  document.addEventListener('touchmove', disableHover, true);
+  document.addEventListener('mousemove', enableHover, true);
+}
+
+function isHoverEnabled(): boolean {
+  return isEnabled;
+}
+
+export const LineChartHoverTrap = () => {
+  const { width, path } = React.useContext(LineChartDimensionsContext);
+  const { currentX, currentIndex, isActive, data } = useLineChart();
+
+  const parsedPath = React.useMemo(
+    () => (path ? parse(path) : undefined),
+    [path]
+  );
+
+  const onMouseMove = React.useCallback(
+    ({ x }: { x: number }) => {
+      if (isHoverEnabled()) {
+        if (parsedPath) {
+          const boundedX = Math.min(x, width);
+          isActive.value = true;
+          currentX.value = boundedX;
+
+          // on Web, we could drag the cursor to be negative, breaking it
+          // so we clamp the index at 0 to fix it
+          // https://github.com/coinjar/react-native-wagmi-charts/issues/24
+          const minIndex = 0;
+          const boundedIndex = Math.max(
+            minIndex,
+            Math.round(boundedX / width / (1 / (data.length - 1)))
+          );
+
+          currentIndex.value = boundedIndex;
+        }
+      } else {
+        isActive.value = false;
+        currentIndex.value = -1;
+      }
+    },
+    [currentIndex, currentX, data.length, isActive, parsedPath, width]
+  );
+
+  const onMouseLeave = React.useCallback(() => {
+    isActive.value = false;
+    currentIndex.value = -1;
+  }, [currentIndex, isActive]);
+
+  return (
+    <View
+      style={StyleSheet.absoluteFill}
+      // @ts-expect-error mouse move event
+      onMouseMove={React.useCallback(
+        // eslint-disable-next-line no-undef
+        (e: React.MouseEvent<HTMLElement>) => {
+          let rect = e.currentTarget.getBoundingClientRect();
+          let x = e.clientX - rect.left; // x position within the element.
+
+          onMouseMove({ x });
+        },
+        [onMouseMove]
+      )}
+      onMouseLeave={onMouseLeave}
+    />
+  );
+};