react-native-confetti-reanimated 0.1.0

package/src/ConfettiCanvas.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useImperativeHandle, useState } from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import type { ConfettiConfig, ConfettiMethods } from './types';
+import { createConfettiParticles, DEFAULT_CONFIG } from './utils';
+import { ConfettiParticle } from './ConfettiParticle';
+import type { ConfettiParticle as ConfettiParticleType } from './types';
+
+export interface ConfettiCanvasProps {
+  /**
+   * Style for the confetti container
+   */
+  containerStyle?: any;
+  
+  /**
+   * Z-index for the confetti container
+   * @default 1000
+   */
+  zIndex?: number;
+
+  /**
+   * Whether confetti should be allowed to go outside of safe area
+   * @default true
+   */
+  fullScreen?: boolean;
+}
+
+export const ConfettiCanvas = React.forwardRef<ConfettiMethods, ConfettiCanvasProps>(
+  ({ containerStyle, zIndex = 1000, fullScreen = true }, ref) => {
+    const [particles, setParticles] = useState<ConfettiParticleType[]>([]);
+    const [activeCount, setActiveCount] = useState(0);
+    const { width, height } = useWindowDimensions();
+
+    const fire = useCallback(
+      (config: ConfettiConfig = {}): Promise<null> => {
+        return new Promise(resolve => {
+          const mergedConfig = {
+            ...DEFAULT_CONFIG,
+            ...config,
+            origin: {
+              ...DEFAULT_CONFIG.origin,
+              ...config.origin,
+            },
+          };
+
+          const newParticles = 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 = useCallback(() => {
+      setParticles([]);
+      setActiveCount(0);
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => {
+        const confetti = fire as ConfettiMethods;
+        confetti.reset = reset;
+        return confetti;
+      },
+      [fire, reset]
+    );
+
+    const handleParticleComplete = useCallback((particleId: string) => {
+      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 (
+      <View
+        style={[
+          styles.container,
+          fullScreen && styles.fullScreen,
+          { zIndex },
+          containerStyle,
+        ]}
+        pointerEvents="none">
+        {particles.map(particle => (
+          <ConfettiParticle
+            key={particle.id}
+            particle={particle}
+            duration={DEFAULT_CONFIG.duration}
+            onComplete={() => handleParticleComplete(particle.id)}
+          />
+        ))}
+      </View>
+    );
+  }
+);
+
+ConfettiCanvas.displayName = 'ConfettiCanvas';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  fullScreen: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+

package/src/ConfettiParticle.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+  runOnJS,
+} from 'react-native-reanimated';
+import type { ConfettiParticle as ConfettiParticleType } from './types';
+
+interface Props {
+  particle: ConfettiParticleType;
+  duration: number;
+  onComplete?: () => void;
+}
+
+export const ConfettiParticle: React.FC<Props> = ({ particle, duration, onComplete }) => {
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const rotation = useSharedValue(particle.rotation);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    // Animate the particle
+    translateX.value = withTiming(particle.velocity.x * (duration / 16), {
+      duration,
+      easing: Easing.linear,
+    });
+
+    translateY.value = withTiming(particle.velocity.y * (duration / 16), {
+      duration,
+      easing: Easing.bezier(0.33, 1, 0.68, 1), // Custom easing for gravity effect
+    });
+
+    rotation.value = withTiming(
+      particle.rotation + particle.rotationVelocity * (duration / 16),
+      {
+        duration,
+        easing: Easing.linear,
+      }
+    );
+
+    opacity.value = withTiming(
+      0,
+      {
+        duration,
+        easing: Easing.linear,
+      },
+      finished => {
+        if (finished && onComplete) {
+          runOnJS(onComplete)();
+        }
+      }
+    );
+  }, [duration, onComplete, opacity, particle, rotation, translateX, translateY]);
+
+  const animatedStyle = 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 (
+        <Animated.View style={[...baseStyle, styles.circle, animatedStyle]} />
+      );
+    } else if (particle.shape === 'triangle') {
+      return (
+        <Animated.View style={[...baseStyle, styles.transparent, animatedStyle]}>
+          <Animated.View
+            style={[
+              styles.triangle,
+              {
+                borderLeftWidth: particle.size / 2,
+                borderRightWidth: particle.size / 2,
+                borderBottomWidth: particle.size,
+                borderBottomColor: particle.color,
+              },
+            ]}
+          />
+        </Animated.View>
+      );
+    }
+
+    // Square (default)
+    return <Animated.View style={[...baseStyle, animatedStyle]} />;
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          left: particle.x,
+          top: particle.y,
+        },
+      ]}>
+      {renderShape()}
+    </Animated.View>
+  );
+};
+
+const styles = 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',
+  },
+});
+

package/src/index.tsx

@@ -0,0 +1,6 @@
+export { ConfettiCanvas } from './ConfettiCanvas';
+export { useConfetti } from './useConfetti';
+export { presets } from './presets';
+export type { ConfettiConfig, ConfettiMethods, ConfettiParticle } from './types';
+export type { ConfettiCanvasProps } from './ConfettiCanvas';
+

package/src/presets.ts

@@ -0,0 +1,126 @@
+import type { ConfettiConfig } from './types';
+
+/**
+ * Predefined confetti presets for common use cases
+ */
+
+/**
+ * Basic celebration with confetti from the center
+ */
+export const celebration: ConfettiConfig = {
+  particleCount: 100,
+  spread: 70,
+  origin: { y: 0.6 },
+};
+
+/**
+ * Fireworks effect
+ */
+export const fireworks: ConfettiConfig = {
+  particleCount: 150,
+  spread: 360,
+  startVelocity: 30,
+  decay: 0.94,
+  scalar: 1.2,
+};
+
+/**
+ * Confetti from the bottom
+ */
+export const bottomCannon: ConfettiConfig = {
+  particleCount: 50,
+  angle: 60,
+  spread: 55,
+  origin: { y: 0.8, x: 0.5 },
+  startVelocity: 55,
+};
+
+/**
+ * Confetti from left side
+ */
+export const leftCannon: ConfettiConfig = {
+  particleCount: 50,
+  angle: 45,
+  spread: 55,
+  origin: { x: 0, y: 0.6 },
+  startVelocity: 55,
+};
+
+/**
+ * Confetti from right side
+ */
+export const rightCannon: ConfettiConfig = {
+  particleCount: 50,
+  angle: 135,
+  spread: 55,
+  origin: { x: 1, y: 0.6 },
+  startVelocity: 55,
+};
+
+/**
+ * Realistic looking confetti
+ */
+export const realistic: ConfettiConfig = {
+  particleCount: 200,
+  spread: 160,
+  origin: { y: 0.5 },
+  startVelocity: 35,
+  gravity: 1.5,
+  drift: 1,
+  tilt: true,
+  shapes: ['square', 'circle', 'triangle'],
+  scalar: 0.8,
+};
+
+/**
+ * Snow effect
+ */
+export const snow: ConfettiConfig = {
+  particleCount: 100,
+  spread: 180,
+  origin: { y: -0.1 },
+  startVelocity: 0,
+  gravity: 0.3,
+  drift: 1,
+  colors: ['#ffffff', '#e8f4ff', '#c9e5ff'],
+  shapes: ['circle'],
+  scalar: 0.6,
+  angle: 270,
+};
+
+/**
+ * Stars effect
+ */
+export const stars: ConfettiConfig = {
+  particleCount: 50,
+  spread: 360,
+  startVelocity: 20,
+  decay: 0.95,
+  gravity: 0.5,
+  colors: ['#FFD700', '#FFA500', '#FFFF00'],
+  shapes: ['circle'],
+  scalar: 0.5,
+};
+
+/**
+ * School pride (custom colors)
+ */
+export const schoolPride: ConfettiConfig = {
+  particleCount: 100,
+  spread: 160,
+  origin: { y: 0.6 },
+  colors: ['#bb0000', '#ffffff'],
+};
+
+export const presets = {
+  celebration,
+  fireworks,
+  bottomCannon,
+  leftCannon,
+  rightCannon,
+  realistic,
+  snow,
+  stars,
+  schoolPride,
+};
+

package/src/types.ts

@@ -0,0 +1,137 @@
+export interface ConfettiConfig {
+  /**
+   * The number of confetti pieces to launch
+   * @default 50
+   */
+  particleCount?: number;
+
+  /**
+   * The angle in degrees at which to launch the confetti
+   * @default 90
+   */
+  angle?: number;
+
+  /**
+   * How far the confetti can spread from the origin
+   * @default 45
+   */
+  spread?: number;
+
+  /**
+   * The starting velocity of the confetti
+   * @default 45
+   */
+  startVelocity?: number;
+
+  /**
+   * How fast the confetti decays
+   * @default 0.9
+   */
+  decay?: number;
+
+  /**
+   * Gravity to apply to the confetti
+   * @default 1
+   */
+  gravity?: number;
+
+  /**
+   * How much to the side the confetti will drift
+   * @default 0
+   */
+  drift?: number;
+
+  /**
+   * Time in milliseconds to run the confetti animation
+   * @default 3000
+   */
+  duration?: number;
+
+  /**
+   * Array of color strings, in any format (hex, rgb, hsl)
+   * @default ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']
+   */
+  colors?: string[];
+
+  /**
+   * Scale of the confetti particles
+   * @default 1
+   */
+  scalar?: number;
+
+  /**
+   * The x position on the screen where confetti will originate (0-1)
+   * 0 is left edge, 0.5 is center, 1 is right edge
+   * @default 0.5
+   */
+  origin?: {
+    x?: number;
+    y?: number;
+  };
+
+  /**
+   * Shapes for confetti
+   * @default ['square', 'circle']
+   */
+  shapes?: Array<'square' | 'circle' | 'triangle'>;
+
+  /**
+   * Whether the confetti should be affected by tilt
+   * @default true
+   */
+  tilt?: boolean;
+
+  /**
+   * Max angle for tilt
+   * @default 10
+   */
+  tiltAngleIncrement?: number;
+
+  /**
+   * The number of times the confetti will move
+   * @default 200
+   */
+  tickDuration?: number;
+
+  /**
+   * Disable physics
+   * @default false
+   */
+  disableForReducedMotion?: boolean;
+
+  /**
+   * Use performance mode (fewer updates)
+   * @default false
+   */
+  usePerformanceMode?: boolean;
+}
+
+export interface ConfettiParticle {
+  id: string;
+  color: string;
+  shape: 'square' | 'circle' | 'triangle';
+  x: number;
+  y: number;
+  size: number;
+  velocity: {
+    x: number;
+    y: number;
+  };
+  rotation: number;
+  rotationVelocity: number;
+  tiltAngle: number;
+  opacity: number;
+}
+
+export interface ConfettiMethods {
+  /**
+   * Fire confetti with the given configuration
+   */
+  (config?: ConfettiConfig): Promise<null>;
+
+  /**
+   * Reset confetti
+   */
+  reset: () => void;
+}
+

package/src/useConfetti.ts

@@ -0,0 +1,25 @@
+import { useRef, useCallback } from 'react';
+import type { ConfettiConfig, ConfettiMethods } from './types';
+
+/**
+ * Hook to use confetti imperatively
+ * Returns a ref to pass to ConfettiCanvas and a fire function
+ */
+export const useConfetti = () => {
+  const confettiRef = useRef<ConfettiMethods>(null);
+
+  const fire = useCallback((config?: ConfettiConfig) => {
+    return confettiRef.current?.(config);
+  }, []);
+
+  const reset = useCallback(() => {
+    confettiRef.current?.reset();
+  }, []);
+
+  return {
+    confettiRef,
+    fire,
+    reset,
+  };
+};
+

package/src/utils.ts

@@ -0,0 +1,135 @@
+import type { ConfettiConfig, ConfettiParticle } from './types';
+
+export const DEFAULT_COLORS = [
+  '#26ccff',
+  '#a25afd',
+  '#ff5e7e',
+  '#88ff5a',
+  '#fcff42',
+  '#ffa62d',
+  '#ff36ff',
+];
+
+export const DEFAULT_CONFIG: Required<ConfettiConfig> = {
+  particleCount: 50,
+  angle: 90,
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  duration: 3000,
+  colors: DEFAULT_COLORS,
+  scalar: 1,
+  origin: { x: 0.5, y: 0.5 },
+  shapes: ['square', 'circle'],
+  tilt: true,
+  tiltAngleIncrement: 10,
+  tickDuration: 200,
+  disableForReducedMotion: false,
+  usePerformanceMode: false,
+};
+
+/**
+ * Convert degrees to radians
+ */
+export const degreesToRadians = (degrees: number): number => {
+  return (degrees * Math.PI) / 180;
+};
+
+/**
+ * Generate a random number between min and max
+ */
+export const randomRange = (min: number, max: number): number => {
+  return Math.random() * (max - min) + min;
+};
+
+/**
+ * Pick a random item from an array
+ */
+export const randomFromArray = <T>(arr: T[]): T => {
+  const item = arr[Math.floor(Math.random() * arr.length)];
+  if (item === undefined) {
+    throw new Error('Array is empty');
+  }
+  return item;
+};
+
+/**
+ * Create initial confetti particles
+ */
+export const createConfettiParticles = (
+  config: Required<ConfettiConfig>,
+  screenWidth: number,
+  screenHeight: number
+): ConfettiParticle[] => {
+  const particles: ConfettiParticle[] = [];
+  const angleInRadians = degreesToRadians(config.angle);
+  const spreadInRadians = degreesToRadians(config.spread);
+
+  for (let i = 0; i < config.particleCount; i++) {
+    const angle = angleInRadians + randomRange(-spreadInRadians / 2, spreadInRadians / 2);
+    const velocity = config.startVelocity * (0.5 + Math.random() * 0.5);
+    
+    const particle: ConfettiParticle = {
+      id: `confetti-${i}-${Date.now()}`,
+      color: randomFromArray(config.colors),
+      shape: randomFromArray(config.shapes),
+      x: (config.origin.x ?? 0.5) * screenWidth,
+      y: (config.origin.y ?? 0.5) * screenHeight,
+      size: (5 + Math.random() * 5) * config.scalar,
+      velocity: {
+        x: Math.cos(angle) * velocity,
+        y: Math.sin(angle) * velocity,
+      },
+      rotation: Math.random() * 360,
+      rotationVelocity: randomRange(-10, 10),
+      tiltAngle: config.tilt ? Math.random() * config.tiltAngleIncrement : 0,
+      opacity: 1,
+    };
+
+    particles.push(particle);
+  }
+
+  return particles;
+};
+
+/**
+ * Update a confetti particle's position
+ */
+export const updateParticle = (
+  particle: ConfettiParticle,
+  config: Required<ConfettiConfig>,
+  deltaTime: number
+): ConfettiParticle => {
+  const dt = deltaTime / 16; // Normalize to 60fps
+
+  // Apply gravity
+  const newVelocityY = particle.velocity.y - config.gravity * dt;
+  
+  // Apply drift
+  const newVelocityX = particle.velocity.x + config.drift * dt;
+
+  // Update position
+  const newX = particle.x + newVelocityX * dt;
+  const newY = particle.y - newVelocityY * dt;
+
+  // Update rotation
+  const newRotation = particle.rotation + particle.rotationVelocity * dt;
+
+  // Apply decay to opacity
+  const newOpacity = particle.opacity * Math.pow(config.decay, dt);
+
+  return {
+    ...particle,
+    x: newX,
+    y: newY,
+    velocity: {
+      x: newVelocityX,
+      y: newVelocityY,
+    },
+    rotation: newRotation,
+    opacity: newOpacity,
+  };
+};
+