Fix backgrounds accepting presses.

Author: jameswilddev

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>
+  );
 };

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>
   );

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>
   );

components/createImageBackgroundComponent/unit.tsx

@@ -13,18 +13,23 @@ 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,
           top: 0,
           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,18 +45,26 @@ 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,
           top: 0,
           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>
   );