A customizable firework like animation that can be used as a component in a react native project.

npm i react-native-fireworks

import Fireworks from 'react-native-fireworks'

Minimal code to ignite the fireworks 🎇

<Fireworks/>

The parameters like the speed of the explosions, the density of fireworks and the colors of the fire can be customized.

<Fireworks
  speed={3}
  density={8}
  colors={['#ff0','#ff3','#cc0','#ff4500','#ff6347']}
  iterations={5}
  height={150}
  width={100}
  zIndex={2}
  circular={true}
/>

There are 8 props and all the 8 are optional.

It denotes how fast will an individual cracker explode. It is a number with possible values- 1,2 and 3. 1 is for the slowest and 3 for the fastest. The default value is 2.

It denotes the number of crackers exploding simultaneously. It is a number between 1 and 10. The default value is 5.

The fireworks explode into colorful light crystals. You can set the colors of your choice by passing their hex codes or rgb values (as Strings) in an array. If you don't pass any colors, luckily you will get light crystals of all possible colors ranging from 'rgb(0,0,0)' to 'rgb(255,255,255)'.

It denotes the number of times the explosions take place. The density prop controls the number of simultaneous explosions whereas iterations tells how many times the simultaneous explosions should occur.

It can be any number or the string- 'infinite'. The default value is 'infinite'.

Height of the area in which fireworks are rendered. Its default value is the height of the screen.

Width of the area in which fireworks are rendered. Its default value is the width of the screen.

zIndex of the Firework component. Its default value is 10.

When set to true, the crackers burst making a circle as shown below. The default value is false.