sean-perkins/nativescript-confettiview

NativeScript Confetti View.

NativeScript ConfettiView Plugin

A NativeScript plugin to create an animated confetti view on iOS and Android.

Getting Started

• npm install nativescript-confettiview
• Import the ConfettiView into your page and start confetti!

import {Observable} from 'data/observable';
import {ConfettiView} from 'nativescript-confettiview';

export class HelloWorldModel extends Observable {

  private confettiView: any;

  constructor() {
    super();
    this.confettiView = new ConfettiView();
    this.confettiView.startConfetti();
  }

  public stopConfetti() {
    this.confettiView.stopConfetti();
  }

  public startConfetti() {
    this.confettiView.startConfetti();
  }

}

Note: On first run, you may see a console log regarding an incorrect local file path. Let the install finish and you will notice the package.json will reflect your local file path to the plugin.

Available Functions

Call Signature	Default
intensity(number)	0.5
colors(array)	UIColor[]
startConfetti()
stopConfetti()

Example

Credits

• https://github.com/sudeepag/SAConfettiView for the original Pod
• https://github.com/NathanWalker/SAConfettiView Nathan Walker for the upgrades to the Pod and this plugin

nativescript-confettiview's Issues

Upgrade to latest Swift version

hi, before I can run the demo, I am prompted to upgrade to the latest Swift version. Would it be possible to upgrade the plugin?

Also I'd really love to have an Android version of this... ping ping @triniwiz

Android via

You guys considered using https://github.com/jinatonic/confetti for Android?

/cc @bradmartin

pointers on Angular integration

hi, @NathanWalker - almost have it working great in my Angular app! But I'm having a little trouble controlling the confetti from Angular lifecycle hooks. I need to be able to start the confetti ad hoc, after a certain number of practice sessions happen in my app.

I have registered the element in the component file:

import { registerElement } from "nativescript-angular/element-registry";
registerElement('ConfettiView', () => require('nativescript-confettiview').ConfettiView);

and use the standard tag markup on my .html file:
<ConfettiView #confetti fullScreen="true">...</ConfettiView>

But the confetti always starts up right away, and I can't disable it from the component file, either in ngOnInit or ngAfterViewInit. I can only stop the confetti from a button press once everything is loaded in the view.

I think if we could get the tag to have auto-start set to false available in Angualr this would solve the problem.

thanks!

Function Error

Hey, I was just trying this out for the fun of things. Following you demo-ng guide. Let me know what you think.
Running into this error:
ERROR TypeError: this.confetti.nativeElement.startConfetti is not a function.
ERROR CONTEXT {
JS: "view": {
JS: "def": {
JS: "nodeFlags": 402653185,
JS: "rootNodeFlags": 402653185,
JS: "nodeMatchedQueries": 2,
JS: "flags": 0,
JS: "nodes": [
JS: {
JS: "nodeIndex": 0,
JS: "parent": null,
JS: "renderParent": null,
JS: "bindingIndex": 0,
JS: "outputIndex": 0,
JS: "checkIndex": -1,
JS: "flags": 402653184,
JS: "childFlags": 0,
JS: "directChildFlags": 0,
JS: "childMatchedQueries": 0,
JS: "ngContentIndex": -1,
JS: "matchedQueries": {},
JS: "matchedQueryIds": 0,
JS: "references": {},
JS: "childCount": 0,
JS: "bindings": [],
JS: "bindingFlags": 0,
JS: "outputs": [],
JS: "element": null,
JS: "provider": null,
JS: "text": null,
JS: "query": {
JS: "id": 1,
JS: "filterId": 2,
JS: "bindings": [
JS: {
JS: "propName": "confetti",
JS: "bindingType": 0
JS: }
JS: ]
JS: },
JS: "...

Compilation error

I have this issue:

Constructing build description

error: SWIFT_VERSION '3.0' is unsupported, supported versions are: 4.0, 4.2, 5.0. (in target 'SAConfettiView' from project 'Pods')error: SWIFT_VERSION '3.0' is unsupported, supported versions are: 4.0, 4.2, 5.0. (in target 'SAConfettiView' from project 'Pods')