react-native-skia-responsive-text/dist/module/components/TextLine.js

A library providing a wrapper for the React Native Skia Text component, offering features like user-friendly text alignment, efficient multiline text management, and straightforward text truncation.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { Text } from '@shopify/react-native-skia';
import { memo } from 'react';
import { interpolate, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
function TextLine(_ref) {
  let {
    animationProgress,
    animationSettings,
    fontSize,
    horizontalAlignmentOffsets,
    index,
    lineHeight,
    verticalAlignmentOffset,
    ...rest
  } = _ref;
  const getCurrentX = () => {
    'worklet';

    return horizontalAlignmentOffsets.value[index] ?? 0;
  };
  const getCurrentY = () => {
    'worklet';

    return verticalAlignmentOffset.value + index * lineHeight.value + fontSize;
  };
  const startX = useSharedValue(getCurrentX());
  const startY = useSharedValue(getCurrentY());
  const prevTargetX = useSharedValue(getCurrentX());
  const prevTargetY = useSharedValue(getCurrentY());
  const x = useSharedValue(getCurrentX());
  const y = useSharedValue(getCurrentY());
  useAnimatedReaction(() => ({
    x: horizontalAlignmentOffsets.value[index] ?? 0,
    y: verticalAlignmentOffset.value + index * lineHeight.value + fontSize
  }), target => {
    if (animationSettings) {
      const {
        onComplete,
        ...animation
      } = animationSettings;
      x.value = withTiming(target.x, animation, onComplete);
      y.value = withTiming(target.y, animation, onComplete);
    } else if (!animationProgress) {
      x.value = target.x;
      y.value = target.y;
    }
  }, [animationProgress, animationSettings, index, fontSize]);
  useAnimatedReaction(() => animationProgress?.value ?? null, progress => {
    if (progress === null) return;
    const targetX = getCurrentX();
    const targetY = getCurrentY();
    if (targetX !== prevTargetX.value || targetY !== prevTargetY.value) {
      startX.value = x.value;
      startY.value = y.value;
      prevTargetX.value = targetX;
      prevTargetY.value = targetY;
    }
    x.value = interpolate(progress, [0, 1], [startX.value, targetX]);
    y.value = interpolate(progress, [0, 1], [startY.value, targetY]);
  }, [animationProgress]);
  return /*#__PURE__*/React.createElement(Text, _extends({}, rest, {
    x: x,
    y: y
  }));
}
export default /*#__PURE__*/memo(TextLine);
//# sourceMappingURL=TextLine.js.map