feat: added cannon mode

AlirezaHadjar · Oct 25, 2024 · a7c864d · a7c864d
1 parent 9a01d9c
commit a7c864d
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 81 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,14 +1,32 @@
 import { useRef } from 'react';
-import { StyleSheet, View, Button } from 'react-native';
+import { StyleSheet, View, Button, useWindowDimensions } from 'react-native';
 import { Confetti } from 'react-native-fast-confetti';
-import type { ConfettiMethods } from 'react-native-fast-confetti';
+import type {
+  ConfettiMethods,
+  ConfettiProps,
+} from 'react-native-fast-confetti';
 
 export default function App() {
   const confettiRef = useRef<ConfettiMethods>(null);
+  const { height, width } = useWindowDimensions();
+
+  const cannonPositions: ConfettiProps['cannonsPositions'] = [
+    { x: -30, y: 600 },
+    { x: -30, y: height },
+    { x: width + 30, y: 600 },
+    { x: width + 30, y: height },
+  ];
 
   return (
     <View style={styles.container}>
-      <Confetti ref={confettiRef} />
+      <Confetti
+        ref={confettiRef}
+        autoplay={true}
+        fallDuration={8000}
+        verticalSpacing={20}
+        cannonsPositions={cannonPositions}
+        fadeOutOnEnd
+      />
       <Button title="Resume" onPress={() => confettiRef.current?.resume()} />
       <Button title="Pause" onPress={() => confettiRef.current?.pause()} />
       <Button title="Restart" onPress={() => confettiRef.current?.restart()} />
@@ -21,6 +39,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
+    backgroundColor: 'white',
     justifyContent: 'center',
   },
 });