• Stars
    star
    220
  • Rank 180,422 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

  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)