From 0d34352d5ce78a1ca8a7ecf74d8f02530cfe07e2 Mon Sep 17 00:00:00 2001
From: jameswilddev <jameswilddev@outlook.com>
Date: Fri, 26 Nov 2021 12:41:25 +0000
Subject: [PATCH] Fix backgrounds accepting presses.

---
 .../index.tsx                                 |  6 +++-
 .../unit.tsx                                  |  7 ++--
 .../createImageBackgroundComponent/index.tsx  |  9 ++++-
 .../createImageBackgroundComponent/unit.tsx   | 33 +++++++++++++------
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/components/createFlatColorBackgroundComponent/index.tsx b/components/createFlatColorBackgroundComponent/index.tsx
index d016230d..3ef6cc67 100644
--- a/components/createFlatColorBackgroundComponent/index.tsx
+++ b/components/createFlatColorBackgroundComponent/index.tsx
@@ -21,5 +21,9 @@ export const createFlatColorBackgroundComponent = (
     },
   });
 
-  return ({ size, children }) => <View style={styles[size]}>{children}</View>;
+  return ({ size, children }) => (
+    <View style={styles[size]} pointerEvents="box-none">
+      {children}
+    </View>
+  );
 };
diff --git a/components/createFlatColorBackgroundComponent/unit.tsx b/components/createFlatColorBackgroundComponent/unit.tsx
index bfacbcd0..63b9c61d 100644
--- a/components/createFlatColorBackgroundComponent/unit.tsx
+++ b/components/createFlatColorBackgroundComponent/unit.tsx
@@ -13,7 +13,7 @@ test(`renders as expected when fitting the content`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View style={{ backgroundColor: `red` }}>
+    <View style={{ backgroundColor: `red` }} pointerEvents="box-none">
       <Text>Test Content</Text>
     </View>
   );
@@ -29,7 +29,10 @@ test(`renders as expected when filling the container`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View style={{ backgroundColor: `red`, flexGrow: 1 }}>
+    <View
+      style={{ backgroundColor: `red`, flexGrow: 1 }}
+      pointerEvents="box-none"
+    >
       <Text>Test Content</Text>
     </View>
   );
diff --git a/components/createImageBackgroundComponent/index.tsx b/components/createImageBackgroundComponent/index.tsx
index 940e1a5b..1f4236ce 100644
--- a/components/createImageBackgroundComponent/index.tsx
+++ b/components/createImageBackgroundComponent/index.tsx
@@ -3,6 +3,10 @@ import { Image, ImageSourcePropType, StyleSheet, View } from "react-native";
 
 const styles = StyleSheet.create({
   image: {
+    width: `100%`,
+    height: `100%`,
+  },
+  imageWrapper: {
     position: `absolute`,
     left: 0,
     top: 0,
@@ -29,8 +33,11 @@ export const createImageBackgroundComponent = (
       {...(size === `fillsContainer`
         ? { style: styles.containerFillingView }
         : {})}
+      pointerEvents="box-none"
     >
-      <Image source={source} style={styles.image} resizeMode="cover" />
+      <View style={styles.imageWrapper} pointerEvents="none">
+        <Image source={source} style={styles.image} resizeMode="cover" />
+      </View>
       {children}
     </View>
   );
diff --git a/components/createImageBackgroundComponent/unit.tsx b/components/createImageBackgroundComponent/unit.tsx
index 861b5af5..98c0ff8a 100644
--- a/components/createImageBackgroundComponent/unit.tsx
+++ b/components/createImageBackgroundComponent/unit.tsx
@@ -13,9 +13,9 @@ test(`renders as expected when fitting the content`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View>
-      <Image
-        source={{ uri: `Example Uri` }}
+    <View pointerEvents="box-none">
+      <View
+        pointerEvents="none"
         style={{
           position: `absolute`,
           left: 0,
@@ -23,8 +23,13 @@ test(`renders as expected when fitting the content`, () => {
           width: `100%`,
           height: `100%`,
         }}
-        resizeMode="cover"
-      />
+      >
+        <Image
+          source={{ uri: `Example Uri` }}
+          style={{ width: `100%`, height: `100%` }}
+          resizeMode="cover"
+        />
+      </View>
       <Text>Test Content</Text>
     </View>
   );
@@ -40,9 +45,8 @@ test(`renders as expected when filling the container`, () => {
   );
 
   expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
-    <View style={{ flexGrow: 1 }}>
-      <Image
-        source={{ uri: `Example Uri` }}
+    <View style={{ flexGrow: 1 }} pointerEvents="box-none">
+      <View
         style={{
           position: `absolute`,
           left: 0,
@@ -50,8 +54,17 @@ test(`renders as expected when filling the container`, () => {
           width: `100%`,
           height: `100%`,
         }}
-        resizeMode="cover"
-      />
+        pointerEvents="none"
+      >
+        <Image
+          source={{ uri: `Example Uri` }}
+          style={{
+            width: `100%`,
+            height: `100%`,
+          }}
+          resizeMode="cover"
+        />
+      </View>
       <Text>Test Content</Text>
     </View>
   );