Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance is really subpar on Android #39

Open
YCMitch opened this issue Mar 25, 2021 · 7 comments
Open

Performance is really subpar on Android #39

YCMitch opened this issue Mar 25, 2021 · 7 comments

Comments

@YCMitch
Copy link

YCMitch commented Mar 25, 2021

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
Copy link
Owner

VincentCATILLON commented Mar 25, 2021

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
Copy link
Author

YCMitch commented Mar 26, 2021

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
Copy link

genkoph commented Jul 7, 2021

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
Copy link
Owner

@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
Copy link

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

@ShivamJoker
Copy link

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

@maartenvandillen
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants