react-native-wagmi-charts 1.0.4 → 1.2.1

package/src/charts/candle/Crosshair.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { StyleSheet, ViewProps } from 'react-native';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import {
-  PanGestureHandler,
-  PanGestureHandlerProps,
+  GestureEvent,
+  LongPressGestureHandler,
+  LongPressGestureHandlerEventPayload,
+  LongPressGestureHandlerProps,
 } from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedGestureHandler,
@@ -19,25 +20,18 @@ import { CandlestickChartLine, CandlestickChartLineProps } from './Line';
 import { useCandlestickChart } from './useCandlestickChart';
 import { CandlestickChartCrosshairTooltipContext } from './CrosshairTooltip';
 
-type CandlestickChartCrosshairProps = PanGestureHandlerProps & {
+type CandlestickChartCrosshairProps = LongPressGestureHandlerProps & {
   color?: string;
   children?: React.ReactNode;
-  enableHapticFeedback?: boolean;
+  onCurrentXChange?: (value: number) => unknown;
   horizontalCrosshairProps?: Animated.AnimateProps<ViewProps>;
   verticalCrosshairProps?: Animated.AnimateProps<ViewProps>;
   lineProps?: Partial<CandlestickChartLineProps>;
 };
 
-function invokeHaptic() {
-  ReactNativeHapticFeedback.trigger('impactLight', {
-    enableVibrateFallback: true,
-    ignoreAndroidSystemSettings: false,
-  });
-}
-
 export function CandlestickChartCrosshair({
   color,
-  enableHapticFeedback = false,
+  onCurrentXChange,
   children,
   horizontalCrosshairProps = {},
   verticalCrosshairProps = {},
@@ -50,7 +44,9 @@ export function CandlestickChartCrosshair({
   const tooltipPosition = useSharedValue<'left' | 'right'>('left');
 
   const opacity = useSharedValue(0);
-  const onGestureEvent = useAnimatedGestureHandler({
+  const onGestureEvent = useAnimatedGestureHandler<
+    GestureEvent<LongPressGestureHandlerEventPayload>
+  >({
     onActive: ({ x, y }) => {
       const boundedX = x <= width - 1 ? x : width - 1;
       if (boundedX < 100) {
@@ -78,16 +74,20 @@ export function CandlestickChartCrosshair({
   }));
 
   useAnimatedReaction(
-    () => (enableHapticFeedback ? currentX.value : 0),
-    (data) => {
-      if (data !== 0) {
-        runOnJS(invokeHaptic)();
+    () => currentX.value,
+    (data, prevData) => {
+      if (data !== -1 && data !== prevData && onCurrentXChange) {
+        runOnJS(onCurrentXChange)(data);
       }
     }
   );
 
   return (
-    <PanGestureHandler minDist={0} onGestureEvent={onGestureEvent} {...props}>
+    <LongPressGestureHandler
+      minDurationMs={0}
+      onGestureEvent={onGestureEvent}
+      {...props}
+    >
       <Animated.View style={StyleSheet.absoluteFill}>
         <Animated.View
           style={[StyleSheet.absoluteFill, horizontal]}
@@ -107,6 +107,6 @@ export function CandlestickChartCrosshair({
           <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />
         </Animated.View>
       </Animated.View>
-    </PanGestureHandler>
+    </LongPressGestureHandler>
   );
 }

package/src/charts/candle/CrosshairTooltip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { StyleProp, TextStyle, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
@@ -34,8 +35,8 @@ export function CandlestickChartCrosshairTooltip({
   children,
   xGutter = 8,
   yGutter = 8,
-  tooltipTextProps = {},
-  textStyle = {},
+  tooltipTextProps,
+  textStyle,
   ...props
 }: CandlestickChartCrosshairTooltipProps) {
   const { width, height } = React.useContext(CandlestickChartDimensionsContext);
@@ -93,7 +94,7 @@ export function CandlestickChartCrosshairTooltip({
         {children || (
           <CandlestickChartPriceText
             {...tooltipTextProps}
-            style={[{ fontSize: 14 }, tooltipTextProps.style, textStyle]}
+            style={[styles.text, tooltipTextProps?.style, textStyle]}
           />
         )}
       </Animated.View>
@@ -101,10 +102,16 @@ export function CandlestickChartCrosshairTooltip({
         {children || (
           <CandlestickChartPriceText
             {...tooltipTextProps}
-            style={[{ fontSize: 14 }, tooltipTextProps.style, textStyle]}
+            style={[styles.text, tooltipTextProps?.style, textStyle]}
           />
         )}
       </Animated.View>
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+  },
+});

package/src/charts/candle/DatetimeText.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { ReText } from 'react-native-redash';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 import { useCandlestickChartDatetime } from './useDatetime';
+import type { TFormatterFn } from 'react-native-wagmi-charts';
+import { AnimatedText } from '../../components/AnimatedText';
 
 type CandlestickChartPriceTextProps = {
   locale?: string;
   options?: { [key: string]: string };
-  format?: any;
+  format?: TFormatterFn<number>;
   variant?: 'formatted' | 'value';
   style?: Animated.AnimateProps<RNTextProps>['style'];
 };
@@ -18,8 +19,8 @@ export function CandlestickChartDatetimeText({
   options,
   format,
   variant = 'formatted',
-  ...props
+  style,
 }: CandlestickChartPriceTextProps) {
   const datetime = useCandlestickChartDatetime({ format, locale, options });
-  return <ReText text={datetime[variant]} {...props} />;
+  return <AnimatedText text={datetime[variant]} style={style} />;
 }

package/src/charts/candle/Line.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import Svg, { Line as SVGLine, LineProps } from 'react-native-svg';
 
-export type CandlestickChartLineProps = LineProps & {
+export type CandlestickChartLineProps = Omit<LineProps, 'x' | 'y'> & {
   color?: string;
   x: number;
   y: number;

package/src/charts/candle/PriceText.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { ReText } from 'react-native-redash';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
-import type { TPriceType } from './types';
+import type { TFormatterFn, TPriceType } from './types';
 
 import { useCandlestickChartPrice } from './usePrice';
+import { AnimatedText } from '../../components/AnimatedText';
 
 export type CandlestickChartPriceTextProps = {
-  format?: any;
+  format?: TFormatterFn<string>;
   precision?: number;
   variant?: 'formatted' | 'value';
   type?: TPriceType;
@@ -19,8 +19,8 @@ export function CandlestickChartPriceText({
   precision = 2,
   variant = 'formatted',
   type = 'crosshair',
-  ...props
+  style,
 }: CandlestickChartPriceTextProps) {
   const price = useCandlestickChartPrice({ format, precision, type });
-  return <ReText text={price[variant]} {...props} />;
+  return <AnimatedText text={price[variant]} style={style} />;
 }

package/src/charts/candle/types.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type Animated from 'react-native-reanimated';
 
 export type TCandle = {
@@ -8,7 +9,7 @@ export type TCandle = {
   close: number;
 };
 export type TData = Array<TCandle>;
-export type TDomain = [number, number];
+export type TDomain = [min: number, max: number];
 export type TContext = {
   currentX: Animated.SharedValue<number>;
   currentY: Animated.SharedValue<number>;
@@ -17,7 +18,14 @@ export type TContext = {
   height: number;
   domain: TDomain;
   step: number;
-  setWidth: any;
-  setHeight: any;
+  setWidth: React.Dispatch<React.SetStateAction<number>>;
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
 };
 export type TPriceType = 'crosshair' | 'open' | 'close' | 'low' | 'high';
+export type TFormatterFn<T> = ({
+  value,
+  formatted,
+}: {
+  value: T;
+  formatted: string;
+}) => string;

package/src/charts/candle/useCandleData.ts

@@ -1,8 +1,9 @@
-import { useDerivedValue } from 'react-native-reanimated';
+import Animated, { useDerivedValue } from 'react-native-reanimated';
+import type { TCandle } from './types';
 
 import { useCandlestickChart } from './useCandlestickChart';
 
-export function useCandleData() {
+export function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {
   const { currentX, data, step } = useCandlestickChart();
 
   const candle = useDerivedValue(() => {

package/src/charts/candle/useCandlestickChart.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import { CandlestickChartContext } from './Context';
+import type { TContext } from './types';
 
-export function useCandlestickChart() {
+export function useCandlestickChart(): TContext {
   return React.useContext(CandlestickChartContext);
 }

package/src/charts/candle/useDatetime.ts

@@ -1,6 +1,7 @@
-import { useDerivedValue } from 'react-native-reanimated';
+import Animated, { useDerivedValue } from 'react-native-reanimated';
 
 import { formatDatetime } from '../../utils';
+import type { TFormatterFn } from './types';
 import { useCandleData } from './useCandleData';
 
 export function useCandlestickChartDatetime({
@@ -8,10 +9,13 @@ export function useCandlestickChartDatetime({
   locale,
   options,
 }: {
-  format?: any;
+  format?: TFormatterFn<number>;
   locale?: string;
   options?: { [key: string]: string };
-} = {}) {
+} = {}): {
+  value: Readonly<Animated.SharedValue<string>>;
+  formatted: Readonly<Animated.SharedValue<string>>;
+} {
   const candle = useCandleData();
 
   const timestamp = useDerivedValue(() => {

package/src/charts/candle/usePrice.ts

@@ -1,16 +1,23 @@
-import { useDerivedValue } from 'react-native-reanimated';
+import Animated, { useDerivedValue } from 'react-native-reanimated';
 
 import { formatPrice } from '../../utils';
 import { useCandlestickChart } from './useCandlestickChart';
 import { getPrice } from './utils';
-import type { TPriceType } from './types';
+import type { TFormatterFn, TPriceType } from './types';
 import { useCandleData } from './useCandleData';
 
 export function useCandlestickChartPrice({
   format,
   precision = 2,
   type = 'crosshair',
-}: { format?: any; precision?: number; type?: TPriceType } = {}) {
+}: {
+  format?: TFormatterFn<string>;
+  precision?: number;
+  type?: TPriceType;
+} = {}): {
+  value: Readonly<Animated.SharedValue<string>>;
+  formatted: Readonly<Animated.SharedValue<string>>;
+} {
   const { currentY, domain, height } = useCandlestickChart();
   const candle = useCandleData();
 

package/src/charts/candle/utils.ts

@@ -2,7 +2,7 @@ import { interpolate, Extrapolate } from 'react-native-reanimated';
 
 import type { TCandle, TDomain } from './types';
 
-export function getDomain(rows: TCandle[]): [number, number] {
+export function getDomain(rows: TCandle[]): [min: number, max: number] {
   'worklet';
   const values = rows.map(({ high, low }) => [high, low]).flat();
   const min = Math.min(...values);

package/src/charts/line/Chart.tsx

@@ -16,7 +16,7 @@ type LineChartProps = ViewProps & {
   yGutter?: number;
   width?: number;
   height?: number;
-  shape?: any;
+  shape?: string;
 };
 
 const { width: screenWidth } = Dimensions.get('window');

package/src/charts/line/Cursor.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
+  GestureEvent,
   LongPressGestureHandler,
+  LongPressGestureHandlerEventPayload,
   LongPressGestureHandlerProps,
 } from 'react-native-gesture-handler';
 import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';
@@ -10,7 +12,7 @@ import { getYForX, parse } from 'react-native-redash';
 import { LineChartDimensionsContext } from './Chart';
 import { useLineChart } from './useLineChart';
 
-type LineChartCursorProps = LongPressGestureHandlerProps & {
+export type LineChartCursorProps = LongPressGestureHandlerProps & {
   children: React.ReactNode;
   type: 'line' | 'crosshair';
 };
@@ -30,7 +32,9 @@ export function LineChartCursor({
     [path]
   );
 
-  const onGestureEvent = useAnimatedGestureHandler({
+  const onGestureEvent = useAnimatedGestureHandler<
+    GestureEvent<LongPressGestureHandlerEventPayload>
+  >({
     onActive: ({ x }) => {
       if (parsedPath) {
         const boundedX = x <= width ? x : width;
@@ -52,7 +56,7 @@ export function LineChartCursor({
     <CursorContext.Provider value={{ type }}>
       <LongPressGestureHandler
         minDurationMs={0}
-        onGestureEvent={onGestureEvent as any}
+        onGestureEvent={onGestureEvent}
         {...props}
       >
         <Animated.View style={StyleSheet.absoluteFill}>

package/src/charts/line/CursorCrosshair.tsx

@@ -5,10 +5,10 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { LineChartCursor } from './Cursor';
+import { LineChartCursor, LineChartCursorProps } from './Cursor';
 import { useLineChart } from './useLineChart';
 
-type LineChartCursorCrosshairProps = {
+type LineChartCursorCrosshairProps = Omit<LineChartCursorProps, 'type'> & {
   children?: React.ReactNode;
   color?: string;
   size?: number;
@@ -26,6 +26,7 @@ export function LineChartCursorCrosshair({
   crosshairWrapperProps = {},
   crosshairProps = {},
   crosshairOuterProps = {},
+  ...props
 }: LineChartCursorCrosshairProps) {
   const { currentX, currentY, isActive } = useLineChart();
 
@@ -42,7 +43,7 @@ export function LineChartCursorCrosshair({
   }));
 
   return (
-    <LineChartCursor type="crosshair">
+    <LineChartCursor type="crosshair" {...props}>
       <Animated.View
         {...crosshairWrapperProps}
         style={[

package/src/charts/line/CursorLine.tsx

@@ -30,7 +30,7 @@ export const LineChartCursorLine = ({
   return (
     <LineChartCursor type="line">
       <Animated.View style={vertical}>
-        <Svg style={StyleSheet.absoluteFill}>
+        <Svg style={styles.svg}>
           <SVGLine
             x1={0}
             y1={0}
@@ -47,3 +47,11 @@ export const LineChartCursorLine = ({
     </LineChartCursor>
   );
 };
+
+const styles = StyleSheet.create({
+  svg: {
+    ...StyleSheet.absoluteFillObject,
+    // height: 100% is required for <svg /> on web
+    height: '100%',
+  },
+});

package/src/charts/line/DatetimeText.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { ReText } from 'react-native-redash';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 import { useLineChartDatetime } from './useDatetime';
+import type { TFormatterFn } from 'react-native-wagmi-charts';
+import { AnimatedText } from '../../components/AnimatedText';
 
-type LineChartPriceTextProps = {
+type LineChartDatetimeProps = {
   locale?: string;
-  options?: { [key: string]: any };
-  format?: any;
+  options?: Intl.DateTimeFormatOptions;
+  format?: TFormatterFn<number>;
   variant?: 'formatted' | 'value';
   style?: Animated.AnimateProps<RNTextProps>['style'];
 };
@@ -18,8 +19,8 @@ export function LineChartDatetimeText({
   options,
   format,
   variant = 'formatted',
-  ...props
-}: LineChartPriceTextProps) {
+  style,
+}: LineChartDatetimeProps) {
   const datetime = useLineChartDatetime({ format, locale, options });
-  return <ReText text={datetime[variant]} {...props} />;
+  return <AnimatedText text={datetime[variant]} style={style} />;
 }

package/src/charts/line/Path.tsx

@@ -6,11 +6,10 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { Path, PathProps } from 'react-native-svg';
-import { mixPath, parse } from 'react-native-redash';
 
 import { LineChartDimensionsContext } from './Chart';
+import interpolatePath from './interpolatePath';
 import { usePrevious } from '../../utils';
-import { syncPaths } from './utils';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -18,12 +17,29 @@ export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
   color?: string;
   width?: number;
   isInactive?: boolean;
+  /**
+   * Default: `true`.
+   *
+   * If `false`, changes in the chart's path will not animate.
+   *
+   * While this use case is rare, it may be useful on web, where animations might not work as well.
+   *
+   * **Example**
+   *
+   * ```tsx
+   * <LineChart.Path
+   *   pathProps={{ isTransitionEnabled: Platform.OS !== 'web' }}
+   * />
+   * ```
+   */
+  isTransitionEnabled?: boolean;
 };
 
 export function LineChartPath({
   color = 'black',
   width = 3,
   isInactive,
+  isTransitionEnabled = true,
   ...props
 }: LineChartPathProps) {
   const { path } = React.useContext(LineChartDimensionsContext);
@@ -32,11 +48,7 @@ export function LineChartPath({
 
   const transition = useSharedValue(0);
 
-  const parsedPath = React.useMemo(
-    () => (path ? parse(path) : undefined),
-    [path]
-  );
-  const previousParsedPath = usePrevious(parsedPath);
+  const previousPath = usePrevious(path);
 
   useAnimatedReaction(
     () => {
@@ -52,21 +64,13 @@ export function LineChartPath({
   );
 
   const animatedProps = useAnimatedProps(() => {
-    if (!parsedPath) return { d: '' };
-
-    const {
-      parsedPath: newParsedPath,
-      previousParsedPath: newPreviousParsedPath,
-    } = syncPaths({
-      parsedPath,
-      previousParsedPath,
-    });
-
+    let d = path || '';
+    if (previousPath && isTransitionEnabled) {
+      const pathInterpolator = interpolatePath(previousPath, path, null);
+      d = pathInterpolator(transition.value);
+    }
     return {
-      d:
-        transition.value === 1
-          ? path
-          : mixPath(transition.value, newPreviousParsedPath, newParsedPath),
+      d,
     };
   });
 

package/src/charts/line/PriceText.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { ReText } from 'react-native-redash';
 import type { TextProps as RNTextProps } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 import { useLineChartPrice } from './usePrice';
+import type { TFormatterFn } from '../candle/types';
+import { AnimatedText } from '../../components/AnimatedText';
 
 export type LineChartPriceTextProps = {
-  format?: any;
+  format?: TFormatterFn<string>;
   precision?: number;
   variant?: 'formatted' | 'value';
   style?: Animated.AnimateProps<RNTextProps>['style'];
@@ -16,8 +17,8 @@ export function LineChartPriceText({
   format,
   precision = 2,
   variant = 'formatted',
-  ...props
+  style,
 }: LineChartPriceTextProps) {
   const price = useLineChartPrice({ format, precision });
-  return <ReText text={price[variant]} {...props} />;
+  return <AnimatedText text={price[variant]} style={style} />;
 }