Merge pull request #1 from xxsnakerxx/confetti_reanimated

Reanimated + confetti

Author: xxsnakerxx

README.md

@@ -20,11 +20,61 @@ A fully customizable alert system for React Native with promise-based API and qu
 - 🖼️ SVG icon support
 - ⚙️ Global styling and behavior configuration
 - ✅ Built-in helpers for success, error, and confirm dialogs
+- 🎉 Confetti support
 - 🌐 React Native Web support
 
-## Demo
+## 📺 Demo
 
-https://github.com/user-attachments/assets/aeb9a635-9ac5-451f-9005-96cdd6ad2361
+See how `react-native-alert-queue` works in action! 🚀
+
+---
+
+### 🛠 Basics
+
+Basic usage:
+
+![Basics Demo](./demo/basics.gif)
+
+---
+
+### 🎨 Customizations
+
+Custom titles, messages, icons, buttons, and slots:
+
+![Customizations Demo](./demo/customizations.gif)
+
+---
+
+### 🔄 Real-Time Updating
+
+Dynamically update the alert while it's displayed:
+
+![Updating Demo](./demo/updating.gif)
+
+---
+
+### 🎹 Keyboard Avoidance
+
+Alerts automatically adjust position when the keyboard appears:
+
+![Keyboard Avoidance Demo](./demo/keyboard-avoiding.gif)
+
+---
+
+### 🎉 Confetti Animation
+
+Celebrate success with built-in confetti effects:
+
+![Confetti Demo](./demo/confetti.gif)
+
+---
+
+## Requirements
+
+- `2.x` versions require [`react-native-reanimated 3.x`](https://docs.swmansion.com/react-native-reanimated/).
+- If your project does not use Reanimated, you can use `react-native-alert-queue@1.x`.
+
+Install `RN Reanimated` following [their official guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#installation).
 
 ## Installation
 
@@ -36,6 +86,9 @@ yarn add react-native-alert-queue
 
 ## Usage
 
+> ⚡ **Full working examples available!**
+> Explore the [example app here](https://github.com/xxsnakerxx/react-native-alert-queue/tree/main/example/src/containers) to see all features in action.
+
 ### Basic Setup
 
 First, add the `AlertContainer` to your app:
@@ -119,6 +172,32 @@ const result = await alert.confirm({
 });
 ```
 
+### Confetti
+
+```tsx
+alert.show({
+  message: 'Welcome to the app!',
+  confetti: true,
+});
+```
+
+```tsx
+alert.show({
+  title: 'Congratulations!',
+  message: 'You are a winner!',
+  confetti: {
+    colors: ['#4CAF50', '#8BC34A', '#CDDC39', '#81C784', '#A5D6A7', '#C8E6C9'],
+    numberOfPieces: 200,
+    pieceDimensions: {
+      height: 10,
+      width: 30,
+    },
+  },
+});
+```
+
+Confetti can be used with any alert type. Also, you can customize the confetti appearance globally in the config.
+
 ### Advanced Features
 
 #### Custom Helper Functions
@@ -372,6 +451,7 @@ You can customize the default appearance and behavior of alerts using the `confi
 - `iconColor?: ColorValue` - Icon color
 - `iconSize?: number` - Icon size
 - `buttons?: AlertButton[]` - Array of buttons
+- `confetti?: boolean | ConfettiProps` - Confetti configuration
 - `renderMessage?: ({ style, text }) => ReactElement` - Custom message renderer
 - `renderTitle?: ({ style, text }) => ReactElement` - Custom title renderer
 - `renderButton?: (props) => ReactElement` - Custom button renderer
@@ -450,6 +530,9 @@ type AlertConfig = {
     color?: ColorValue;
   };
 
+  // Confetti configuration
+  confetti?: ConfettiProps;
+
   // Custom renderers for alert components
   renderTitle?: AlertProps['renderTitle'];
   renderMessage?: AlertProps['renderMessage'];

demo/basics.gif

@@ -15,6 +15,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
+    "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-web": "0.19.13"
   },

demo/confetti.gif

@@ -7,6 +7,7 @@ import { Basics } from './containers/Basics';
 import { Customizations } from './containers/Customizations';
 import { Updating } from './containers/Updating';
 import { KeyboardAvoiding } from './containers/Keyboard';
+import { Confetti } from './containers/Confetti';
 
 export default function App() {
   return (
@@ -19,6 +20,7 @@ export default function App() {
             <Customizations />
             <Updating />
             <KeyboardAvoiding />
+            <Confetti />
           </ScrollView>
         </SafeAreaView>
         <AlertContainer />

demo/customizations.gif

@@ -12,7 +12,7 @@ export const Basics = () => {
             message: 'I am an alert',
           })
         }
-        text="Show Alert"
+        text="Simple Alert"
       />
       <Button
         onPress={() =>
@@ -24,7 +24,7 @@ export const Basics = () => {
               ),
           })
         }
-        text="Show Alert with long message"
+        text="Long Message"
       />
       <Button
         onPress={() => {
@@ -53,21 +53,21 @@ export const Basics = () => {
             ],
           });
         }}
-        text="Show 2 Alerts"
+        text="Alerts queue"
       />
       <Button
         onPress={() => {
           alert.success({
             message: 'I am a success alert',
           });
         }}
-        text="Show Success Alert"
+        text="Success"
       />
       <Button
         onPress={() => {
           alert.error(new Error('I am an error alert'));
         }}
-        text="Show Error Alert"
+        text="Error"
       />
       <Button
         onPress={async () => {
@@ -83,7 +83,7 @@ export const Basics = () => {
             alert.error(new Error('You pressed no'));
           }
         }}
-        text="Show Confirm"
+        text="Confirm"
       />
       <Button
         onPress={async () => {
@@ -108,7 +108,7 @@ export const Basics = () => {
             ],
           });
         }}
-        text="Show Dismissible Alert"
+        text="Dismissible alert"
       />
     </Section>
   );

demo/keyboard-avoiding.gif

@@ -0,0 +1,71 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react-native/no-inline-styles */
+
+import { alert } from 'react-native-alert-queue';
+import { Button } from '../components/Button';
+import { Section } from '../components/Section';
+import { Text, View } from 'react-native';
+
+export const Confetti = () => {
+  return (
+    <Section title="Confetti">
+      <Button
+        onPress={() =>
+          alert.show({
+            title: 'Congrats!',
+            confetti: true,
+          })
+        }
+        text="Confetti Alert"
+      />
+      <Button
+        onPress={() =>
+          alert.success({
+            title: 'Congratulations!',
+            message: 'You are a winner!',
+            confetti: {
+              colors: [
+                '#4CAF50',
+                '#8BC34A',
+                '#CDDC39',
+                '#81C784',
+                '#A5D6A7',
+                '#C8E6C9',
+              ],
+              numberOfPieces: 200,
+              pieceDimensions: {
+                height: 10,
+                width: 30,
+              },
+            },
+          })
+        }
+        text="Custom Confetti"
+      />
+      <Button
+        onPress={() =>
+          alert.show({
+            beforeTitleSlot: () => (
+              <Text style={{ fontSize: 70, textAlign: 'center' }}>🎂</Text>
+            ),
+            title: 'Happy Birthday!',
+            message: 'Best wishes on your special day!',
+            confetti: {
+              numberOfPieces: 300,
+              pieceDimensions: {
+                height: 20,
+                width: 20,
+              },
+              renderPiece: ({ style }) => (
+                <View
+                  style={[style, { width: 20, height: 20, borderRadius: 10 }]}
+                />
+              ),
+            },
+          })
+        }
+        text="Custom Confetti Piece"
+      />
+    </Section>
+  );
+};