Confetti animation - Reanimated

Description

Confetti animation as seen on Twitter by BrandedFeatures or also known as Hashfetti. This animation uses Reanimated to animate the fall down of the elements and it's working with any type of components. As a feature, it will cleanup after itself once the animation has finished, making it really performant. You can change the number of elements and the duration.

Installation

bunx @animatereactnative/cli@latest add confetti-animation-reanimated

npx @animatereactnative/cli@latest add confetti-animation-reanimated

yarn @animatereactnative/cli@latest add confetti-animation-reanimated

pnpm dlx @animatereactnative/cli@latest add confetti-animation-reanimated

Preview

Dependencies

PackageVersion
@expo/vector-icons^15.0.2
expo-image~3.0.8
moti^0.29.0
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @expo/vector-icons@"^15.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0"

npm install @expo/vector-icons@"^15.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0"

yarn install @expo/vector-icons@"^15.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0"

pnpm install @expo/vector-icons@"^15.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0"

Source code