From dbf6092e5b2f33b277dba702811977105d171d14 Mon Sep 17 00:00:00 2001
From: Jon Tzeng <jon@edge.app>
Date: Wed, 13 Nov 2024 10:34:48 -0800
Subject: [PATCH] Fix incorrect rounded corners on iOS This regressed as a
 result of changes to support rounded blur corners for iOS in the latest
 `NotificationCard` updates (66b4bdd).

---
 src/components/common/BlurBackground.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/common/BlurBackground.tsx b/src/components/common/BlurBackground.tsx
index 14372123c93..01d0e07c82d 100644
--- a/src/components/common/BlurBackground.tsx
+++ b/src/components/common/BlurBackground.tsx
@@ -6,22 +6,31 @@ import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 
 const isAndroid = Platform.OS === 'android'
 
-export const BlurBackground = () => {
+export const BlurBackground = (props: { roundCorners?: boolean }) => {
+  const { roundCorners = false } = props
   const theme = useTheme()
   const styles = getStyles(theme)
 
-  return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor="rgba(0, 0, 0, 0)" />
+  return (
+    <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={[styles.blurView, roundCorners ? styles.roundCorner : {}]} overlayColor="rgba(0, 0, 0, 0)" />
+  )
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
   blurView: {
     ...StyleSheet.absoluteFillObject,
-    // iOS needs this to properly round the container, while Android doesn't:
-    borderRadius: theme.cardBorderRadius,
     // We need this backgroundColor because Android applies an overlay to the
     // entire screen for the BlurView by default. We change this default
     // behavior with the transparent overlayColor, so we add this background
     // color to compensate and to match iOS colors/shades.
     backgroundColor: isAndroid ? (theme.isDark ? '#161616aa' : '#ffffff55') : undefined
+  },
+  roundCorner: {
+    // Weird quirk: iOS needs rounding at this component level to properly round
+    // corners, even if the parent has round corners. Parents can't hide
+    // overflows for this component.
+    // Android behaves as expected when a parent with rounded corners holds
+    // `BlurBackground,` properly hiding overflows.
+    borderRadius: theme.cardBorderRadius
   }
 }))