Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-fullscreen-animations

robertgagnon72648ISC0.0.25

A react native package that handles fullscreen animations for your app

android, animated, animation, confetti, fall, ios, react, react-native, reanimated

readme

react-native-fullscreen-animations

Overview

react-native-fullscreen-animations is a library to provides easy to use fullscreen animations. It's based of react-native-reanimated which allows for good performance on both Android and iOS. For now, the main export is the <Confetti /> component

If there are suggestions or ideas for improvement, please open up an issue and I'll try to get to it

Confetti animation demo

Props

Prop Type Required? Default Description
count number No Half of the device width The number of pieces of confetti that should be rendered
colors string[] No [#a864fd, #29cdff, #78ff44, #ff718d, #fdff6a] An array of the colors that the confetti items will be made from. These must be hex values
fallDuration number No 10000 The time in which it takes for the confetti items to fall. This value is in milliseconds
zIndex number No 1000 Allows you to set the zIndex without a hacky solution
startDelay number No 0 The number of milliseconds that the animation should wait to start
preAnimation () => void No () => {} Function that runs before the animation is started
postAnimation () => void No () => {} Function that runs once the animation is completed

To do

  • <input disabled="" type="checkbox"> Bundle so just the main exports can be imported
  • <input disabled="" type="checkbox"> Create interactive documentation
  • <input disabled="" type="checkbox"> Add tests and add the test report badge to the README
  • <input disabled="" type="checkbox"> Add to Circle CI and add the badge to the README
  • <input disabled="" type="checkbox"> Add a confetti cannon
  • <input disabled="" type="checkbox"> Add multiple confetti cannons
  • <input disabled="" type="checkbox"> Add a money drop
  • <input disabled="" type="checkbox"> Change confetti name to ConfettiDrop
  • <input disabled="" type="checkbox"> Add infinite confetti
  • <input disabled="" type="checkbox"> Floating balloons
  • <input disabled="" type="checkbox"> Add firework confetti
  • <input disabled="" type="checkbox"> Add fireworks
  • <input disabled="" type="checkbox"> Add snowfalling
  • <input disabled="" type="checkbox"> Add rain falling
  • <input disabled="" type="checkbox"> Add particle swirls
  • <input disabled="" type="checkbox"> Slinky
  • <input checked="" disabled="" type="checkbox"> Doucment the props in the README
  • <input checked="" disabled="" type="checkbox"> Confetti items are typically the same width. Make them all the same width and differing heights, but also rotate them to a random degree before they start falling
  • <input checked="" disabled="" type="checkbox"> Simulate air resistance. Move them from left to right?
  • <input checked="" disabled="" type="checkbox"> Add a pre animation callback
  • <input checked="" disabled="" type="checkbox"> Add a post animation callback
  • <input checked="" disabled="" type="checkbox"> Update default count to be dependent on screen width
  • <input checked="" disabled="" type="checkbox"> Create a publish script that automatically builds and increments the version number