Performance is really subpar on Android

[YCMitch]

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?

[VincentCATILLON]

Hey @MitchEff ,

Thanks for your interest, every feedback is welcome, so don't worry about it :)

Did you tried to change the delay in props to customize confettis apparition delay ?

As it uses native animation, it should not impact performances, do you have any way to me to reproduce ? Or maybe share you code to help you as much as possible 👍

[YCMitch]

Yeah, I've tried a couple different ways of resolving it. Eventually realised having the component always mounted slowed things down, so I tried to just mount it when I wanted it to activate:

        { isConfettiVisible &&
            <View style={{
                zIndex: 999999,
            }}>
                <ConfettiCannon
                    count={200}
                    origin={{ x: (screenSize.width / 2), y: (screenSize.height + 20) }}
                    explosionSpeed={0}
                    fallSpeed={3000}
                    fadeOut={true}
                />
            </View>
        }

Then in my context file I activate it like so:

    const doConfetti = () => {
        setIsConfettiVisible(true)

        setTimeout(() => {
            setIsConfettiVisible(false)
        },5000)
    }

The mounting is still real slow and stops any other animations. Not too sure of a workaround, really.

[genkoph]

Same issue here, performance is very slow on android devices. The confetti takes 1.5/2 seconds to show up and until the animation starts, it blocks the whole app.

[VincentCATILLON]

@MitchEff @kborisov00 the number of confettis used it really important because they are rendered at the same time, but animation uses native animation (exposed by RN btw), and so, I can't really do anything else to improve it

[ShivamJoker]

Same here the mounting is slowing down the app render it freezes the whole app in emulator

[ShivamJoker]

@VincentCATILLON what do you think about adding this library https://github.com/DanielMartinus/Konfetti ?

[maartenvandillen]

Same performance problem here. I've dialed the confetti count down to 50 but it still freezes other animations for 2 seconds on start. Above mentioned native library looks promising but then there will be two completely different implementations in one library.

[0xAskar]

I have the same problem on iphone12 with expo in react native. Takes about 2 seconds to load the animation although the explosion time is down to 50ms. Anyone have a solution or other library to use?