vincentcatillon/react-native-confetti-cannon

React Native confetti explosion and fall like iOS does.

react-native-confetti-cannon's Issues

onAnimationEnd - it's not exist - please add

actually, I want it just for making it in a loop.. so also possible to add a prop loop.
but on animation end will be an amazing addition!
(I'm just don't want to take all of your code out of node-module >> for appreciation reasons. )

amazing module by the way. congrats

Storybook isn't really useful

As it's impossible to restart the animation on storybook, you can play with props but can't see the result. 😞

To bad, it's seems a nice feature! 👍

TypeScript support

Hi,

Are there plans for types support for this in the future?

"Could not find a declaration file for module 'react-native-confetti-cannon'. '../node_modules/react-native-confetti-cannon/src/index.js' implicitly has an 'any' type.

Try npm install @types/react-native-confetti-cannon if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-confetti-cannon';ts(7016)"

Thinking of implementing with Reanimated 2?

if i need a neverending loop

i need a loop of the confetti thats keep going until i leave the screen

useNativeDriver was not specified

Hi there,

I've just installed and used this and I get the following warning whenever the react-native-confetti-cannon component mounts.

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

"react": "16.11.0",
"react-native": "0.62.2"

Any ideas?

not rendering on Android

Looks like there was a fix earlier for something like this, but its not working in Android 9, any idea?

android app works slow after using this library

while using this library in android after using this library app works very slow. any suggestions to solve this?

Visual glitches on Android devices

Hello @VincentCATILLON

Thank you for your library, it's really cool!

I've faced current issues on Android devices. IOS working well.

When confetti triggered and starts fall down on-screen starts appears some visual defects: blinking with different colors, the example I've attached

Performance is really bad even after the animation is finished.

Code

<ConfettiCannon
          count={300}
          autoStartDelay={400}
          fallSpeed={3000}
          explosionSpeed={500}
          fadeOut
          origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
        />

When I try to resize the window anytime during or after the animation it gets really laggy and the other components get all jittery.
To solve this for now I remove the component after 5 seconds completely

function Component() {
 const [showConfetti, setShowConfetti] = useState<boolean>(true);

 useEffect(() => {
   setTimeout(() => {
     setShowConfetti(false);
   }, 5000);
 }, []);

 return (
   <>
     // other stuff on the screen
     {showConfetti && (
       <ConfettiCannon
         count={300}
         autoStartDelay={400}
         fallSpeed={3000}
         explosionSpeed={500}
         fadeOut
         origin={{ x: Dimensions.get('window').width / 2, y: 0 }}
       />
     )}
   </>
 );
}

Anyone know a better way to get around this.

Undefined is not an object (evaluating '_this$props3.count')]

• platform :ios, '13', device iphone 8.

• dependencies from package.json
  "dependencies": {
  "@babel/preset-typescript": "^7.18.6",
  "@react-native-community/art": "^1.2.0",
  "@react-native-community/viewpager": "5.0.11",
  "common": "1.0.0",
  "deprecated-react-native-prop-types": "^4.0.0",
  "expo": "^46.0.0",
  "expo-apple-authentication": "~4.3.0",
  "expo-av": "~12.0.4",
  "expo-device": "~4.3.0",
  "expo-firebase-analytics": "~7.2.0",
  "expo-font": "~10.2.0",
  "expo-in-app-purchases": "~13.1.0",
  "expo-keep-awake": "~10.2.0",
  "expo-linear-gradient": "~11.4.0",
  "expo-linking": "~3.2.4",
  "expo-secure-store": "~11.3.0",
  "expo-store-review": "~5.3.0",
  "expo-updates": "~0.14.7",
  "mobx": "^5.8.0",
  "mobx-react": "5.4.3",
  "node-libs-react-native": "^1.0.3",
  "react": "18.0.0",
  "react-dom": "18.0.0",
  "react-i18next": "9.0.8",
  "react-native": "0.69.6",
  "react-native-animate-number": "^0.1.2",
  "react-native-confetti-cannon": "^1.5.2",
  "react-native-fbsdk-next": "^11.1.0",
  "react-native-gesture-handler": "~2.5.0",
  "react-native-google-mobile-ads": "^8.2.2",
  "react-native-particles": "^0.0.8",
  "react-native-progress": "^5.0.0",
  "react-native-progress-circle": "^2.1.0",
  "react-native-ratings": "^7.5.0",
  "react-native-reanimated": "~2.9.1",
  "react-native-redash": "^14.1.1",
  "react-native-responsive-screen": "^1.4.1",
  "react-native-root-toast": "^3.3.0",
  "react-native-svg": "12.3.0",
  "react-native-svg-charts": "5.3.0",
  "react-native-swipe-gestures": "^1.0.5",
  "react-test-renderer": "18.0.0"
  },
  "devDependencies": {
  "@babel/core": "^7.18.6",
  "@types/react": "~18.0.0",
  "@types/react-native": "~0.69.1",
  "babel-jest": "~25.2.6",
  "babel-plugin-module-resolver": "^5.0.0",
  "@babel/plugin-proposal-decorators": "^7.20.13",
  "@babel/plugin-proposal-class-properties": "^7.18.6",
  "babel-preset-expo": "~9.2.0",
  "expo-yarn-workspaces": "^2.0.0",
  "jest": "^26.6.3",
  "react-test-renderer": "18.0.0"
  },

• Code from my project:
  startAnimation() {
  this.explosion.start();
  }
  <View style={{ zIndex: 2 }}>
  <ConfettiCannon
  count={100}
  origin={{ x: 200, y: 230 }}
  fallSpeed={2000}
  fadeOut
  explosionSpeed={350}
  ref={ref => {
  this.explosion = ref;
  }}
  autoStart={false}
  />
  

Adding different type of emoji as well?

Hey,
This is a great plug in. I was wondering if we can pass different type of svg or images.
For example hats, circles, emoji etc?
Would this something possible at the moment?

Licence: add licence to this repository

Would you be able to add licence to this repository please (ex: MIT)

https://stackoverflow.com/questions/31639059/how-to-add-license-to-an-existing-github-project

Didn't work for me, nothing rendered on the screen!

I was looking for such a thing since a week now and found this one. Unfortunately, it doesn't work for me. Neither does it throw any errors or log anything to the console.

Using:
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-confetti-cannon": "^1.0.2",

Confetti landing area size customization.

Hi I'm working on a modal and I would like the confetti to only land inside the perimeter of the modal. The confetti aggregately keeps landing towards the right side of the screen and overlapping by a noticable margin (screenshot & video link attached). Currently there is no props to control where the confetti lands and/or how big the width of the landing zone is. Would it be possible to add this?
It would be nice to have a prop where I can input a percentage landing area of the screen's width. Thanks.

I'm using Android platform.

Video link:
https://user-images.githubusercontent.com/16201222/116455868-2f8ea300-a827-11eb-9205-1399f59c78cd.mp4

image:

Semantic release usage

This repository could be upgraded automatically on master using semantic release (and semantic version naming convention).

If someone wanna help on this, feel free to contribute, or i'll do it in soon

Flow > TS

This repository is using flow for his typing, as a next chore, it will be kind to migrate to TS, but keeping flow definition for projects using flow.

If someone wanna contribute, feel free you're welcome 🚀

Screen flickering on Google Pixel 3A XL

During the animation different parts of the screen will flicker on/off.
When the animation stops, the flickering also stops.
This glitch never happened on the emulator on my computer, and I did try several different phone models on there. It only happens on a real device.
Another person on my team who has the regular Pixel 3 is reporting the same issue.

Performance issue when I use over 100 confetti

Hi, I am facing performance issues when I increase the confetti count over 100. Is there a way to resolve this?

I am testing it on iPhone Xs.

Versions:
"react": "16.9.0"
"react-native": "0.60.5",

Thanks in advance!

Feature request: programmatic start/stop

Hi, is a programmatic start/stop on the roadmap for the near future? I could see that replacing the current auto-play functionality, or added in addition to it. Either way, that would make the library much more usable for my use case, and others I imagine. Thanks!

Live demo missing

This lib doesn't include any live demo.
It should include live demo (in web for example)

Getting glitch issue with some of Samsung and Motorola Android device

We can see Confetti glitch in some of the Samsung and Motorola Android like Samsung Galaxy M30, Moto one power.
Some of particle size increase to huge size and We can see some lines remains on bottom in this devices.

the confetti stays at the bottom and do not disappear at the end even if I have added fadeOut=true

Note that it is working fine with iOS and Some other device.

Confetti not rendering on top of Images

I am sorry for not having the time to make a minimum reproducible example.

However, I am facing the issue that the Confetti does not render on top of images.
I have attempted to layer the components using zIndex property, but that however does not work.

Performance is really subpar on Android

I hate leaving these sorts of comments - I'm aware they're not overly helpful.

However, on Android, even when built in production mode there's a humongous framerate drop whenever I trigger this - iOS doesn't seem to have the same issue, but every other animation in the app grinds to a halt and there's a 2-3 second delay before the confetti appears halfway down the screen.

Is there any particular trick anyone's using for it to run smoothly, or am I maybe just asking a little much from this package?