DOCSEARCHbyAlgolia
Submit Docs

react-native-fast-confetti

repository·main·Indexed 20 days ago

https://github.com/alirezahadjar/react-native-fast-confetti

A high-performance confetti animation library for React Native utilizing the Skia Atlas API. It provides components for standard falling confetti (<Confetti />), seamless streams (<ContinuousConfetti />), burst effects (<PIConfetti />), and aimed cannons (<CannonConfetti />). The library supports custom textures via Skia images or SVGs, per-flake color configuration, and respects system Reduce Motion settings. Requires react-native-reanimated, @shopify/react-native-skia, and react-native-worklets.

Tokens
12.4K
Snippets
28
Records
42
Agent score
68%

What's inside react-native-fast-confetti

  1. Configure custom textures in v2

    main

    In v2, textures (images or SVGs) can be applied at two levels:

    1. Parent-level: Applying image or svg to the main component (e.g., <Confetti image={image}>) applies that texture to all flakes.
    2. Flake-level: Applying image or svg to a <*.Flake /> child overrides the parent texture for that specific flake type. This allows for mixed textures in a single animation.
    // Parent-level texture
<Confetti image={image}>
  <Confetti.Flake size={50} />
</Confetti>

// Flake-level overrides
<Confetti>
  <Confetti.Flake size={50} image={image} />
  <Confetti.Flake size={30} svg={svg} />
  <Confetti.Flake width={8} height={14} />
</Confetti>

  3. Apply Custom Textures to confetti flakes

    main

    You can use Skia images or SVGs as textures for your confetti. You can apply a texture to the parent component (applying it to all flakes) or to individual <Flake /> components (which overrides the parent texture).

    • Use the image prop for Skia images.
    • Use the svg prop for Skia SVGs.
    import { useImage, useSVG } from '@shopify/react-native-skia';
import { Confetti } from 'react-native-fast-confetti';

const moneyImage = useImage(require('./money.png'));
const snowSvg = useSVG(require('./snowflake.svg'));

// Parent-level texture — applies to all flakes
<Confetti autoplay image={moneyImage}>
  <Confetti.Flake size={50} />
</Confetti>

// Flake-level texture — per flake
<Confetti autoplay>
  <Confetti.Flake size={50} image={moneyImage} />
  <Confetti.Flake size={30} svg={snowSvg} />
  <Confetti.Flake width={8} height={14} />
</Confetti>

// Parent default + flake override
<Confetti autoplay image={moneyImage}>
  <Confetti.Flake size={50} />               {/* uses money image */}
  <Confetti.Flake size={30} svg={snowSvg} /> {/* overrides with SVG */}
</Confetti>

  4. Migrate `<Confetti />` from v1 to v2

    main

    In v2, the <Confetti /> component uses a composition pattern. Instead of passing flakeSize as a prop, you must provide <Confetti.Flake /> as a child. The isInfinite prop has been renamed to infinite.

    <Confetti
  count={200}
  autoplay
  infinite
  colors={['#FF5733', '#33FF57']}
  fadeOutOnEnd
>
  <Confetti.Flake width={8} height={16} />
</Confetti>

  5. Migrate `<CannonConfetti />` from v1 to v2

    main

    In v2, the single <Confetti /> component with cannonsPositions is replaced by the dedicated <CannonConfetti /> component. You define multiple blast points by nesting multiple <CannonConfetti.Origin /> components inside <CannonConfetti />.

    <CannonConfetti autoplay>
  <CannonConfetti.Origin position={{ x: 0, y: 300 }}>
    <CannonConfetti.Flake size={12} />
  </CannonConfetti.Origin>
  <CannonConfetti.Origin position={{ x: 400, y: 300 }}>
    <CannonConfetti.Flake size={12} />
  </CannonConfetti.Origin>
</CannonConfetti>

  7. Check compatibility for react-native-fast-confetti

    main

    Compatibility for react-native-fast-confetti depends on your versions of react-native-reanimated, react-native-worklets, and react-native-skia.

    Key Compatibility Rules:

    • Skia: Follow the official React Native Skia installation requirements. Current Skia versions require React Native >=0.79 and React >=19. For older projects (React Native <=0.78 or React <=18), use Skia 1.12.4 or below.
    • Worklets: For version 2.0.0 and above, Worklets are required via Reanimated 4.
    • Reanimated: Ensure your Reanimated version matches the requirements for your specific version of the confetti library.

  8. Migrate `<PIConfetti />` from v1 to v2

    main

    In v2, <PIConfetti /> uses composition. Blast positions and counts are now defined on <PIConfetti.Origin /> children. You can use named positions like "center" or "bottom-left" for the blastPosition prop on the origin.

    <PIConfetti>
  <PIConfetti.Origin blastPosition="center" count={100}>
    <PIConfetti.Flake size={12} />
  </PIConfetti.Origin>
  <PIConfetti.Origin blastPosition="bottom-left" count={100}>
    <PIConfetti.Flake size={12} />
  </PIConfetti.Origin>
</PIConfetti>

  10. Define custom flake textures and styles

    main

    You can customize the appearance of confetti flakes by providing specific textures or styles. Textures can be provided as either an image (SkImage) or an SVG (SkSVG) from @shopify/react-native-skia.

    When using children components to define flakes, you can specify:

    • image: An SkImage for image-based textures.
    • svg: An SkSVG for vector-based textures.
    • flakeStyle: The visual style of the flake (e.g., 'glossy').
    • colors: An array of specific colors for that flake type.
    • size or width/height: The dimensions of the flake.
    • radius: The corner radius for the flake shape.
    // Example of how flake properties are structured via props
<Flake 
  width={20} 
  height={20} 
  flakeStyle="glossy" 
  colors={['#ff0000', '#00ff00']} 
  svg={mySvg} 
/>

  11. Use custom textures (Images or SVGs) for confetti

    main

    You can replace the default confetti flakes with custom images or SVGs by setting the type prop and providing the corresponding asset via flakeImage (for images) or flakeSvg (for SVGs). This requires using @shopify/react-native-skia hooks like useImage and useSVG to load the assets.

    import { Confetti } from 'react-native-fast-confetti';
import { useImage, useSVG } from '@shopify/react-native-skia';

const snowFlakeSVG = useSVG(require('../assets/snow-flake.svg'));
const moneyStackImage = useImage(require('../assets/money-stack.png'));

return (
    <View>
    <Confetti
      type="image"
      flakeImage={moneyStackImage}
    />
    <Confetti
      type="svg"
      flakeSvg={snowFlakeSVG}
    />
    </View>
)

  12. Use the <ContinuousConfetti /> component

    main

    The <ContinuousConfetti /> component creates a continuous effect where flakes fall from the top indefinitely without stopping.

    import { ContinuousConfetti } from 'react-native-fast-confetti';

return (
    <View>
    {...Your other components}
    <ContinuousConfetti />
    {...Your other components}
    </View>
)