react-native-fiesta/lib/module/components/Confettis.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, useMemo, useState } from 'react';
import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { FiestaThemes } from '../constants/theming';
import { colorsFromTheme } from '../utils/colors';
import { generateRandomCoordinates } from '../utils/fireworks';
import { screenHeight } from '../constants/dimensions';
import { Confetti } from './Confetti';
import { DEFAULT_ANIMATION_DURATION } from '../utils/confettis';
const optimalNumberOfConfettis = 30;
export const Confettis = /*#__PURE__*/memo(({
  theme = FiestaThemes.Default,
  numberOfConfettis = optimalNumberOfConfettis,
  duration = DEFAULT_ANIMATION_DURATION
}) => {
  const [displayCanvas, setDisplayCanvas] = useState(true);
  const confettisToRender = useMemo(() => [...Array(numberOfConfettis)], [numberOfConfettis]);
  const colors = useMemo(() => colorsFromTheme(theme, numberOfConfettis), [numberOfConfettis, theme]);
  const positions = useMemo(() => generateRandomCoordinates(numberOfConfettis, screenHeight / 2), [numberOfConfettis]);

  // Hide confettis after the animation is done
  useEffect(() => {
    const timeout = setTimeout(() => {
      setDisplayCanvas(false);
    }, duration * 1.5);
    return () => clearTimeout(timeout);
  }, [duration]);
  if (!displayCanvas) return null;
  return /*#__PURE__*/React.createElement(Canvas, {
    style: styles.canvas,
    pointerEvents: "none"
  }, confettisToRender.map((_, index) => /*#__PURE__*/React.createElement(Confetti, {
    key: index,
    initialPosition: positions[index] ?? {
      x: 0,
      y: 0
    },
    color: colors[index] ?? 'red',
    index: index
  })));
});
const styles = StyleSheet.create({
  canvas: {
    zIndex: 1,
    ...StyleSheet.absoluteFillObject
  }
});
//# sourceMappingURL=Confettis.js.map