heart-switch-react-native/lib/module/components/HeartSvg/index.js

A heart-shaped toggle switch component for React Native.

"use strict";

import { useEffect, useState } from 'react';
import Animated, { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';
import { jsx as _jsx } from "react/jsx-runtime";
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
export const HeartSvg = ({
  filled,
  fillColor,
  strokeColor,
  inactiveFillColor,
  inactiveStrokeColor,
  size,
  duration = 350
}) => {
  const progress = useSharedValue(filled ? 1 : 0);
  const [currentFill, setCurrentFill] = useState(filled ? fillColor : inactiveFillColor);
  const [currentStroke, setCurrentStroke] = useState(filled ? strokeColor : inactiveStrokeColor);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: 1
    };
  });
  useEffect(() => {
    progress.value = withTiming(filled ? 1 : 0, {
      duration
    });
    const timer = setTimeout(() => {
      if (filled) {
        setCurrentFill(fillColor);
        setCurrentStroke(strokeColor);
      } else {
        setCurrentFill(inactiveFillColor);
        setCurrentStroke(inactiveStrokeColor);
      }
    }, duration * 0.1);
    return () => clearTimeout(timer);
  }, [filled, duration, fillColor, strokeColor, inactiveFillColor, inactiveStrokeColor, progress]);
  return /*#__PURE__*/_jsx(AnimatedSvg, {
    viewBox: "0 0 33 23",
    width: 36 * size,
    height: 25 * size,
    strokeLinejoin: "round",
    style: animatedStyle,
    children: /*#__PURE__*/_jsx(Path, {
      d: "M23.5,0.5 C28.4705627,0.5 32.5,4.52943725 32.5,9.5 C32.5,16.9484448 21.46672,22.5 16.5,22.5 C11.53328,22.5 0.5,16.9484448 0.5,9.5 C0.5,4.52952206 4.52943725,0.5 9.5,0.5 C12.3277083,0.5 14.8508336,1.80407476 16.5007741,3.84362242 C18.1491664,1.80407476 20.6722917,0.5 23.5,0.5 Z",
      strokeWidth: 1,
      fill: currentFill,
      stroke: currentStroke
    })
  });
};
//# sourceMappingURL=index.js.map