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