react-native-fiesta/lib/module/components/FireworkParticle.js

A set of celebration animations powered by Skia. Engage more with your users by celebrating in your React Native application.

import React, { memo, useEffect } from 'react';
import { vec, Circle } from '@shopify/react-native-skia';
import { Easing, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
export const FireworkParticle = /*#__PURE__*/memo(({
  x,
  y = 0,
  finalPos,
  r = 8,
  color
}) => {
  const cx = useSharedValue(x);
  const cy = useSharedValue(y);
  useEffect(() => {
    cx.value = withTiming(finalPos.x, {
      duration: 1200,
      easing: Easing.linear
    });
    cy.value = withTiming(finalPos.y, {
      duration: 1200,
      easing: Easing.linear
    });
  }, [cx, cy, finalPos.x, finalPos.y]);
  const transformCircle = useDerivedValue(() => vec(cx.value, cy.value));
  return /*#__PURE__*/React.createElement(Circle, {
    c: transformCircle,
    r: r,
    color: color
  });
});
//# sourceMappingURL=FireworkParticle.js.map