rnc

react-native-confetti

Raining confetti made with react native animations

Showing:

Popularity

Downloads/wk

3.9K

GitHub Stars

202

Maintenance

Last Commit

3yrs ago

Contributors

16

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial