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

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

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { memo, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { FiestaThemes } from '../constants/theming';
import { Firework } from './Firework';
import { colorsFromTheme } from '../utils/colors';
import { generateRandomCoordinates } from '../utils/fireworks';
const optimalNumberOfFireworks = 3;
export const Fireworks = /*#__PURE__*/memo(({
  autoHide,
  particleRadius,
  theme = FiestaThemes.Default,
  fireworkRadius = 400,
  numberOfFireworks = optimalNumberOfFireworks,
  ...rest
}) => {
  const fireworksToRenderArray = useMemo(() => [...Array(numberOfFireworks)], [numberOfFireworks]);
  const colors = useMemo(() => colorsFromTheme(theme, numberOfFireworks), [numberOfFireworks, theme]);
  const positions = useMemo(() => generateRandomCoordinates(numberOfFireworks), [numberOfFireworks]);
  return /*#__PURE__*/React.createElement(Canvas, {
    style: styles.canvas,
    pointerEvents: "none"
  }, fireworksToRenderArray.map((_, index) => /*#__PURE__*/React.createElement(Firework, _extends({
    key: index,
    initialPosition: positions[index],
    color: colors[index],
    autoHide: autoHide,
    particleRadius: particleRadius,
    fireworkRadius: fireworkRadius
  }, rest))));
});
const styles = StyleSheet.create({
  canvas: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 1
  }
});
//# sourceMappingURL=Fireworks.js.map