@umituz/react-native-celebration

Celebration animations and modals for React Native applications. Provides fireworks, modal animations, and celebration state management.

Installation

npm install @umituz/react-native-celebration

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• react-native-reanimated >= 3.10.0
• react-native-gesture-handler >= 2.16.0
• @umituz/react-native-animation >= 1.0.0

Features

• ✅ Celebration modal with animations
• ✅ Fireworks/confetti effects
• ✅ Customizable theme colors
• ✅ Flexible animation configuration
• ✅ TypeScript support
• ✅ Zero backend dependencies

Usage

Basic Usage

import { useCelebrationState, CelebrationModal } from '@umituz/react-native-celebration';

const MyComponent = () => {
  const celebration = useCelebrationState();

  const handleSuccess = () => {
    celebration.show({
      title: 'Success!',
      message: 'Your action was completed successfully.',
      primaryAction: {
        label: 'Continue',
        onPress: () => console.log('Continue pressed'),
      },
    });
  };

  return (
    <>
      <Button onPress={handleSuccess}>Show Celebration</Button>
      <CelebrationModal
        visible={celebration.visible}
        config={celebration.config!}
        onClose={celebration.hide}
        themeColors={{
          primary: '#007AFF',
          success: '#34C759',
          warning: '#FF9500',
        }}
      />
    </>
  );
};

Custom Content

<CelebrationModal
  visible={celebration.visible}
  config={celebration.config!}
  onClose={celebration.hide}
  renderContent={({ config, onClose, iconStyle }) => (
    <YourCustomContent
      config={config}
      onClose={onClose}
      iconStyle={iconStyle}
    />
  )}
/>

Custom Animation Configuration

<CelebrationModal
  visible={celebration.visible}
  config={celebration.config!}
  onClose={celebration.hide}
  animationConfig={{
    modal: {
      overlayFadeDuration: 400,
      modalScaleDamping: 8,
    },
    icon: {
      scaleBounceMax: 1.3,
      rotateDegrees: 720,
    },
  }}
/>

API

Hooks

• useCelebrationState() - Manage celebration modal state
• useCelebrationModalAnimation() - Manage all modal animations
• useModalAnimations() - Manage modal overlay and container animations
• useIconAnimations() - Manage icon bounce and rotate animations

Components

• CelebrationModal - Celebration modal component

Services

• FireworksConfigService - Build fireworks configuration from theme colors

License

MIT