Adding different type of emoji as well?

[subhendukundu]

Hey,
This is a great plug in. I was wondering if we can pass different type of svg or images.
For example hats, circles, emoji etc?
Would this something possible at the moment?

[VincentCATILLON]

Hi @subhendukundu, thanks for your kind feedback :)
it's a good idea, we could give the assets through a prop called assets for example which can be images or svg.

At this time, it's not developed for, but it could be easy to do it, feel free if you want to contribute. If i have some time, i could propose something that will fit to your needs

[subhendukundu]

For sure!
I am trying to come up with an architectural design, how to do this.
Also, I was thinking to add something like, Instagram live has, more of an emoji fountain. That would be something amazing to add as well.
What are your thoughts?

[VincentCATILLON]

I agree it could be nice for users that want to do that.
At this time we got a Confetti component that draws a particle (rounded, or squared, automatic width and height, etc), but position is set into the Cannon component (the main one), that can uses another particle than a confetti, like an asset (image or svg).
So the solution, imho, should be an assets prop than can be fulfilled with images (logos, emojis, etc) or svg as well with the same way, that uses confetti particles drawed by default (like colors prop btw)

[subhendukundu]

It sounds like a neat solution. Let me play around with it a bit. If I am able to do it, I will create PR :)

[VincentCATILLON]

The interface i see for this feature looks like:

import Emoji from 'react-native-emoji';

const Cannon = () => {
  const assets = [
    <Emoji name="coffee" style={styles.emoji} />,
    <Emoji name="smile" style={styles.emoji} />,
    [...]
  ];
  return (
    <ConfettiCannon assets={assets} />
  );
};

[subhendukundu]

Yup, something like that. But we gotta see, it shouldn’t slow down the app.

[VincentCATILLON]

yes, and it should not be a dep to the package to be flexible with assets we are using (and not pollute the user project with deps it doesn't need)

[subhendukundu]

How would you make it as fountain-like Instagram has for live video?

[VincentCATILLON]

Do you have a gif or anything else describing what is a fountain like animation ?

[subhendukundu]

Couldn't find the right one but this would give you an idea.
https://youtu.be/ysdbr5bvZaI

You will see the emojis from down to up.

[VincentCATILLON]

Thanks for your example 👍

I'm sorry but I think this kind of animation should be done in a dedicated package as it's not the purpose of this one, which is supposed to make an explosion like a confetti cannon does.
But, if your aim is to be able to replace confettis particles by other assets (like we said: images, svg, etc), keeping the same animation flow (explosion like a cannon), it can be done in this repository with pleasure (that I think is a good idea btw)

[subhendukundu]

Oh yes! That was the goal. Adding images, svg, etc as confetti. I figured it out, will create a PR over this weekend. Also, I was thinking about what else features we can add. Then I remembered this Instagram feature. Let me know if you want to work on this kind of packages as well. I can start working on this, feels a cool thing to start with. Tho kinda confuse how to go about this.

[VincentCATILLON]

What a cool thing, tell me if you need some help on this idea, or open a draft PR to share comments, or to ask help, i'll try to make the best i can to help you :)

For the other package, yes we can think about it if you want, as it's a good idea (if it's not already done by another package, of course). How i made this one, I put on a paper the animation graphs, separated by steps reached (start, top, and fall) and I chose which easing (react-native documentation) was the best to have a curve representing the best the explosion/fall animation in real life.

For this one, it could be different than it's not separated by steps, but only a kind of inverse rain (which is imo easier than explosion and fall), and should be fulfilled with emojis, programmatically like a timeline can have. On Facebook, if you come after the start, you have a short brief of all emojis that has been sent before, so imo it should be done like this, to be flexible, but it's only my opinion :) maybe we can talk about this in private in a dedicated thread ?

EDIT: We have to make it scalable and virtualize or unmount items which are not displayed (once the item leaves the screen area)

[subhendukundu]

Umm I did a bit of research. Looks like we can use this and modify to get something like the behavior.