React Native Confetti animation

Description

A dynamic confetti animation using a combination of powerful libraries: **react-native-fast-confetti**, **React Native Skia**, **React Native Reanimated**, and **React Native Gesture Handler**. We’ll also add **Math** to calculate distance and apply rotation to items while dragging, making the interaction feel even more natural and engaging. ✨ Features - ✅ Confetti Effects – Powered by [react-native-fast-confetti](https://github.com/AlirezaHadjar/react-native-fast-confetti) and [React Native Skia](https://shopify.github.io/react-native-skia/) for high-performance, visually stunning particles. - ✅ Pan Gesture Support – Users can interact with the confetti elements using pan gestures for a more dynamic experience. - ✅ Physics-Based Rotation – We'll use math calculations to determine the distance moved and apply rotation dynamically for a more realistic effect while dragging. - ✅ runOnJS Integration – Seamlessly call JavaScript methods from your animations for enhanced control. - ✅ Smooth Enter/Exit Animations – Built with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/) to ensure fluid, natural motion. - ✅ Animated Background Effects – A blurred background that appears with a ZoomIn effect for added depth and visual impact. [Check the video tutorial on YouTube](https://youtu.be/MPVUL3MhfZ0)

Installation

bunx @animatereactnative/cli@latest add react-native-confetti-animation

npx @animatereactnative/cli@latest add react-native-confetti-animation

yarn @animatereactnative/cli@latest add react-native-confetti-animation

pnpm dlx @animatereactnative/cli@latest add react-native-confetti-animation

Preview

Dependencies

PackageVersion
@react-navigation/elements^2.6.3
react-native-fast-confetti^0.8.2
react-native-gesture-handler~2.28.0
react-native-reanimated~4.1.0

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

bun add @react-navigation/elements@"^2.6.3" react-native-fast-confetti@"^0.8.2" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

npm install @react-navigation/elements@"^2.6.3" react-native-fast-confetti@"^0.8.2" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

yarn install @react-navigation/elements@"^2.6.3" react-native-fast-confetti@"^0.8.2" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

pnpm install @react-navigation/elements@"^2.6.3" react-native-fast-confetti@"^0.8.2" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

Source code