fix: add experimentalBlurMethod prop to ThemedBlurView in EntryNormalItem for better Android support

Author: lawvs

apps/mobile/src/components/common/ThemedBlurView.tsx

@@ -4,6 +4,12 @@ import { useColorScheme } from "nativewind"
 import { Platform, StyleSheet, View } from "react-native"
 import { useColor } from "react-native-uikit-colors"
 
+/**
+ * @android In Android, the BlurView is experimental and not fully supported,
+ * so we use a normal View with a background color with **100% opacity**.
+ * However, if the `experimentalBlurMethod` prop is explicitly provided,
+ * we'll use the BlurView even on Android,
+ */
 export const ThemedBlurView = ({
   ref,
   tint,
@@ -13,7 +19,9 @@ export const ThemedBlurView = ({
 
   const background = useColor("systemBackground")
 
-  return Platform.OS === "ios" ? (
+  const useBlurView = Platform.OS === "ios" || "experimentalBlurMethod" in rest
+
+  return useBlurView ? (
     <BlurView
       ref={ref}
       intensity={100}

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -164,7 +164,11 @@ export const EntryNormalItem = memo(
                   }}
                 >
                   <View className="overflow-hidden rounded-full p-2">
-                    <ThemedBlurView style={StyleSheet.absoluteFillObject} intensity={30} />
+                    <ThemedBlurView
+                      style={StyleSheet.absoluteFillObject}
+                      intensity={30}
+                      experimentalBlurMethod="none"
+                    />
                     {isPlaying ? (
                       <PauseCuteFiIcon color="white" width={24} height={24} />
                     ) : isLoading ? (