react-native-confetti-cannon icon indicating copy to clipboard operation
react-native-confetti-cannon copied to clipboard

Performance is really subpar on Android

Open YCMitch opened this issue 3 years ago • 8 comments

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?

YCMitch avatar Mar 25 '21 11:03 YCMitch

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 👍

VincentCATILLON avatar Mar 25 '21 13:03 VincentCATILLON

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.

YCMitch avatar Mar 26 '21 02:03 YCMitch

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.

genkoph avatar Jul 07 '21 08:07 genkoph

@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

VincentCATILLON avatar Jul 07 '21 09:07 VincentCATILLON

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

ShivamJoker avatar Dec 07 '21 19:12 ShivamJoker

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

ShivamJoker avatar Dec 08 '21 14:12 ShivamJoker

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.

maartenvandillen avatar Jan 20 '22 09:01 maartenvandillen