react-native-wagmi-charts/lib/module/charts/line/PriceText.js

A sweet candlestick chart for React Native

import React, { useState } from 'react';
import { Text } from 'react-native';
import {
  useDerivedValue,
  useAnimatedReaction,
  runOnJS,
} from 'react-native-reanimated';
import { useLineChartPrice } from './usePrice';
import { useLineChart } from './useLineChart';
import { AnimatedText } from '../../components/AnimatedText';
LineChartPriceText.displayName = 'LineChartPriceText';
export function LineChartPriceText({
  format,
  precision = 2,
  variant = 'formatted',
  style,
  index,
  useOptimizedRendering = false,
  getTextColor,
}) {
  const price = useLineChartPrice({
    format,
    precision,
    index,
  });

  // If we have a custom format function and optimized rendering is enabled,
  // use regular React state instead of AnimatedText
  if (format && useOptimizedRendering) {
    const { currentIndex, data } = useLineChart();
    const [displayText, setDisplayText] = useState('');
    const [textColor, setTextColor] = useState('#000000');
    const updateText = (newText) => {
      setDisplayText(newText);
      // Update color if getTextColor function is provided
      if (getTextColor) {
        setTextColor(getTextColor(newText));
      }
    };
    const textValue = useDerivedValue(() => {
      if (!data) {
        return '';
      }
      if (
        (typeof currentIndex.value === 'undefined' ||
          currentIndex.value === -1) &&
        index == null
      ) {
        return '';
      }
      let price = 0;
      price =
        data[Math.min(index ?? currentIndex.value, data.length - 1)].value;
      const valueString = price.toFixed(precision).toString();

      // Call format function directly in worklet
      return format({
        value: valueString,
        formatted: valueString,
      });
    }, [currentIndex, data, precision]);

    // Use useAnimatedReaction to update React state with runOnJS
    useAnimatedReaction(
      () => textValue.value,
      (current, previous) => {
        if (current !== previous) {
          runOnJS(updateText)(current);
        }
      },
      [textValue]
    );

    // Merge the text color with the provided style
    const dynamicStyle = [
      style,
      {
        color: textColor,
      },
    ];
    return /*#__PURE__*/ React.createElement(
      Text,
      {
        style: dynamicStyle,
      },
      displayText
    );
  }

  // For non-custom format, use the original approach
  return /*#__PURE__*/ React.createElement(AnimatedText, {
    text: price[variant],
    style: style,
  });
}
//# sourceMappingURL=PriceText.js.map