Fireworks

A set of animated fireworks.

• Set of fireworks
• Single firework

Set of fireworks

Name	Type	Description
autoHide?	boolean	Whether the fireworks should hide (fade out) automatically or not (default is true).
particleRadius?	number	Radius of the firework particle (default is 8).
theme?	string[]	An array of colors used to add theming to the animation. Fiesta theme is used by default.
fireworkRadius?	number	Radius of the firework (default is 400).

import { StyleSheet, View } from 'react-native';
import { Fireworks } from 'react-native-fiesta';

function App() {
  return (
    <View style={styles.container}>
      <Fireworks />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Single firework

You can also use a single firework. Notice that you need to wrap the firework with a Canvas, not doing this will crash the application since we need to run the animation inside a Canvas.

Name	Type	Description
initialPosition?	{ x: number; y: number; }	Initial position of the particles.
color?	boolean	Firework color (default is #000).
autoHide?	boolean	Whether the fireworks should hide (fade out) automatically or not (default is true).
particleRadius?	number	Radius of the firework particle (default is 8).
fireworkRadius?	number	Radius of the firework (default is 400).

import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { Firework } from 'react-native-fiesta';

function App() {
  return (
    <Canvas style={styles.canvas}>
      <Firework
        color="rgba(255, 0, 255, 0.4)"
        initialPosition={{ x: 0, y: 50 }}
      />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
});