Bursting colourful crackers with react-native-fireworks

“Don’t let anyone ever dull your sparkle .” ― Unknown ✨✨

image source- VectorStock

Ever felt a need to burst colourful fireworks 🎆 in your mobile app, like when there’s something to celebrate? Here’s an npm package I created for that.

To use it in your react native project, you can install it from here.

Using it as a component is as simple as -

import Fireworks from 'react-native-fireworks';
...
<Fireworks/>

This component accepts a total of 8props, 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 object 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-

<View style={styles.explosionBoundary}>
    {/*<code to draw the light balls>*/}
</View>

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

const styles = StyleSheet.create({
  explosionBoundary: {
    position: 'absolute',
    height: 200,
    width: 200,
  },
});

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.

  this.fadingOpacity = new Animated.Value(1);
  this.movingBall = new Animated.Value(0);

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

animateOpacity() {
  this.fadingOpacity.setValue(1);
  Animated.timing(this.fadingOpacity, {
    toValue: 0,
    duration: 700,
    easing: Easing.ease,
    useNativeDriver: false,
  }).start();
}
animateBall() {
  this.movingBall.setValue(0);
  Animated.timing(this.movingBall, {
    toValue: 1,
    duration: 700,
    easing: Easing.ease,
    useNativeDriver: false,
  }).start();
}

We use thee 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 end 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 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à! the 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 -

The complete code with several customization props is available on Github here.

Thanks a lot for stopping by and being patient. ❤️