Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-confetti with all npm packages installed. Try it out:

var reactNativeConfetti = require("react-native-confetti")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-confetti v0.1.0

Raining confetti made with react native animations

react-native-confetti

Raining confetti made with react native animations

Installation

npm i -S react-native-confetti

Usage

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';

import Confetti from 'react-native-confetti';

class RNConfetti extends Component {
  componentDidMount() {
    if(this._confettiView) {
       this._confettiView.startConfetti();
    }
  }

  componentWillUnmount ()
  {
      if (this._confettiView)
      {
          this._confettiView.stopConfetti();
      }
  }

  render() {
    return <View style={styles.container}>
      <Confetti ref={(node) => this._confettiView = node}/>
    </View>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Props

PropertyTypeDefaultDescription
confettiCountNumber100Number of confetti
timeoutNumber30 (ms)Timeout between confetti
untilStoppedBooleanfalseRender confetti continuously until stopConfetti() is called. This ignores confettiCount.
durationNumber6000 (ms)Duration until a conffetti reaches the bottom
colorsArray["rgb(242.2, 102, 68.8)","rgb(255, 198.9, 91.8)","rgb(122.4, 198.9, 163.2)","rgb(76.5, 193.8, 216.7)","rgb(147.9, 99.4, 140.2)"]Array of color strings to choose from for the confetti
sizeNumber1Multiplier for size of confetti (width and heigh)
bsizeNumber1Multiplier for radius of confetti (border radius)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free