newbiebr / react-native-magic-confetti

Beautiful and butter smooth confetti animation for React Native

React Native Magic Confetti

Beautiful and butter smooth confetti animation for React Native.

Basic	Advanced	Real World

Installation

• Intall react-native-reanimated
• Install this package

  yarn add react-native-magic-confetti
  # OR
  npm add --save react-native-magic-confetti

Basic Usage

import Confetti from 'react-native-magic-confetti';

<Confetti confettiImages={[require('./confetti.png')]}>

Advanced Usage

import Confetti from 'react-native-magic-confetti';
import FastImage from 'react-native-fast-image';

<Confetti
  count={42} // custom number of confettis
  size={32}
  colors={['red', 'green', 'blue']} // require FastImage
  imageComponent={FastImage} // custom image component
  confettiImages={[
    require('./assets/star.png'),
    require('./assets/triangle.png'),
    require('./assets/square.png'),
    require('./assets/circle.png'),
  ]} // all confetti images to be chosen randomly
  yspeed={3} // fall speed
/>

react-native-magic-confetti's Issues

[Feature Request] Image support for not square images

I have noticed that none-square shaped images are not supported per default.

None square images will fill the square completely.

Confetti lags when used with other animations

Love the confetti!

I am using this together with react-native-animatable.

When an animation is run by react-native-animatable, the confetti stops in the air for a second.

I can run 20 react-native-animatable animations together without any frame loss, but adding one animation from react-native-animatable already stops the confetti animation.