/react-native-confetti

Raining confetti made with react native animations

Primary LanguageTypeScriptMIT LicenseMIT

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();
    }
  }

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

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

Props

Property Type Default Description
confettiCount Number 100 Number of confetti
timeout Number 30 (ms) Timeout between confetti
untilStopped Boolean false Render confetti continuously until stopConfetti() is called. This ignores confettiCount.
duration Number 6000 (ms) Duration until a conffetti reaches the bottom
colors Array ["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
size Number 1 Multiplier for size of confetti (width and heigh)
bsize Number 1 Multiplier for radius of confetti (border radius)