fix flash & dropdown

src/components/ProjectDropDown/ProjectDropDown.js

@@ -13,6 +13,7 @@ import {
   Easing,
   FlatList,
   Image,
+  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -24,6 +25,41 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../GradientButton";
 
 const BUTTON_BLUR_INTENSITY = 20;
+const IS_WEB = Platform.OS === "web";
+const WEB_BLUR_FALLBACK_STYLE = {
+  backgroundColor: Palette.glass,
+};
+const BLUR_VIEW_PROPS =
+  Platform.OS === "android"
+    ? { experimentalBlurMethod: "dimezisBlurView" }
+    : {};
+const toStyleArray = (style) =>
+  Array.isArray(style) ? style : style ? [style] : [];
+
+const ThemedBlurView = ({ style, children, ...rest }) => {
+  if (IS_WEB) {
+    return (
+      <View
+        {...rest}
+        style={[WEB_BLUR_FALLBACK_STYLE, ...toStyleArray(style)]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <BlurView
+      {...BLUR_VIEW_PROPS}
+      intensity={BUTTON_BLUR_INTENSITY}
+      tint="dark"
+      style={style}
+      {...rest}
+    >
+      {children}
+    </BlurView>
+  );
+};
 
 const defaultFormatDate = (timestamp) => {
   try {
@@ -210,11 +246,7 @@ const ProjectDropDown = ({
   }, [dropdownWidth, triggerLayout?.width, triggerWindowLayout]);
 
   const dropdownContent = (
-    <BlurView
-      intensity={BUTTON_BLUR_INTENSITY}
-      tint="dark"
-      style={styles.dropdownOverlay}
-    >
+    <ThemedBlurView style={styles.dropdownOverlay}>
       <ProjectRow
         isTitle={true}
         isOpen={isOpen}
@@ -250,7 +282,7 @@ const ProjectDropDown = ({
           onPress={handleCreate}
         />
       </View>
-    </BlurView>
+    </ThemedBlurView>
   );
 
   return (
@@ -273,9 +305,7 @@ const ProjectDropDown = ({
             },
           ]}
         >
-          <BlurView
-            intensity={BUTTON_BLUR_INTENSITY}
-            tint="dark"
+          <ThemedBlurView
             style={[
               styles.dropdownBlur,
               isDisabled && styles.dropdownBlurDisabled,
@@ -288,7 +318,7 @@ const ProjectDropDown = ({
               formatDate={formatDate}
               onSelect={toggleDropdown}
             />
-          </BlurView>
+          </ThemedBlurView>
         </Animated.View>
 
         {isOpen && triggerWindowLayout ? (
@@ -399,7 +429,7 @@ const ProjectRow = ({
       style={styles.projectRowPressable}
     >
       <Image source={imageSource} style={styles.projectImage} />
-      <BlurView tint="dark" style={styles.projectInfo}>
+      <ThemedBlurView style={styles.projectInfo}>
         <View style={styles.projectTexts}>
           <Text style={styles.projectTitle} numberOfLines={1}>
             {title}
@@ -429,7 +459,7 @@ const ProjectRow = ({
             />
           </Pressable>
         )}
-      </BlurView>
+      </ThemedBlurView>
     </Pressable>
   );
 };

src/navigation/MainStack.js

@@ -83,7 +83,7 @@ const screenOptions = {
 
 const MainStack = createStackNavigator();
 
-const screens = [
+const baseScreens = [
   { name: Routes.Splash, component: Splash },
   { name: Routes.Onboarding, component: Onboarding },
   { name: Routes.Login, component: Login, title: "Connexion" },
@@ -306,6 +306,38 @@ const screens = [
   },
 ];
 
+const transparentSettingsRoutes = new Set([
+  Routes.ChangeEmailAddress,
+  Routes.ChangePassword,
+  Routes.Notifications,
+  Routes.Language,
+]);
+
+const screens = baseScreens.map((screen) => {
+  if (!transparentSettingsRoutes.has(screen.name)) {
+    return screen;
+  }
+
+  const existingOptions = screen.options || {};
+  return {
+    ...screen,
+    options: {
+      ...existingOptions,
+      animationEnabled: false,
+      presentation: "transparentModal",
+      cardOverlayEnabled: true,
+      contentStyle: {
+        ...(existingOptions.contentStyle || {}),
+        backgroundColor: "transparent",
+      },
+      cardStyle: {
+        ...(existingOptions.cardStyle || {}),
+        backgroundColor: "transparent",
+      },
+    },
+  };
+});
+
 export default function Main() {
   return (
     <MainStack.Navigator