react-native-fiesta/lib/module/components/Balloons.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, { forwardRef } from 'react';
import { Balloon } from './Balloon';
import { Popper } from './Popper';
import { screenWidth } from '../constants/dimensions';
import { getBalloonsYPositions } from '../utils/balloons';
const SPACING = 45;
const possibleDepths = [0.9, 1];
const possibleYPositions = [150, 0, 300, 100, 250, 0, 150, 100, 300, 0];
const optimalNumberOfItems = Math.floor(screenWidth / SPACING);
const balloonsYPositions = getBalloonsYPositions(optimalNumberOfItems, possibleYPositions);
export const Balloons = /*#__PURE__*/forwardRef(({
  spacing = SPACING,
  ...props
}, ref) => {
  return /*#__PURE__*/React.createElement(Popper, _extends({
    spacing: spacing,
    renderItem: ({
      x,
      colors
    }, index) => /*#__PURE__*/React.createElement(Balloon, {
      key: index,
      x: x,
      y: balloonsYPositions[index],
      color: colors[index],
      r: 40,
      depth: possibleDepths[Math.floor(Math.random() * possibleDepths.length)],
      autoPlay: false
    })
  }, props, {
    ref: ref
  }));
});
//# sourceMappingURL=Balloons.js.map