Bursting Colourful Crackers With react-native-fireworks

This component accepts a total of 8 props, all of which are optional. Below is a demonstration that uses all the 8 props-

Behind the scenes

This is my first package on npm. I created it using Animated class that comes with React Native. For creating firework-like objects, I designed colourful circles of small radii moving in all the directions randomly and fading away.

So basically, a single firecracker consists of some 30 small circles of different colours. These circles are initially positioned at the centre of a square of width 200.

Step 1. Drawing a single firecracker ?

We begin with a square box that will contain the colourful light balls:

The box with style explosionBoundary has a fixed height and width of 200 each. The coloured light balls will move within this boundary.

Next, we draw some balls, say 30 balls, and fill them with random colours. These balls are positioned at the centre of the square box that we made above.

At this point, we can only see a small circle because all the balls are positioned at the same point and they all overlap. So, we need to move them in different directions to be able to see them.

Step 2. Bursting the cracker ?

To move the balls we will use Animated class from React Native. We start by creating two variables that will control the opacity and position of the light balls.

Now we use Animated.timing with these variables and create functions that will actually animate the objects.

We use the variables this.fadingOpacity and this.movingBall to move the balls in all the directions and fade them simultaneously. At this point, our code looks like:

The above code is enough to burst a single firecracker, and here it does!

Notice that the initial positions- top and left of all the balls are the same, i.e. 100, but the final positions are randomly set. So the distances travelled by each ball will be different. Also, the time taken by each ball to move from the initial position to the final position is the same. Different distances and same time result in different velocities. So the light balls move in all different directions with different velocities.

But a single firecracker is boring.

For celebrations, we would love to burst many crackers in a series. Also, at least 4 or 5 should burst simultaneously to cover up the empty space.

Step 3. Bursting many at a time ????

We use a variable called density that denotes the number of crackers that will burst simultaneously. The x and y coordinates (top and left positions) of each cracker are set randomly. We have two arrays x and y declared as state variables. Their values change at the end of every explosion, so every new explosion takes place at a new location on the screen.

Voilà! An amazing fireworks animation is ready:

---

Bonus- Circular firecrackers

Crackers are more elegant when they burst into a circular path. The above code can be modified a bit to produce circular crackers.

We used random values between 0 and 200 for the final x and y positions of the light balls, putting the initial position at the centre (100,100) of the explosion box. This made the balls to move in random directions.

To make their path circular we need to calculate the x and y positions of the balls with the help of a simple equation x² +y² = r². This is the equation for a circle in the simplest form when the centre of the circle lies at the origin. In our case, we have a square box (200 x 200) where we will make the circular path of explosion.

We use the above illustration to draw the circular path. The radius of the circle is 100 and the centre lies at (100,100).

So our equation will now become:

(x-100)² + (y-100)² = 100².

Using this equation we plot some 20 points in a circular path. At these points, we will draw our light balls. Also, we make the balls bigger as they explode.

This results in: