1import { BlurView } from "expo-blur";
2import { Platform, StyleSheet, View, type ColorValue } from "react-native";
3
4import { useAppearancePreferences } from "../../features/settings/appearance/AppearancePreferencesProvider";
5import { themeColorWithAlpha } from "../../lib/mobileTheme";
6
7export function GlassBackdrop(props: { readonly fallbackColor?: ColorValue }) {
8 const { themeAppearance, themeVariables } = useAppearancePreferences();
9 const supportsBlur = Platform.OS === "ios";
10 const color = props.fallbackColor ?? themeVariables["--color-glass-fallback"];
11 const colorStyle = {
12 backgroundColor:
13 supportsBlur || typeof color !== "string" ? color : themeColorWithAlpha(color, 1),
14 };
15
16 return (
17 <>
18 {supportsBlur ? (
19 <BlurView
20 pointerEvents="none"
21 intensity={80}
22 tint={themeAppearance === "dark" ? "dark" : "default"}
23 style={StyleSheet.absoluteFill}
24 />
25 ) : null}
26 <View
27 pointerEvents="none"
28 className="absolute inset-0 bg-glass-fallback"
29 style={colorStyle}
30 />
31 </>
32 );
33}