add - layout web

src/layouts/Page.js

@@ -1,20 +1,21 @@
 /* eslint-disable react/display-name */
-import React, { useState } from "reactn";
-import { Image, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { Motion } from "@legendapp/motion";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import React, { useState, useEffect } from 'reactn';
+import { setGlobal } from 'reactn';
+import { Image, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Motion } from '@legendapp/motion';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
-import { responsiveHeight } from "../actions/responsiveSizes.js";
+import { responsiveHeight } from '../actions/responsiveSizes.js';
 
-import { Fonts, gutters } from "../styles";
+import { Fonts, gutters } from '../styles';
 
-import BaseHeader from "../components/BaseHeader";
-import NavigateHeader from "../components/NavigateHeader";
+import BaseHeader from '../components/BaseHeader';
+import NavigateHeader from '../components/NavigateHeader';
 
-import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
-import { useUserData } from "../providers/UserDataProvider.js";
-import { background } from "../assets/index.js";
+import { isDesktop, isWeb } from '../hooks/useLayoutType.js';
+import { useUserData } from '../providers/UserDataProvider.js';
+import { background } from '../assets/index.js';
 
 export default ({
   children,
@@ -22,11 +23,11 @@ export default ({
   topStickyContent = null,
   bottomStickyContent = null,
 
-  title = "",
+  title = '',
   rightComponent = null,
 
-  containerType = "SAFE_AREA_VIEW",
-  headerType = "BASE",
+  containerType = 'SAFE_AREA_VIEW',
+  headerType = 'BASE',
 
   containerStyle = {},
   headerStyle = {},
@@ -44,7 +45,7 @@ export default ({
   const [scrollPosition, setScrollPosition] = useState(0);
 
   const PageContainer =
-    containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
+    containerType === 'SAFE_AREA_VIEW' ? SafeAreaView : View;
 
   const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
 
@@ -53,28 +54,38 @@ export default ({
     setScrollPosition(position);
   };
 
+  // On web, push the background image to a global so AppLayout can render
+  // a full-screen background behind the phone frame. We avoid rendering
+  // the per-screen background inside the phone on web to prevent duplication.
+  useEffect(() => {
+    if (isWeb && backgroundImg) {
+      setGlobal({ webBackgroundImg: backgroundImg });
+    }
+  }, [isWeb, backgroundImg]);
+
   return (
     <>
-      <Image
-        source={backgroundImg}
-        style={{ width: "100%", height: "100%", position: "absolute" }}
-      />
+      {!isWeb && (
+        <Image
+          source={backgroundImg}
+          style={{ width: '100%', height: '100%', position: 'absolute' }}
+        />
+      )}
       <PageContainer
-        {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
+        {...(containerType === 'SAFE_AREA_VIEW' ? { edges: ['top'] } : {})}
         style={{
-          height: "100%",
+          height: '100%',
           paddingTop: isWeb ? gutters / 2 : 0,
           padding: gutters,
           paddingBottom: 0,
-          ...(isWeb ? { maxHeight: "100vh" } : {}),
+          ...(isWeb ? { maxHeight: '100vh', width: '100%' } : {}),
           ...(!currentUID && isDesktop
-            ? { maxWidth: 500, alignSelf: "center" }
+            ? { maxWidth: 500, alignSelf: 'center' }
             : {}),
           ...containerStyle,
-        }}
-      >
-        {headerType !== "NONE" ? (
-          headerType === "BASE" ? (
+        }}>
+        {headerType !== 'NONE' ? (
+          headerType === 'BASE' ? (
             <BaseHeader containerStyle={{ ...headerStyle }} />
           ) : (
             <NavigateHeader
@@ -98,10 +109,9 @@ export default ({
                 scrollEventThrottle: 80,
                 showsVerticalScrollIndicator: false,
                 contentContainerStyle: { paddingBottom: responsiveHeight(55) },
-                keyboardDismissMode: "on-drag",
+                keyboardDismissMode: 'on-drag',
               }
-            : {})}
-        >
+            : {})}>
           {children}
         </ContentContainer>
       </PageContainer>