search

marcuzgabriel / react-native-reanimated-confetti

A customizable confetti for react native projects using reanimated v3
https://marcuzgabriel.github.io/react-native-reanimated-confetti
MIT License
15 stars 1 forks source link

Speed up initial render / Fire instantly? #2

Open OwenMelbz opened 5 months ago

OwenMelbz commented 5 months ago

Hey,

I've just picked up a project which is using your package, and have been asked to make the confetti trigger sooner.

E.g. when we render the confetti component e.g. <Confetti /> it takes maybe 2-4 seconds before anything is seen on screen.

Is there any way we can solve that issue? e.g. render it in a paused state before hand then call a function to fire it immediately when ready etc?

Thanks

marcuzgabriel commented 5 months ago

Hey Owen. Thanks for you issue.

When looking at the storybook example: https://marcuzgabriel.github.io/react-native-reanimated-confetti/?path=/story/stories-confetti--confetti-with-double-cannon it fires instantly.

Could you provide a small video showing how it looks and the code example?

cenksari commented 5 months ago

I am experiencing the same problem as well. When I reduce the number of confetti, the wait time shortens. If the number of confetti is more than 50, the wait time exceeds 2-3 seconds. However, when I set the number to 10, the wait time drops to about 1 second. It seems there is a performance issue when creating the confetti.

marcuzgabriel commented 1 month ago

@cenksari, @OwenMelbz. Sorry for my delay in answering your issues. Became a father ... and summer 'holidays'.

I have done everything possible trying to optimize it. Quite difficult. And yes. When the confetti amount starts to increase to more than 50-100 items, then it does take 2-5 seconds before it is fired. And Android is really bad performance wise. I have tried to investigate other open source libraries and I see they have the exact same issue under their issues.

Possible solutions:

  1. Batching the rendering of confetti items (see video). This will still fell laggy due to the nature of React Native if not using React Native Skia (the video is with React Native Skia example)
  2. Off-screen rendering / pre-rendering / manual initialization. This will still fell laggy due to the nature of React Native
  3. Using React Native Skia. This will fix it. Big amounts 200+ may be challenging.

So regarding solution 3. I will do an open source library that is similar in props later today / latest monday with React Native Skia. Some videos of the progress with 200 items on Android:

https://github.com/user-attachments/assets/d7a2ef9d-11c5-4803-8d6f-ce192f61ba82

https://github.com/user-attachments/assets/94631ea5-de19-46bb-95a6-eadf34f77ea5

https://github.com/user-attachments/assets/98a3aa17-3b7d-49a0-b456-4e1fc9b8494d

OwenMelbz commented 1 month ago

No worries!

Will be interesting to see how things progress!

marcuzgabriel commented 1 month ago

React Native Skia is the best solution I have found - (https://www.npmjs.com/package/react-native-skia-confetti). Additionally, it is now possible to batch the render process and activate it manually. This allows confetti to be rendered in a 'hidden' / 'pre-render' mode and then displayed based on user interaction.

Made an example here: https://github.com/marcuzgabriel/react-native-reanimated-confetti/blob/main/packages/skia/src/example/index.tsx

The batching of items can be observed here: https://marcuzgabriel.github.io/react-native-reanimated-confetti/?path=/story/stories-confetti--confetti-with-batching