add - layout web

App.js

@@ -9,6 +9,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
+import { Platform } from "react-native";
 import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
 import moment from "moment";
 import "moment/locale/fr";
@@ -119,7 +120,7 @@ const App = () => {
 
       <GestureHandlerRootView
         onLayout={onLayoutRootView}
-        style={[{ flex: 1, backgroundColor: Palette.darkPurple }]}
+        style={[{ flex: 1, backgroundColor: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple }]}
       >
         <PortalProvider>
           <Providers>
@@ -130,7 +131,7 @@ const App = () => {
                     ...DefaultTheme,
                     colors: {
                       ...DefaultTheme.colors,
-                      background: Palette.darkPurple,
+                      background: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple,
                     },
                   }}
                   ref={navigationRef}

index.web.js

@@ -1,7 +1,48 @@
-import "@expo/metro-runtime";
+import '@expo/metro-runtime';
-import { registerRootComponent } from "expo";
+import { registerRootComponent } from 'expo';
-import "./src/styles/css/global.css";
 
-import App from "./App";
+// Inject minimal global CSS and a small setNativeProps polyfill for web
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.setAttribute('data-inline-global', 'true');
+  style.innerHTML = `
+    html, body, #root { height: 100%; }
+    body { margin: 0; }
+    *:focus { outline: none; }
+    * { scrollbar-width: none; -ms-overflow-style: none; }
+    *::-webkit-scrollbar { display: none; }
+  `;
+  document.head.appendChild(style);
+
+  const proto = window.HTMLElement && window.HTMLElement.prototype;
+  if (proto && typeof proto.setNativeProps !== 'function') {
+    proto.setNativeProps = function (nativeProps = {}) {
+      try {
+        const { style: s, pointerEvents, ...rest } = nativeProps || {};
+        if (pointerEvents != null) {
+          this.style.pointerEvents = pointerEvents;
+        }
+        if (s && typeof s === 'object') {
+          for (const k in s) {
+            if (Object.prototype.hasOwnProperty.call(s, k)) {
+              try {
+                this.style[k] = s[k];
+              } catch {}
+            }
+          }
+        }
+        for (const k in rest) {
+          if (Object.prototype.hasOwnProperty.call(rest, k)) {
+            try {
+              this.style[k] = rest[k];
+            } catch {}
+          }
+        }
+      } catch {}
+    };
+  }
+}
+
+import App from './App';
 
 registerRootComponent(App);

package.json

@@ -67,7 +67,6 @@
     "react-native": "0.76.9",
     "react-native-actions-sheet": "~0.9.7",
     "react-native-compressor": "~1.12.0",
-    "react-native-country-picker-modal": "~2.0.0",
     "react-native-dialog": "~9.3.0",
     "react-native-figma-squircle": "~0.3.4",
     "react-native-gesture-handler": "~2.20.2",

src/components/Input.js

@@ -7,23 +7,23 @@ import {
   Image,
   Keyboard,
   Platform,
-} from "react-native";
+} from 'react-native';
-import { useState } from "react";
+import { useState } from 'react';
-import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
+// import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
-import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
+import usePlaceApi from 'react-native-minuit/src/hooks/usePlacesApi';
 
-import { art, icons } from "../assets";
+import { art, icons } from '../assets';
-import { Fonts, Palette, Style, gutters } from "../styles";
+import { Fonts, Palette, Style, gutters } from '../styles';
-import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
+import { FONT_FAMILY, fontTypeList } from '../styles/Fonts';
 
-import { isWeb } from "../hooks/useLayoutType";
+import { isWeb } from '../hooks/useLayoutType';
-import { GOOGLE_API_KEY } from "../data/keys";
+import { GOOGLE_API_KEY } from '../data/keys';
-import { BlurView } from "expo-blur";
+import { BlurView } from 'expo-blur';
 
 const Input = ({
   inputRef = null,
-  label = "",
+  label = '',
-  placeholder = "",
+  placeholder = '',
 
   containerStyle = {},
   textInputStyle = {},
@@ -33,12 +33,12 @@ const Input = ({
 
   textInputProps = {},
 
-  type = "default", // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
+  type = 'default', // "default" | "password" | "textarea" | "coinAmount" | "countryPicker" | "autoCompleteAddress"
-  theme = "default", // "default" | "radioactiv" | "dashed"
+  theme = 'default', // "default" | "radioactiv" | "dashed"
 
-  borderType = "none", // "solid" | "dashed" | "none"
+  borderType = 'none', // "solid" | "dashed" | "none"
 
-  layout = "default", // "default" | "line"
+  layout = 'default', // "default" | "line"
 
   isNumeric = false,
   isBlur = false,
@@ -47,22 +47,22 @@ const Input = ({
   const [showPassword, setShowPassword] = useState(false);
   const [showCountryPicker, setShowCountryPicker] = useState(false);
 
-  const isDefaultLayout = layout === "default";
+  const isDefaultLayout = layout === 'default';
 
   const mainColor =
-    theme === "radioactiv" ? Palette.radioactivGreen : Palette.primary;
+    theme === 'radioactiv' ? Palette.radioactivGreen : Palette.primary;
 
   const isRoundedRectangle =
-    ["textarea", "coinAmount"].includes(type) || layout === "default";
+    ['textarea', 'coinAmount'].includes(type) || layout === 'default';
 
-  const inputAccessoryViewID = "uniqueID";
+  const inputAccessoryViewID = 'uniqueID';
 
   const { places } = usePlaceApi({
-    query: type === "autoCompleteAddress" ? value : "",
+    query: type === 'autoCompleteAddress' ? value : '',
     apiKey: GOOGLE_API_KEY, // Your Google API Key
-    queryFields: "formatted_address,geometry,name,address_components",
+    queryFields: 'formatted_address,geometry,name,address_components',
-    queryCountries: ["fr"],
+    queryCountries: ['fr'],
-    language: "fr-FR",
+    language: 'fr-FR',
     minChars: 2,
   });
 
@@ -72,25 +72,23 @@ const Input = ({
     <>
       <View
         style={{
-          width: "100%",
+          width: '100%',
           ...containerStyle,
           gap: 4,
-        }}
+        }}>
-      >
         {label?.length > 0 && (
           <Text
             style={{
               fontSize: 14,
               color: Palette.white,
               fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-            }}
+            }}>
-          >
             {label}
           </Text>
         )}
 
         <ContainerView
-          tint="dark"
+          tint='dark'
           // experimentalBlurMethod={
           //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
           // }
@@ -103,11 +101,11 @@ const Input = ({
                     ? {
                         paddingVertical: 10,
                         backgroundColor:
-                          type === "coinAmount"
+                          type === 'coinAmount'
                             ? Palette.transparentRadioactivGreen
                             : Palette.glass,
-                        height: type === "textarea" ? 150 : 50,
+                        height: type === 'textarea' ? 150 : 50,
-                        overflow: "hidden",
+                        overflow: 'hidden',
                         borderRadius: 12,
                       }
                     : {}),
@@ -117,27 +115,25 @@ const Input = ({
                   borderBottomColor: mainColor,
                   borderBottomWidth: 1,
                 }),
-            ...(borderType === "dashed"
+            ...(borderType === 'dashed'
               ? {
-                  borderStyle: "dashed",
+                  borderStyle: 'dashed',
                   borderColor: isFocused
                     ? Palette.primary
                     : Palette.transparentPrimary,
                   borderWidth: 1,
                 }
               : {}),
-            width: "100%",
+            width: '100%',
-          }}
+          }}>
-        >
+          {type === 'search' ? (
-          {type === "search" ? (
             <Image
               source={icons.search}
               style={[Style.iconDefault, { marginRight: 10 }]}
-              resizeMode="contain"
+              resizeMode='contain'
             />
           ) : null}
-
+          {/* {type === "countryPicker" ? (
-          {type === "countryPicker" ? (
             <CountryPicker
               countryCode={value}
               onSelect={(country) => {
@@ -169,77 +165,77 @@ const Input = ({
                 },
               }}
             />
-          ) : (
+          ) : */}
-            <TextInput
+          (
-              ref={inputRef}
+          <TextInput
-              placeholder={placeholder}
+            ref={inputRef}
-              placeholderTextColor={Palette.gray}
+            placeholder={placeholder}
-              value={value}
+            placeholderTextColor={Palette.gray}
-              onChangeText={setValue}
+            value={value}
-              multiline={type === "textarea"}
+            onChangeText={setValue}
-              editable={type !== "countryPicker"}
+            multiline={type === 'textarea'}
-              onFocus={() => setIsFocused(true)}
+            editable={type !== 'countryPicker'}
-              onBlur={() => setIsFocused(false)}
+            onFocus={() => setIsFocused(true)}
-              style={{
+            onBlur={() => setIsFocused(false)}
-                width: "100%",
+            style={{
-                ...(isRoundedRectangle
+              width: '100%',
-                  ? {
+              ...(isRoundedRectangle
-                      height: "100%",
-                      flex: 1,
-                      textAlignVertical: type === "textarea" ? "top" : "center",
-                    }
-                  : { textAlign: "center" }),
-                fontSize: 14,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterRegular,
-                ...(isWeb
-                  ? {
-                      lineHeight: "auto",
-                    }
-                  : {}),
-                ...textInputStyle,
-              }}
-              {...(type === "password"
                 ? {
-                    secureTextEntry: !showPassword,
+                    height: '100%',
-                    autoCapitalize: "none",
+                    flex: 1,
-                    autoCompleteType: "password",
+                    textAlignVertical: type === 'textarea' ? 'top' : 'center',
-                    textContentType: "password",
                   }
-                : {})}
+                : { textAlign: 'center' }),
-              {...(type === "email"
+              fontSize: 14,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+              ...(isWeb
                 ? {
-                    keyboardType: "email-address",
+                    lineHeight: 'auto',
-                    autoCapitalize: "none",
-                    autoCompleteType: "email",
-                    textContentType: "emailAddress",
                   }
-                : {})}
+                : {}),
-              keyboardType={isNumeric ? "numeric" : "default"}
+              ...textInputStyle,
-              keyboardAppearance="dark"
+            }}
-              inputAccessoryViewID={inputAccessoryViewID}
+            {...(type === 'password'
-              {...textInputProps}
+              ? {
-            />
+                  secureTextEntry: !showPassword,
+                  autoCapitalize: 'none',
+                  autoCompleteType: 'password',
+                  textContentType: 'password',
+                }
+              : {})}
+            {...(type === 'email'
+              ? {
+                  keyboardType: 'email-address',
+                  autoCapitalize: 'none',
+                  autoCompleteType: 'email',
+                  textContentType: 'emailAddress',
+                }
+              : {})}
+            keyboardType={isNumeric ? 'numeric' : 'default'}
+            keyboardAppearance='dark'
+            inputAccessoryViewID={inputAccessoryViewID}
+            {...textInputProps}
+          />
           )}
-
+          {type === 'password' ? (
-          {type === "password" ? (
             <Pressable onPress={() => setShowPassword(!showPassword)}>
               <Image
                 source={icons.eye}
                 style={[Style.iconDefault]}
-                resizeMode="contain"
+                resizeMode='contain'
               />
             </Pressable>
-          ) : type === "coinAmount" ? (
+          ) : type === 'coinAmount' ? (
             <Image
               source={art.coin}
               style={[Style.iconDefault]}
-              resizeMode="contain"
+              resizeMode='contain'
             />
           ) : null}
         </ContainerView>
 
-        {type === "autoCompleteAddress" &&
+        {type === 'autoCompleteAddress' &&
           places?.[0]?.description &&
           places?.[0]?.description !== value &&
           places.map((place, index) => (
@@ -251,36 +247,32 @@ const Input = ({
               style={{
                 ...Style.containerSpaceBetween,
                 marginBottom: index !== places.length - 1 ? gutters / 2 : 0,
-              }}
+              }}>
-            >
               <Text
                 style={{
                   ...Fonts({}),
-                }}
+                }}>
-              >
+                {place?.description || '-'}
-                {place?.description || "-"}
               </Text>
             </Pressable>
           ))}
       </View>
 
-      {(type === "textarea" || isNumeric) && !isWeb && (
+      {(type === 'textarea' || isNumeric) && !isWeb && (
         <InputAccessoryView nativeID={inputAccessoryViewID}>
           <Pressable
             onPress={() => Keyboard.dismiss()}
             style={{
               ...Style.containerRow,
-              justifyContent: "flex-end",
+              justifyContent: 'flex-end',
               backgroundColor: Palette.transparentPrimary,
               padding: gutters,
               paddingVertical: gutters / 2,
-            }}
+            }}>
-          >
             <Text
               style={{
                 ...Fonts({ color: Palette.primary }),
-              }}
+              }}>
-            >
               Fermer
             </Text>
           </Pressable>

src/config/initialGlobalState.js

@@ -1,10 +1,12 @@
-import { Palette } from "../styles";
+import { Palette } from '../styles';
 
 export default {
   currentUID: null,
   currentUserData: null,
   currentUserRoles: [],
 
+  webBackgroundImg: null,
+
   _config: {
     colors: {
       primary: Palette.primary,

src/layouts/AppLayout.js

@@ -1,41 +1,75 @@
-import { View } from "react-native";
+import { View, Image } from 'react-native';
-import { Motion } from "@legendapp/motion";
+import { useGlobal } from 'reactn';
+import { Motion } from '@legendapp/motion';
 
-import useLayoutType from "../hooks/useLayoutType";
+import useLayoutType from '../hooks/useLayoutType';
 
-import Home from "../screens/Home";
+import Home from '../screens/Home';
 
-import { Style } from "../styles";
+import { Palette, Style } from '../styles';
+import { background as backgrounds } from '../assets';
 
 export default ({ currentUID = null, children }) => {
   const { isWeb = false } = useLayoutType();
 
-  const sharedPanelStyle = {
+  // Web: full-screen background with a centered content area (30% width)
-    ...(isWeb ? {} : {}),
+  const [webBackgroundImg] = useGlobal('webBackgroundImg');
-  };
 
-  const mainContainer = {
+  if (isWeb) {
-    flex: 1,
+    return (
-    ...(isWeb ? { maxHeight: "100svh" } : {}),
+      <View
-  };
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '100svh',
+          position: 'relative',
+        }}>
+        {/* Full-viewport background for web */}
+        <Image
+          source={webBackgroundImg || backgrounds.homeBG}
+          resizeMode='cover'
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+          }}
+        />
 
+        {/* Centered content column (phone-like width) */}
+        <View
+          style={{
+            width: '30%',
+            minWidth: 360,
+            maxWidth: 520,
+            height: '100svh',
+            backgroundColor: 'transparent',
+          }}>
+          <View style={{ flex: 1 }}>{children}</View>
+        </View>
+      </View>
+    );
+  }
+
+  // Native / non-web: original layout
+  const sharedPanelStyle = {};
   return (
     <View
       style={{
-        ...mainContainer,
+        flex: 1,
-        flexDirection: "row-reverse",
+        flexDirection: 'row-reverse',
-      }}
+      }}>
-    >
       <View
         style={{
           flex: 2,
-          position: "relative",
+          position: 'relative',
           ...Style.defaultBorder,
           borderTopWidth: 0,
           borderBottomWidth: 0,
           ...sharedPanelStyle,
-        }}
+        }}>
-      >
         {children}
       </View>
     </View>

src/layouts/Page.js

@@ -1,20 +1,21 @@
 /* eslint-disable react/display-name */
-import React, { useState } from "reactn";
+import React, { useState, useEffect } from 'reactn';
-import { Image, View } from "react-native";
+import { setGlobal } from 'reactn';
-import { SafeAreaView } from "react-native-safe-area-context";
+import { Image, View } from 'react-native';
-import { Motion } from "@legendapp/motion";
+import { SafeAreaView } from 'react-native-safe-area-context';
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+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 BaseHeader from '../components/BaseHeader';
-import NavigateHeader from "../components/NavigateHeader";
+import NavigateHeader from '../components/NavigateHeader';
 
-import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
+import { isDesktop, isWeb } from '../hooks/useLayoutType.js';
-import { useUserData } from "../providers/UserDataProvider.js";
+import { useUserData } from '../providers/UserDataProvider.js';
-import { background } from "../assets/index.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",
+  containerType = 'SAFE_AREA_VIEW',
-  headerType = "BASE",
+  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
+      {!isWeb && (
-        source={backgroundImg}
+        <Image
-        style={{ width: "100%", height: "100%", position: "absolute" }}
+          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 !== "NONE" ? (
+          headerType === 'BASE' ? (
-          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>

src/navigation/ChatStack.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import { Palette } from "../styles";
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
 
 import Chat from "../screens/Chat";
 
+const isWeb = Platform.OS === "web";
+
 const screenOptions = {
   headerShown: false,
   cardOverlayEnabled: true,
@@ -14,6 +17,12 @@ const screenOptions = {
   },
   headerTitleAlign: "center",
   headerBackTitleVisible: false,
+  ...(isWeb
+    ? {
+        animationEnabled: false,
+        gestureEnabled: false,
+      }
+    : {}),
 };
 
 const HomeStack = createStackNavigator();

src/navigation/HomeStack.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import { Palette } from "../styles";
@@ -7,6 +8,8 @@ import { Routes } from "./Routes";
 import Home from "../screens/Home";
 import CreateSongs from "../screens/CreateSongs";
 
+const isWeb = Platform.OS === "web";
+
 const screenOptions = {
   headerShown: false,
   cardOverlayEnabled: true,
@@ -15,6 +18,12 @@ const screenOptions = {
   },
   headerTitleAlign: "center",
   headerBackTitleVisible: false,
+  ...(isWeb
+    ? {
+        animationEnabled: false,
+        gestureEnabled: false,
+      }
+    : {}),
 };
 
 const HomeStack = createStackNavigator();

src/navigation/MainStack.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { Palette } from "../styles";
 import { Routes } from "./Routes";
@@ -59,6 +60,8 @@ import CreatePseudo from "../screens/CreatePseudo";
 import { ChooseCoverType } from "../screens/cover/ChooseCoverType";
 import ValidateCover from "../screens/cover/ValidateCover";
 
+const isWeb = Platform.OS === "web";
+
 const screenOptions = {
   headerShown: false,
   cardOverlayEnabled: true,
@@ -68,6 +71,13 @@ const screenOptions = {
   headerTitleStyle: {},
   headerTitleAlign: "center",
   headerBackTitleVisible: false,
+  ...(isWeb
+    ? {
+        // Avoid web-specific pointerEvents issues by disabling animations/gestures
+        animationEnabled: false,
+        gestureEnabled: false,
+      }
+    : {}),
 };
 
 const MainStack = createStackNavigator();

src/navigation/SettingsStack.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import { Palette } from "../styles";
@@ -8,6 +9,8 @@ import ProjectSettings from "../screens/ProjectSettings";
 import AccountSettings from "../screens/AccountSettings";
 import Settings from "../screens/Profile/Settings";
 
+const isWeb = Platform.OS === "web";
+
 const screenOptions = {
   headerShown: false,
   cardOverlayEnabled: true,
@@ -16,6 +19,12 @@ const screenOptions = {
   },
   headerTitleAlign: "center",
   headerBackTitleVisible: false,
+  ...(isWeb
+    ? {
+        animationEnabled: false,
+        gestureEnabled: false,
+      }
+    : {}),
 };
 
 const HomeStack = createStackNavigator();

src/navigation/TaskStack.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Platform } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import { Palette } from "../styles";
@@ -6,6 +7,8 @@ import { Routes } from "./Routes";
 
 import Tasks from "../screens/Tasks";
 
+const isWeb = Platform.OS === "web";
+
 const screenOptions = {
   headerShown: false,
   cardOverlayEnabled: true,
@@ -14,6 +17,12 @@ const screenOptions = {
   },
   headerTitleAlign: "center",
   headerBackTitleVisible: false,
+  ...(isWeb
+    ? {
+        animationEnabled: false,
+        gestureEnabled: false,
+      }
+    : {}),
 };
 
 const HomeStack = createStackNavigator();

yarn.lock

@@ -984,15 +984,6 @@
   resolved "https://registry.yarnpkg.com/@borewit/text-codec/-/text-codec-0.1.1.tgz#7e7f27092473d5eabcffef693a849f2cc48431da"
   integrity sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==
 
-"@callstack/react-theme-provider@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.3.tgz#f964dda28cd6e731c3fbcf916b0579c6f9fb2db7"
-  integrity sha512-B+9JBK7zsND/AdVkjwHvbb4cR05fJofLFG30hOeoXke8WkKAWN36yFljauAhI8qwlXlGFGZMYE1wQvsqBSccrA==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
-    deepmerge "^3.2.0"
-    hoist-non-react-statics "^3.3.0"
-
 "@egjs/hammerjs@^2.0.17":
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
@@ -4194,11 +4185,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
-  integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
-
 deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -5800,11 +5786,6 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-fuse.js@3.4.5:
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.5.tgz#8954fb43f9729bd5dbcb8c08f251db552595a7a6"
-  integrity sha512-s9PGTaQIkT69HaeoTVjwGsLfb8V8ScJLx5XGFcKHg0MqLUH/UZ4EKOtqtXX9k7AFqCGxD1aJmYb8Q5VYDibVRQ==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -7230,11 +7211,6 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
-lodash.toarray@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
-  integrity sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==
-
 lodash@^4.17.15, lodash@^4.17.21, lodash@~4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -7755,13 +7731,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-modal-react-native-web@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/modal-react-native-web/-/modal-react-native-web-0.2.0.tgz#5daaa76213218fd25df739a267b11aed37e8c0c2"
-  integrity sha512-sC0/jL3ZL4bGtv1VS43TnrH7/FHUqgb7IU3VYWNDzuR223fYlpG5Gc974GsTP172Vi+lnnBL/G70xONmaggxeQ==
-  dependencies:
-    warning "^4.0.1"
-
 moment-range@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/moment-range/-/moment-range-4.0.2.tgz#f7c3863df2a1ed7fd1822ba5a7bcf53a78701be9"
@@ -7850,13 +7819,6 @@ node-dir@^0.1.17:
   dependencies:
     minimatch "^3.0.2"
 
-node-emoji@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
-  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
-  dependencies:
-    lodash.toarray "^4.4.0"
-
 node-fetch@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
@@ -8546,15 +8508,6 @@ prompts@^2.3.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -8675,11 +8628,6 @@ rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-async-hook@3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/react-async-hook/-/react-async-hook-3.6.1.tgz#aed3e492d87319392865c83ed7cef3609e2a7fef"
-  integrity sha512-YWBB2feVQF79t5u2raMPHlZ8975Jds+guCvkWVC4kRLDlSCouLsYpQm4DGSqPeHvoHYVVcDfqNayLZAXQmnxnw==
-
 react-devtools-core@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.3.2.tgz#d5df92f8ef2a587986d094ef2c47d84cf4ae46ec"
@@ -8706,7 +8654,7 @@ react-freeze@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.4.tgz#cbbea2762b0368b05cbe407ddc9d518c57c6f3ad"
   integrity sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==
 
-react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8742,18 +8690,6 @@ react-native-compressor@~1.12.0:
   resolved "https://registry.yarnpkg.com/react-native-compressor/-/react-native-compressor-1.12.0.tgz#4c387f100ec6d98adbee10c22496d0e42397d8bf"
   integrity sha512-NMAYpXnTLwx/KecwlLF+9Dnrn/tKV5UVfta8Lk9eROsb05JYnUoKLprRzSSpHcyLjIdQAVaTtx2lPYsappMezw==
 
-react-native-country-picker-modal@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-country-picker-modal/-/react-native-country-picker-modal-2.0.0.tgz#005421303349a81fedf5975e465405bb4b7312d5"
-  integrity sha512-p0wfkKx1mOCEkn3Qm2/FA8TrxSdUw/nqaCcT6KYvIGmPtPdia1Ce+iWh5G0j2hZcDs6yJSkYAx+7lrZ0HwixAw==
-  dependencies:
-    "@callstack/react-theme-provider" "3.0.3"
-    fuse.js "3.4.5"
-    modal-react-native-web "0.2.0"
-    node-emoji "1.10.0"
-    prop-types "15.7.2"
-    react-async-hook "3.6.1"
-
 react-native-dialog@~9.3.0:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/react-native-dialog/-/react-native-dialog-9.3.0.tgz#9d745cc51653a1e2ae08076b46f11d99723c47f6"
@@ -10611,13 +10547,6 @@ warn-once@0.1.1, warn-once@^0.1.0:
   resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
   integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
 
-warning@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"