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

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

import React, { memo, useMemo } from 'react';
import { Group } from '@shopify/react-native-skia';
import { useEffect } from 'react';
import { useSharedValue, withTiming } from 'react-native-reanimated';
import { fromRadians } from '../utils/fireworks';
import { FireworkParticle } from './FireworkParticle';
export const Firework = /*#__PURE__*/memo(({
  initialPosition,
  color = '#000',
  autoHide = true,
  particleRadius,
  fireworkRadius = 400,
  numberOfParticles = 50
}) => {
  const cx = useMemo(() => (initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.x) ?? 0, [initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.x]);
  const cy = useMemo(() => (initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.y) ?? 0, [initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.y]);
  const particlesToDraw = useMemo(() => () => {
    const golden_ratio = (Math.sqrt(4) + 2) / 2 - 1;
    const golden_angle = golden_ratio * (2 * Math.PI);
    const circle_rad = fireworkRadius * 0.4 - 20; // defines the radious of the final circle

    const particlesToDrawArray = [];
    for (let i = 1; i <= numberOfParticles; ++i) {
      const dot_rad = numberOfParticles / 10 * 0.001 * i;
      const ratio = i / numberOfParticles;
      const angle = i * golden_angle;
      const spiral_rad = ratio * circle_rad;
      const x = cx + Math.cos(fromRadians(angle)) * spiral_rad;
      const y = cy + Math.sin(fromRadians(angle)) * spiral_rad;
      const initialPosX = cx;
      const initialPosY = cy;
      const particleColor = `rgba(${i % 1000 + 200}, ${i % 900 + 20}, ${i % 256 + 20}, 1)`;
      particlesToDrawArray.push({
        x,
        y,
        color: particleColor,
        r: dot_rad,
        initialPosX,
        initialPosY
      });
    }
    return particlesToDrawArray;
  }, [cx, cy, fireworkRadius, numberOfParticles]);
  const opacity = useSharedValue(0);
  useEffect(() => {
    opacity.value = withTiming(1, {
      duration: 2000
    }, () => {
      if (autoHide) {
        opacity.value = withTiming(0, {
          duration: 2000
        });
      }
    });
  }, [autoHide, opacity]);
  return /*#__PURE__*/React.createElement(Group, {
    origin: {
      x: cx,
      y: cy
    },
    opacity: opacity
  }, particlesToDraw().map((c, i) => {
    return /*#__PURE__*/React.createElement(FireworkParticle, {
      key: i,
      x: c.initialPosX,
      y: c.initialPosY,
      finalPos: {
        x: c.x,
        y: c.y
      },
      r: c.r * 10 ?? particleRadius,
      color: color ?? c.color
    });
  }));
});
//# sourceMappingURL=Firework.js.map