React Native Skia Confetti is a simple yet fully customizable component designed to create confetti animations in a cannon New Year-style. It works on iOS, Android, and the web.

Installation

npm install react-native-skia-confetti

Usage

1. Import react-native-skia-confetti

import Confetti from 'react-native-skia-confetti';

2. Once you create the Confetti, you have two options or a mix a both:

• Default Confetti : The component will use the shapes which are located in src/components/Shapes

• Custom confetti : Insert custom confetti shapes with the svgs prop. The confetti shapes will consist of a mix of both default and custom shapes. Adding the prop onlyShowCustomSvgs to true will only show the custom shapes.

const ConfettiExample: React.FC = () => (
  <Confetti svgs=[`<svg fill="#000000" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M8.49,12.68v4.61c0,.34,.23,.61,.53,.71v5.48c0,.13-.14,3.21,1.88,5.34,1.22,1.28,2.93,1.94,5.09,1.94s3.88-.65,5.09-1.94c2.02-2.13,1.89-5.21,1.88-5.3v-5.52c.3-.1,.53-.37,.53-.71v-4.61c1.71-.69,2.92-2.36,2.92-4.32,0-2.57-2.09-4.67-4.67-4.67-.49,0-.98,.08-1.46,.23-1.09-1.67-2.93-2.68-4.94-2.68s-3.68,.91-4.79,2.46c-2.74-.22-5.01,1.96-5.01,4.65,0,1.96,1.21,3.63,2.92,4.32Zm11.51,15.11c-.92,.97-2.27,1.46-4,1.46s-3.07-.49-4-1.46c-1.58-1.66-1.48-4.21-1.48-4.28v-5.48h10.96v5.51s.1,2.58-1.48,4.24Zm2.01-14.77v3.51H9.99v-3.51h12.02ZM10.23,5.19c.21,0,.4,.02,.59,.05,.3,.05,.61-.09,.77-.35,.81-1.34,2.22-2.15,3.78-2.15,1.68,0,3.19,.94,3.95,2.45,.09,.18,.25,.31,.43,.38,.19,.06,.39,.05,.57-.04,.45-.23,.95-.35,1.44-.35,1.75,0,3.17,1.42,3.17,3.17s-1.42,3.17-3.17,3.17H10.23c-1.75,0-3.17-1.42-3.17-3.17s1.42-3.17,3.17-3.17Z"></path><path d="M14.26,5.25c1.5,.28,2.59,1.59,2.59,3.11,0,.41,.34,.75,.75,.75s.75-.34,.75-.75c0-2.24-1.6-4.17-3.81-4.59-.4-.07-.8,.19-.88,.6-.08,.41,.19,.8,.6,.88Z"></path><circle cx="13.32" cy="20.07" r="1.25"></circle><circle cx="18.68" cy="20.07" r="1.25"></circle><path d="M17.56,24.5h-3.12c-.41,0-.75,.34-.75,.75s.34,.75,.75,.75h3.12c.41,0,.75-.34,.75-.75s-.34-.75-.75-.75Z"></path></g></svg>`]/>
)

Props

| Name | Type | Description | Required | Default | | ------------------ | ---------------------- | ------------------------------------------- | -------- | --------------- | | count | number | items count to display | | 100 | | activateAnimation | shared value | possibility to prerender items | | false | | batchConfetti | boolean | batch confetti for performance reasons | | false | | origin | {x: number, y: number} | animation position origin | | { x: -10, y: 0} | | explosionSpeed | number | explosion duration (ms) from origin to top | | 350 | | fallSpeed | number | fall duration (ms) from top to bottom | | 3000 | | fadeOut | boolean | make the confettis disappear at the end | | false | | colors | string[] | give your own colors to the confettis | | default colors | | onlyShowCustomSvgs | boolean | only showing custom svgs based on svgs prop | | false | | svgs | string[] | array containing your custom svgs | | [] | | delay | number | cannon / animation delay | | 0 | | minSize | number | min size of confetti shapes | | 20 | | maxSize | number | max size of confetti shapes | | 30 |

Hotdog confetti example

import Confetti from 'react-native-skia-confetti';

/* NOTE: Like hotdog confetti? No problem! */
const ConfettiExample: React.FC = () => (
  <Confetti
    count={100}
    origin={{ x: -10, y: 0 }}
    svgs={[
      <svg fill="#000000" height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M441.685,45.654C430.546,17.92,404.035,0,374.145,0c-37.544,0-68.533,28.585-72.357,65.15 c-33.36,3.433-62.02,26.235-72.69,58.644c-16.444,49.951-55.881,89.48-105.491,105.741c-27.127,8.892-48.047,30.468-55.96,57.715 c-1.245,4.288,1.221,8.773,5.509,10.018c0.753,0.219,1.512,0.323,2.258,0.323c3.504,0,6.734-2.297,7.76-5.831 c6.422-22.115,23.419-39.633,45.468-46.86c54.474-17.854,97.767-61.238,115.813-116.048c8.425-25.589,30.645-43.808,56.748-47.359 c-4.608,122.253-105.489,220.306-228.868,220.318c-35.514,0-65.667,25.365-71.696,60.311c-0.759,4.4,2.192,8.582,6.592,9.341 c0.466,0.08,0.927,0.119,1.384,0.119c3.862,0,7.278-2.776,7.957-6.711c4.687-27.17,28.138-46.892,55.787-46.892 c135.188-0.014,245.183-110.01,245.196-245.221c0-31.203,25.385-56.589,56.589-56.589c23.25,0,43.872,13.939,52.537,35.511 c1.663,4.143,6.368,6.15,10.515,4.489C441.339,54.505,443.349,49.798,441.685,45.654z"></path> </g> </g> <g> <g> <path d="M438.819,64.674c-40.119,0-72.758,32.639-72.758,72.758c0,126.3-102.753,229.053-229.053,229.053 c-37.213,0-67.972,28.089-72.234,64.176c-24.469-3.232-44.214-21.956-48.286-46.892c-0.719-4.406-4.878-7.393-9.282-6.675 c-4.406,0.72-7.394,4.875-6.675,9.282c5.351,32.764,31.729,57.177,64.127,60.54C68.504,483.44,99.48,512,137.008,512 c50.534,0,99.595-9.913,145.822-29.466c44.613-18.87,84.663-45.867,119.038-80.242c34.376-34.375,61.373-74.425,80.244-119.039 c19.552-46.227,29.464-95.287,29.464-145.821C511.576,97.312,478.938,64.674,438.819,64.674z M467.22,276.953 c-18.055,42.687-43.89,81.009-76.785,113.905c-32.895,32.896-71.218,58.729-113.903,76.784 c-44.223,18.705-91.165,28.189-139.524,28.189c-31.204,0-56.589-25.387-56.589-56.589c0-31.203,25.385-56.589,56.589-56.589 c135.215,0,245.221-110.006,245.221-245.221c0-31.203,25.385-56.589,56.589-56.589s56.589,25.387,56.589,56.589 C495.408,185.789,485.925,232.732,467.22,276.953z"></path> </g> </g> <g> <g> <path d="M353.635,62.145c-4.464,0.11-8.091,3.653-8.1,7.916c-0.004,1.893-0.393,3.727-1.13,5.406 c-0.739,1.678-1.798,3.202-3.298,4.473c-3.17,2.752-5.606,5.887-7.295,9.234c-0.845,1.674-1.502,3.402-1.974,5.166 c-0.569,1.752-0.953,3.539-1.147,5.344c-0.398,3.61-0.007,7.301,1.089,10.921c0.938,3.593,2.653,7.131,5.169,10.45 c2.314,3.064,3.345,6.891,2.44,10.57c-0.819,3.695-3.092,6.844-6.374,8.75c-0.889,0.515-1.726,1.066-2.541,1.642 c-0.847,0.567-1.652,1.163-2.418,1.785c-1.53,1.246-2.893,2.598-4.085,4.04c-1.192,1.441-2.213,2.973-3.057,4.577 c-0.426,0.801-0.793,1.625-1.14,2.458c-0.387,0.819-0.729,1.654-1.026,2.504c-1.189,3.4-1.656,7.036-1.365,10.796 c0.192,1.898,0.35,3.736,0.808,5.63c0.438,1.885,1.074,3.786,1.918,5.679c0.78,1.753,1.18,3.606,1.201,5.46 c0.011,0.927-0.073,1.854-0.252,2.767c-0.217,0.896-0.55,1.768-0.964,2.616c-1.67,3.394-4.626,5.92-8.264,6.992 c-3.851,1.208-7.554,2.859-10.529,5.084c-1.502,1.106-2.857,2.339-4.058,3.684c-0.6,0.673-1.163,1.374-1.686,2.102 c-0.557,0.706-1.103,1.423-1.594,2.173c-1.976,2.993-3.31,6.392-3.94,10.101c-0.273,1.883-0.571,3.703-0.593,5.647 c-0.04,1.932,0.109,3.928,0.459,5.972c0.324,1.89,0.253,3.783-0.184,5.586c-0.219,0.901-0.529,1.777-0.927,2.619 c-0.434,0.812-0.972,1.575-1.586,2.294c-2.462,2.873-5.954,4.583-9.743,4.717c-4.029,0.21-8.024,0.894-11.466,2.309 c-1.731,0.698-3.353,1.555-4.854,2.56c-0.75,0.502-1.47,1.042-2.159,1.617c-0.687,0.577-1.417,1.115-2.075,1.728 c-2.667,2.413-4.811,5.38-6.347,8.816c-0.388,0.854-0.72,1.758-1.046,2.652c-0.342,0.876-0.642,1.781-0.901,2.712 c-0.517,1.863-0.866,3.833-1.028,5.896c-0.15,1.909-0.684,3.724-1.551,5.359c-0.433,0.817-0.951,1.59-1.544,2.306 c-0.585,0.727-1.262,1.375-2.047,1.904c-3.09,2.184-6.904,2.994-10.637,2.214c-2.018-0.42-3.999-0.635-5.926-0.656 c-1.953-0.058-3.906,0-5.764,0.278c-3.728,0.538-7.184,1.798-10.256,3.712c-3.138,1.81-5.983,4.135-8.279,7.126 c-2.313,2.959-4.083,6.599-5.36,10.451c-1.144,3.628-3.71,6.545-7.132,8.165c-1.72,0.787-3.505,1.297-5.373,1.245 c-1.86-0.032-3.721-0.442-5.485-1.23c-3.813-1.702-7.671-2.571-11.411-2.67c-0.938-0.03-1.858,0.011-2.786,0.058 c-0.938,0.026-1.867,0.099-2.784,0.219c-1.835,0.238-3.625,0.661-5.352,1.262c-1.727,0.602-3.392,1.381-4.977,2.334 c-1.594,0.929-3.069,2.134-4.524,3.297c-2.877,2.409-5.359,5.493-7.273,9.196c-0.885,1.713-2.081,3.191-3.513,4.373 c-0.716,0.592-1.49,1.109-2.313,1.545c-0.825,0.431-1.715,0.715-2.633,0.944c-3.685,0.884-7.527,0.224-10.737-1.875 c-1.735-1.135-3.52-2.063-5.332-2.791c-0.907-0.367-1.817-0.673-2.737-0.946c-0.927-0.303-1.858-0.558-2.791-0.764 c-3.732-0.825-7.489-0.876-11.11-0.184c-1.811,0.346-3.587,0.878-5.311,1.592c-1.732,0.674-3.426,1.457-5.036,2.462 c-3.223,1.989-6.147,4.699-8.583,8.099c-2.252,3.146-5.592,5.231-9.373,5.547c-4.253,0.428-7.356,4.378-6.931,8.823 c0.426,4.444,4.348,7.688,8.762,7.241c4.08-0.34,7.924-1.78,11.339-3.815c3.417-2.045,6.399-4.766,8.759-8.06 c1.161-1.641,2.593-2.887,4.167-3.916c1.573-1.034,3.304-1.73,5.1-2.073c3.59-0.686,7.444,0.046,10.786,2.341 c1.693,1.151,3.491,2.171,5.343,2.9c1.847,0.712,3.766,1.231,5.727,1.55c3.92,0.639,8.01,0.485,12.02-0.48 c2.012-0.445,3.914-1.22,5.708-2.161c1.796-0.933,3.484-2.036,5.038-3.29c3.109-2.508,5.678-5.622,7.531-9.21 c1.799-3.641,4.777-6.229,8.233-7.426c1.728-0.602,3.574-0.863,5.452-0.755c1.872,0.096,3.799,0.626,5.607,1.403 c3.694,1.649,7.662,2.478,11.678,2.496c2.008,0.009,4.027-0.184,6.024-0.578c0.499-0.098,0.998-0.209,1.494-0.332 c0.487-0.147,0.972-0.308,1.454-0.481c0.965-0.346,1.92-0.742,2.862-1.186c3.766-1.78,7.081-4.24,9.743-7.202 c1.35-1.442,2.453-3.19,3.405-4.97c0.946-1.792,1.711-3.685,2.274-5.655c1.103-3.905,3.633-6.842,6.798-8.675 c3.11-1.932,6.955-2.624,10.903-1.685c8.092,2.076,16.295-0.028,23.175-4.845c0.868-0.587,1.656-1.274,2.395-2.005 c0.745-0.723,1.451-1.478,2.115-2.26c1.328-1.566,2.488-3.246,3.461-5.01c0.972-1.765,1.758-3.613,2.338-5.52 c0.595-1.89,0.855-3.995,0.974-6.038c0.203-4.074,1.93-7.589,4.641-10.051c0.672-0.623,1.434-1.15,2.197-1.66 c0.756-0.518,1.565-0.964,2.422-1.327c1.713-0.728,3.614-1.132,5.635-1.144c2.05-0.012,4.083-0.241,6.072-0.677 c1.971-0.452,3.982-1.03,5.737-1.973c3.582-1.814,6.865-4.404,9.605-7.61c0.679-0.805,1.338-1.619,1.908-2.488 c0.546-0.888,1.047-1.798,1.5-2.725c0.906-1.854,1.622-3.776,2.134-5.732c1.001-3.932,1.311-7.913,0.412-12.026 c-0.811-4.007-0.011-7.844,2.004-10.903c0.503-0.765,1.084-1.482,1.733-2.144c0.603-0.69,1.275-1.323,2.014-1.888 c1.477-1.132,3.216-1.996,5.171-2.51c1.982-0.523,3.893-1.251,5.711-2.169c1.793-0.93,3.604-1.991,5.068-3.338 c3.017-2.646,5.551-5.969,7.406-9.753c0.457-0.949,0.894-1.899,1.227-2.882c0.309-0.994,0.568-1.996,0.777-3.004 c0.418-2.016,0.635-4.051,0.646-6.072c-0.005-4.052-0.689-7.984-2.565-11.744c-1.768-3.681-1.929-7.599-0.725-11.057 c0.301-0.864,0.688-1.702,1.157-2.501c0.448-0.805,0.927-1.588,1.513-2.312c1.161-1.453,2.64-2.709,4.411-3.673 c3.572-1.963,6.754-4.636,9.165-7.878c2.3-3.265,3.97-7.066,4.873-11.155c1-4.076,0.741-8.255-0.149-12.173 c-0.936-3.926-2.569-7.601-5.095-10.825c-2.555-3.191-3.597-6.98-3.206-10.618c0.19-1.817,0.744-3.602,1.646-5.261 c0.848-1.662,1.987-3.204,3.509-4.516c3.071-2.665,5.517-5.926,7.249-9.573c0.433-0.911,0.821-1.846,1.163-2.801 c0.308-0.955,0.545-1.928,0.748-2.919c0.399-1.98,0.606-4.025,0.61-6.102C361.712,65.597,358.098,62.035,353.635,62.145z"></path> </g> </g> </g></svg>
    ]}
  />
)

Futher examples

Please see the examples folder or storybook https://marcuzgabriel.github.io/react-native-reanimated-confetti