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