blur

src/layouts/Page.js

@@ -6,9 +6,9 @@ import React from "reactn";
 import { responsiveHeight } from "../actions/responsiveSizes.js";
 import BaseHeader from "../components/BaseHeader";
 import NavigateHeader from "../components/NavigateHeader";
-import { gutters } from "../styles";
-import { isWeb } from "../hooks/useLayoutType.js";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
+import { isWeb } from "../hooks/useLayoutType.js";
+import { gutters } from "../styles";
 
 export default ({
   children,
@@ -35,6 +35,7 @@ export default ({
   width = undefined,
   maxWidth = 1200,
   shareBtn = false,
+  blurIntensity = 0,
 }) => {
   const PageContainer =
     containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
@@ -51,17 +52,24 @@ export default ({
         position: "relative",
       }}
     >
-      <Image
-        source={backgroundImg}
-        resizeMode="cover"
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-        }}
-      />
+      {backgroundImg ? (
+        <Image
+          source={backgroundImg}
+          resizeMode="cover"
+          // blurRadius={!isWeb ? blurIntensity : undefined}
+          blurIntensity={blurIntensity}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            ...(isWeb && blurIntensity
+              ? { filter: `blur(${blurIntensity}px)` }
+              : {}),
+          }}
+        />
+      ) : null}
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
         style={{