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

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