react-native-confetti-reanimated 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Andy A
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,277 @@
+# 🎉 react-native-confetti-reanimated
+
+A high-performance confetti component for React Native, powered by [Reanimated 4](https://docs.swmansion.com/react-native-reanimated/). Inspired by [canvas-confetti](https://github.com/catdad/canvas-confetti), fully compatible with Expo.
+
+[![npm version](https://img.shields.io/npm/v/react-native-confetti-reanimated.svg)](https://www.npmjs.com/package/react-native-confetti-reanimated)
+[![license](https://img.shields.io/npm/l/react-native-confetti-reanimated.svg)](https://github.com/andydev271/react-native-confetti-reanimated/blob/main/LICENSE)
+
+## Preview
+
+<!-- Add your demo GIF here after generating it -->
+![Confetti Demo](./assets/demo.gif)
+
+> **Note**: To generate demo GIFs, run the example app and record the screen. See [example/README.md](./example/README.md) for instructions.
+
+## Features
+
+- 🚀 **High Performance** - Built with Reanimated 4 for smooth 60fps animations on UI thread
+- 📱 **Expo Compatible** - Works seamlessly with Expo managed workflow
+- 🎨 **Fully Customizable** - Control colors, shapes, physics, and more
+- 🎭 **Multiple Shapes** - Supports squares, circles, and triangles
+- 🎯 **Preset Effects** - Ready-to-use effects like fireworks, snow, stars
+- 🌈 **Canvas Confetti API** - Familiar API inspired by canvas-confetti
+- 📦 **TypeScript** - Full TypeScript support
+- 🔧 **Lightweight** - Minimal dependencies
+
+## Installation
+
+```bash
+npm install react-native-confetti-reanimated react-native-reanimated react-native-worklets
+```
+
+Or with Expo:
+
+```bash
+npx expo install react-native-confetti-reanimated react-native-reanimated react-native-worklets
+```
+
+### Setup
+
+Add the Babel plugin to your `babel.config.js`:
+
+**For Expo projects:**
+
+```javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-worklets/plugin',
+    ],
+  };
+};
+```
+
+**For React Native CLI projects:**
+
+```javascript
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    'react-native-worklets/plugin',
+  ],
+};
+```
+
+> ⚠️ **Important**: `react-native-worklets/plugin` must be listed last. Restart your app after updating Babel config.
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { View, Button } from 'react-native';
+import { ConfettiCanvas, useConfetti } from 'react-native-confetti-reanimated';
+
+export default function App() {
+  const { confettiRef, fire } = useConfetti();
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="🎉 Celebrate!" onPress={() => fire()} />
+      <ConfettiCanvas ref={confettiRef} />
+    </View>
+  );
+}
+```
+
+## Usage Examples
+
+### Using Presets
+
+```tsx
+import { presets } from 'react-native-confetti-reanimated';
+
+// Celebration burst
+fire(presets.celebration);
+
+// Fireworks effect
+fire(presets.fireworks);
+
+// Snow effect
+fire(presets.snow);
+
+// Stars
+fire(presets.stars);
+```
+
+### Custom Configuration
+
+```tsx
+fire({
+  particleCount: 100,
+  spread: 70,
+  origin: { y: 0.6 },
+  colors: ['#ff0000', '#00ff00', '#0000ff'],
+  shapes: ['square', 'circle', 'triangle'],
+  startVelocity: 45,
+  gravity: 1,
+  decay: 0.9,
+});
+```
+
+### Directional Effects
+
+```tsx
+// Left cannon
+fire(presets.leftCannon);
+
+// Right cannon
+fire(presets.rightCannon);
+
+// Bottom cannon (shoot upward)
+fire(presets.bottomCannon);
+```
+
+### Continuous Effect
+
+```tsx
+const startContinuous = () => {
+  const interval = setInterval(() => {
+    fire({ particleCount: 10 });
+  }, 200);
+
+  // Stop after 3 seconds
+  setTimeout(() => clearInterval(interval), 3000);
+};
+```
+
+## API Reference
+
+### `ConfettiCanvas`
+
+Main component that renders confetti particles.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Custom style for container |
+| `zIndex` | `number` | `1000` | Z-index of confetti layer |
+| `fullScreen` | `boolean` | `true` | Whether to cover full screen |
+
+### `useConfetti()`
+
+Hook for controlling confetti.
+
+**Returns:**
+- `confettiRef` - Ref to pass to ConfettiCanvas
+- `fire(config?)` - Function to trigger confetti
+- `reset()` - Clear all confetti
+
+### Configuration Options
+
+```typescript
+interface ConfettiConfig {
+  particleCount?: number;      // Default: 50
+  angle?: number;              // Default: 90 (degrees)
+  spread?: number;             // Default: 45 (degrees)
+  startVelocity?: number;      // Default: 45
+  decay?: number;              // Default: 0.9
+  gravity?: number;            // Default: 1
+  drift?: number;              // Default: 0
+  duration?: number;           // Default: 3000 (ms)
+  colors?: string[];           // Default: vibrant colors
+  scalar?: number;             // Default: 1
+  origin?: { x?: number; y?: number }; // Default: { x: 0.5, y: 0.5 }
+  shapes?: Array<'square' | 'circle' | 'triangle'>; // Default: ['square', 'circle']
+  tilt?: boolean;              // Default: true
+  tiltAngleIncrement?: number; // Default: 10
+}
+```
+
+### Available Presets
+
+```typescript
+presets.celebration    // 🎊 Basic celebration
+presets.fireworks      // 🎆 Explosive effect
+presets.realistic      // ✨ Realistic confetti
+presets.snow           // ❄️ Falling snow
+presets.stars          // ⭐ Twinkling stars
+presets.leftCannon     // ⬅️ Left side cannon
+presets.rightCannon    // ➡️ Right side cannon
+presets.bottomCannon   // ⬆️ Bottom cannon
+```
+
+## Example App
+
+Check out the `example` directory for a complete demo app with all features.
+
+```bash
+cd example
+npm install
+npm start
+```
+
+Then use Expo Go to scan the QR code or press `i` for iOS / `a` for Android.
+
+## Platform Support
+
+- ✅ iOS
+- ✅ Android  
+- ✅ Expo (SDK 50+)
+
+## Requirements
+
+- React Native ≥ 0.74 (New Architecture/Fabric)
+- React Native Reanimated ≥ 4.0.0
+- React Native Worklets ≥ 0.5.0
+- Expo SDK ≥ 50 (if using Expo)
+
+> **Note**: Reanimated 4 requires the React Native New Architecture (Fabric)
+
+## Troubleshooting
+
+### Confetti not appearing?
+
+1. Ensure `ConfettiCanvas` is in your component tree
+2. Verify Babel plugin is configured (`react-native-worklets/plugin`)
+3. Restart your app completely after Babel changes
+4. Clear Metro cache: `npx react-native start --reset-cache`
+5. Make sure you're using React Native New Architecture (Fabric)
+
+### Performance issues?
+
+- Reduce `particleCount` (recommended: 50-100)
+- Shorten `duration` (recommended: 2-3 seconds)
+- Ensure you're using the latest version of Reanimated
+
+### TypeScript errors?
+
+```bash
+npm install --save-dev @types/react @types/react-native
+```
+
+## Contributing
+
+Contributions are welcome! Please see [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+MIT © [Andy A](https://github.com/andydev271)
+
+## Credits
+
+- Inspired by [canvas-confetti](https://github.com/catdad/canvas-confetti) by @catdad
+- Built with [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) v4
+- Uses [react-native-worklets](https://github.com/software-mansion/react-native-worklets)
+
+## Links
+
+- 📦 [npm](https://www.npmjs.com/package/react-native-confetti-reanimated)
+- 🐛 [Issues](https://github.com/andydev271/react-native-confetti-reanimated/issues)
+- 💬 [Discussions](https://github.com/andydev271/react-native-confetti-reanimated/discussions)
+
+---
+
+Made with ❤️ and confetti

package/lib/commonjs/ConfettiCanvas.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfettiCanvas = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _utils = require("./utils");
+var _ConfettiParticle = require("./ConfettiParticle");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ConfettiCanvas = exports.ConfettiCanvas = /*#__PURE__*/_react.default.forwardRef(({
+  containerStyle,
+  zIndex = 1000,
+  fullScreen = true
+}, ref) => {
+  const [particles, setParticles] = (0, _react.useState)([]);
+  const [activeCount, setActiveCount] = (0, _react.useState)(0);
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const fire = (0, _react.useCallback)((config = {}) => {
+    return new Promise(resolve => {
+      const mergedConfig = {
+        ..._utils.DEFAULT_CONFIG,
+        ...config,
+        origin: {
+          ..._utils.DEFAULT_CONFIG.origin,
+          ...config.origin
+        }
+      };
+      const newParticles = (0, _utils.createConfettiParticles)(mergedConfig, width, height);
+      setParticles(prev => [...prev, ...newParticles]);
+      setActiveCount(prev => prev + newParticles.length);
+
+      // Resolve after the duration
+      setTimeout(() => {
+        resolve(null);
+      }, mergedConfig.duration);
+    });
+  }, [width, height]);
+  const reset = (0, _react.useCallback)(() => {
+    setParticles([]);
+    setActiveCount(0);
+  }, []);
+  (0, _react.useImperativeHandle)(ref, () => {
+    const confetti = fire;
+    confetti.reset = reset;
+    return confetti;
+  }, [fire, reset]);
+  const handleParticleComplete = (0, _react.useCallback)(particleId => {
+    setActiveCount(prev => prev - 1);
+    setParticles(prev => {
+      // Clean up completed particles periodically
+      if (prev.length > 100) {
+        return prev.filter(p => p.id !== particleId).slice(-50);
+      }
+      return prev;
+    });
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, fullScreen && styles.fullScreen, {
+      zIndex
+    }, containerStyle],
+    pointerEvents: "none",
+    children: particles.map(particle => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConfettiParticle.ConfettiParticle, {
+      particle: particle,
+      duration: _utils.DEFAULT_CONFIG.duration,
+      onComplete: () => handleParticleComplete(particle.id)
+    }, particle.id))
+  });
+});
+ConfettiCanvas.displayName = 'ConfettiCanvas';
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  },
+  fullScreen: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+//# sourceMappingURL=ConfettiCanvas.js.map

package/lib/commonjs/ConfettiCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_utils","_ConfettiParticle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ConfettiCanvas","exports","React","forwardRef","containerStyle","zIndex","fullScreen","ref","particles","setParticles","useState","activeCount","setActiveCount","width","height","useWindowDimensions","fire","useCallback","config","Promise","resolve","mergedConfig","DEFAULT_CONFIG","origin","newParticles","createConfettiParticles","prev","length","setTimeout","duration","reset","useImperativeHandle","confetti","handleParticleComplete","particleId","filter","p","id","slice","jsx","View","style","styles","container","pointerEvents","children","map","particle","ConfettiParticle","onComplete","displayName","StyleSheet","create","position","top","left","right","bottom"],"sourceRoot":"../../src","sources":["ConfettiCanvas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ConfettiParticle.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfettiParticle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ConfettiParticle = ({
+  particle,
+  duration,
+  onComplete
+}) => {
+  const translateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const rotation = (0, _reactNativeReanimated.useSharedValue)(particle.rotation);
+  const opacity = (0, _reactNativeReanimated.useSharedValue)(1);
+  (0, _react.useEffect)(() => {
+    // Animate the particle
+    translateX.value = (0, _reactNativeReanimated.withTiming)(particle.velocity.x * (duration / 16), {
+      duration,
+      easing: _reactNativeReanimated.Easing.linear
+    });
+    translateY.value = (0, _reactNativeReanimated.withTiming)(particle.velocity.y * (duration / 16), {
+      duration,
+      easing: _reactNativeReanimated.Easing.bezier(0.33, 1, 0.68, 1) // Custom easing for gravity effect
+    });
+    rotation.value = (0, _reactNativeReanimated.withTiming)(particle.rotation + particle.rotationVelocity * (duration / 16), {
+      duration,
+      easing: _reactNativeReanimated.Easing.linear
+    });
+    opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
+      duration,
+      easing: _reactNativeReanimated.Easing.linear
+    }, finished => {
+      if (finished && onComplete) {
+        (0, _reactNativeReanimated.runOnJS)(onComplete)();
+      }
+    });
+  }, [duration, onComplete, opacity, particle, rotation, translateX, translateY]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    return {
+      transform: [{
+        translateX: translateX.value
+      }, {
+        translateY: translateY.value
+      }, {
+        rotate: `${rotation.value}deg`
+      }],
+      opacity: opacity.value
+    };
+  });
+  const renderShape = () => {
+    const baseStyle = [styles.particle, {
+      width: particle.size,
+      height: particle.size,
+      backgroundColor: particle.color
+    }];
+    if (particle.shape === 'circle') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [...baseStyle, styles.circle, animatedStyle]
+      });
+    } else if (particle.shape === 'triangle') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [...baseStyle, styles.transparent, animatedStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          style: [styles.triangle, {
+            borderLeftWidth: particle.size / 2,
+            borderRightWidth: particle.size / 2,
+            borderBottomWidth: particle.size,
+            borderBottomColor: particle.color
+          }]
+        })
+      });
+    }
+
+    // Square (default)
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [...baseStyle, animatedStyle]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [styles.container, {
+      left: particle.x,
+      top: particle.y
+    }],
+    children: renderShape()
+  });
+};
+exports.ConfettiParticle = ConfettiParticle;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  particle: {
+    position: 'absolute'
+  },
+  circle: {
+    borderRadius: 999
+  },
+  transparent: {
+    backgroundColor: 'transparent'
+  },
+  triangle: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent'
+  }
+});
+//# sourceMappingURL=ConfettiParticle.js.map

package/lib/commonjs/ConfettiParticle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ConfettiParticle","particle","duration","onComplete","translateX","useSharedValue","translateY","rotation","opacity","useEffect","value","withTiming","velocity","x","easing","Easing","linear","y","bezier","rotationVelocity","finished","runOnJS","animatedStyle","useAnimatedStyle","transform","rotate","renderShape","baseStyle","styles","width","size","height","backgroundColor","color","shape","jsx","View","style","circle","transparent","children","triangle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderBottomColor","container","left","top","exports","StyleSheet","create","position","borderRadius","borderStyle","borderLeftColor","borderRightColor"],"sourceRoot":"../../src","sources":["ConfettiParticle.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConfettiCanvas", {
+  enumerable: true,
+  get: function () {
+    return _ConfettiCanvas.ConfettiCanvas;
+  }
+});
+Object.defineProperty(exports, "presets", {
+  enumerable: true,
+  get: function () {
+    return _presets.presets;
+  }
+});
+Object.defineProperty(exports, "useConfetti", {
+  enumerable: true,
+  get: function () {
+    return _useConfetti.useConfetti;
+  }
+});
+var _ConfettiCanvas = require("./ConfettiCanvas");
+var _useConfetti = require("./useConfetti");
+var _presets = require("./presets");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ConfettiCanvas","require","_useConfetti","_presets"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}