Merge pull request #23 from mateoguzmana/chore/multiple-fixes

feat(canvas): adding pointerEvents as none by default
mateoguzmana · Dec 16, 2022 · 6d5c096 · 6d5c096
2 parents 6f9981e + dffc565
commit 6d5c096
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 61 deletions.
diff --git a/example/package.json b/example/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "ios": "react-native run-ios",
+    "ios": "react-native run-ios --simulator='iPhone 14 Pro'",
     "start": "react-native start",
     "pods": "pod-install --quiet",
     "postinstall": "patch-package"

diff --git a/src/components/Fireworks.tsx b/src/components/Fireworks.tsx
@@ -1,11 +1,10 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import { Canvas, Group } from '@shopify/react-native-skia';
+import { Canvas } from '@shopify/react-native-skia';
 import { FiestaThemes } from '../constants/theming';
-import { screenHeight } from '../constants/dimensions';
-import { screenWidth } from '../constants/dimensions';
 import { Firework, FireworkProps } from './Firework';
 import { colorsFromTheme } from '../utils/colors';
+import { generateRandomCoordinates } from '../utils/fireworks';
 
 const optimalNumberOfFireworks = 3;
 
@@ -46,20 +45,18 @@ export const Fireworks = memo(
     );
 
     return (
-      <Canvas style={styles.canvas}>
-        <Group>
-          {fireworksToRenderArray.map((_, index) => (
-            <Firework
-              key={index}
-              initialPosition={positions[index]}
-              color={colors[index]}
-              autoHide={autoHide}
-              particleRadius={particleRadius}
-              fireworkRadius={fireworkRadius}
-              {...rest}
-            />
-          ))}
-        </Group>
+      <Canvas style={styles.canvas} pointerEvents="none">
+        {fireworksToRenderArray.map((_, index) => (
+          <Firework
+            key={index}
+            initialPosition={positions[index]}
+            color={colors[index]}
+            autoHide={autoHide}
+            particleRadius={particleRadius}
+            fireworkRadius={fireworkRadius}
+            {...rest}
+          />
+        ))}
       </Canvas>
     );
   }
@@ -68,36 +65,6 @@ export const Fireworks = memo(
 const styles = StyleSheet.create({
   canvas: {
     ...StyleSheet.absoluteFillObject,
-    zIndex: -1,
+    zIndex: 1,
   },
 });
-
-function generateRandomCoordinates(
-  numElements: number
-): Array<{ x: number; y: number }> {
-  // Create an array to store the generated coordinates
-  const coordinates: Array<{ x: number; y: number }> = [];
-
-  // Generate random x,y coordinates until we have the desired number of elements
-  while (coordinates.length < numElements) {
-    // Generate a random x,y coordinate
-    const x = Math.random() * screenWidth;
-    const y = Math.random() * screenHeight;
-
-    // Check if the coordinate is unique
-    let unique = true;
-    for (const { x: prevX, y: prevY } of coordinates) {
-      if (prevX === x && prevY === y) {
-        unique = false;
-        break;
-      }
-    }
-
-    // If the coordinate is unique, add it to the array of coordinates
-    if (unique) {
-      coordinates.push({ x, y });
-    }
-  }
-
-  return coordinates;
-}
diff --git a/src/components/Popper.tsx b/src/components/Popper.tsx
@@ -168,14 +168,7 @@ export const Popper = memo(
       if (!displayCanvas) return null;
 
       return (
-        <Canvas
-          style={[
-            StyleSheet.absoluteFill,
-            // If the autoPlay is false it means the component is controlled, hence we have to put the zIndex as 1
-            // otherwise we won't be able to display the animation properly because of how the context provider is set
-            autoPlay ? styles.canvasBehind : styles.canvasInFront,
-          ]}
-        >
+        <Canvas style={styles.canvas} pointerEvents="none">
           <Group transform={transform}>
             {itemsToRenderArray.map((_, index) =>
               renderItem(
@@ -191,10 +184,8 @@ export const Popper = memo(
 );
 
 const styles = StyleSheet.create({
-  canvasBehind: {
-    zIndex: -1,
-  },
-  canvasInFront: {
+  canvas: {
+    ...StyleSheet.absoluteFillObject,
     zIndex: 1,
   },
 });
diff --git a/src/utils/fireworks.ts b/src/utils/fireworks.ts
@@ -1,3 +1,35 @@
+import { screenWidth, screenHeight } from '../constants/dimensions';
+
 export function fromRadians(angle: number) {
   return angle * (180.0 / Math.PI);
 }
+
+export function generateRandomCoordinates(
+  numElements: number
+): Array<{ x: number; y: number }> {
+  // Create an array to store the generated coordinates
+  const coordinates: Array<{ x: number; y: number }> = [];
+
+  // Generate random x,y coordinates until we have the desired number of elements
+  while (coordinates.length < numElements) {
+    // Generate a random x,y coordinate
+    const x = Math.random() * screenWidth;
+    const y = Math.random() * screenHeight;
+
+    // Check if the coordinate is unique
+    let unique = true;
+    for (const { x: prevX, y: prevY } of coordinates) {
+      if (prevX === x && prevY === y) {
+        unique = false;
+        break;
+      }
+    }
+
+    // If the coordinate is unique, add it to the array of coordinates
+    if (unique) {
+      coordinates.push({ x, y });
+    }
+  }
+
+  return coordinates;
+}