Getting glitch issue with some of Samsung and Motorola Android device

[sujallinex]

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.

[EricLewe]

Can confirm similar behavior on Samsung S10, can't see it in my emulator though, note the orange lines.

Worth to say is that it worked fine a couple of days ago, haven't changed versions or aynthing (pervious build in production).

My versions are:
"react-native": "0.62.2",
"react-native-confetti-cannon": "1.5.0",

Update: Works fine on a Nokia 6 phone, so not all mobile models are facing the issue as thread starter said

[VincentCATILLON]

Hi @sujallinex @EricLewe

Can you please confirm that you got the error using fadeOut prop with the latest release ? and you don't have without it (false value by default) ?

I'll investigate so

[ghost]

@VincentCATILLON I made fadeOut: false it makes it even worse. Have the exact issue what @sujallinex said. I have this issue with my google pixel 3a, also in other pixel 2xl too. This library so good, wish this one thing is fixed.

[professorkolik]

@VincentCATILLON First of all thank you for your efforts to create so nice library, love it so much.
Observed this issue on

Pixel 4
"react-native": "0.63.2",
"react-native-confetti-cannon": "1.5.1",

Component config:
<ConfettiCannon ref={confettiCannonRef} count={200} origin={{ x: 0, y: 0 }} />

Tried with different count of confetti pieces, 50, 100, 150 same behaviour

[scrapecoder]

@VincentCATILLON facing same issue in my Samsung and Poco x2 pro phone. @professorkolik have you find any solution for this glitch issue?

[professorkolik]

@scrapecoder Unfortunately no, had to disable for Android now

[VincentCATILLON]

@scrapecoder @professorkolik @pipesorter @sujallinex @EricLewe i'll try to reproduce your issues on an emulator, can you share please your piece of code implementing the lib please ? It can help me to understand what's happening and how i can fix it so (if it's lib related)

EDIT: do you have the same behavior with the example folder (in storybook so) ?

[originalankur]

+1 We are observing this behavior on a new Samsung devices as well with Android 10.

[MinaFSedrak]

@VincentCATILLON Any updates ???

[leezumstein]

I did some testing using patch-package and I believe we're just missing a { perspective: 100 } transform in the transform array (see documentation here).

Attached is the patch we're using in our own project to fix the animation issues we've seen on Android. Would be open to submitting a PR, but haven't worked with Flow before.

react-native-confetti-cannon+1.5.1.patch.txt

Edit: Ended up being a combination of perspective transform and renderToHardwareTextureAndroid prop. Opened a PR with these two fixes on #38 .

[VincentCATILLON]

Hi everyone, this bug has been fixed and released under the 1.5.2 tag.
I'm closing the issue, feel free to add postiive or negative feedbacks after you tried the new release

[originalankur]

Thank you @VincentCATILLON