EdgeApp · Jon-edge · Nov 13, 2024 · Nov 13, 2024
diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
@@ -65,15 +65,19 @@ exports[`MenuTabs should render with loading props 1`] = `
       blurType="dark"
       overlayColor="rgba(0, 0, 0, 0)"
       style={
-        {
-          "backgroundColor": undefined,
-          "borderRadius": 16,
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
+        [
+          {
+            "backgroundColor": undefined,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          {
+            "borderRadius": 16,
+          },
+        ]
       }
     />
     <BVLinearGradient

diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`CategoryModal should render with a subcategory 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",
@@ -1464,7 +1463,6 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`CountryListModal should render with a country list 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`HelpModal should render with loading props 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`LogsModal should render with a logs modal 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`TextInputModal should render with a blank input field 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",
@@ -638,7 +637,6 @@ exports[`TextInputModal should render with a populated input field 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`WalletListModal should render with loading props 1`] = `
       style={
         {
           "backgroundColor": undefined,
-          "borderRadius": 16,
           "bottom": 0,
           "left": 0,
           "position": "absolute",

diff --git a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap
@@ -1383,7 +1383,6 @@ exports[`SendScene2 1 spendTarget 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -3178,7 +3177,6 @@ exports[`SendScene2 1 spendTarget with info tiles 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -4950,7 +4948,6 @@ exports[`SendScene2 2 spendTargets 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -6419,7 +6416,6 @@ exports[`SendScene2 2 spendTargets hide tiles 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -7864,7 +7860,6 @@ exports[`SendScene2 2 spendTargets hide tiles 2`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -9146,7 +9141,6 @@ exports[`SendScene2 2 spendTargets hide tiles 3`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -10712,7 +10706,6 @@ exports[`SendScene2 2 spendTargets lock tiles 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -12236,7 +12229,6 @@ exports[`SendScene2 2 spendTargets lock tiles 2`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -13694,7 +13686,6 @@ exports[`SendScene2 2 spendTargets lock tiles 3`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -15135,7 +15126,6 @@ exports[`SendScene2 Render SendScene 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",

diff --git a/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap
@@ -1879,7 +1879,6 @@ exports[`SwapConfirmationScene should render with loading props 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",

diff --git a/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapCreateScene.test.tsx.snap
@@ -646,7 +646,6 @@ exports[`SwapCreateScene should render with loading props 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",

diff --git a/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SwapSuccessScene.test.tsx.snap
@@ -381,7 +381,6 @@ exports[`SwapSuccessSceneComponent should render with loading props 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",

diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap
@@ -2195,7 +2195,6 @@ exports[`TransactionDetailsScene should render 1`] = `
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -4612,7 +4611,6 @@ exports[`TransactionDetailsScene should render with negative nativeAmount and fi
           style={
             {
               "backgroundColor": undefined,
-              "borderRadius": 16,
               "bottom": 0,
               "left": 0,
               "position": "absolute",

diff --git a/src/components/common/BlurBackground.tsx b/src/components/common/BlurBackground.tsx
@@ -6,22 +6,37 @@ import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 
 const isAndroid = Platform.OS === 'android'
 
+/** A blur background WITH rounded corners, used for most components */
 export const BlurBackground = () => {
   const theme = useTheme()
   const styles = getStyles(theme)
 
   return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor="rgba(0, 0, 0, 0)" />
 }
 
+/** A blur background WITHOUT rounded corners. For the scene header/footer */
+export const BlurBackgroundNoRoundedCorners = () => {
+  const theme = useTheme()
+  const styles = getStyles(theme)
+
+  return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={[styles.blurView, 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
   }
 }))
diff --git a/src/components/navigation/HeaderBackground.tsx b/src/components/navigation/HeaderBackground.tsx
@@ -4,7 +4,7 @@ import LinearGradient from 'react-native-linear-gradient'
 import Animated, { interpolate, SharedValue, useAnimatedStyle } from 'react-native-reanimated'
 
 import { useSceneScrollContext } from '../../state/SceneScrollState'
-import { BlurBackground } from '../common/BlurBackground'
+import { BlurBackgroundNoRoundedCorners } from '../common/BlurBackground'
 import { styled } from '../hoc/styled'
 import { useTheme } from '../services/ThemeContext'
 import { DividerLine } from '../themed/DividerLine'
@@ -17,7 +17,7 @@ export const HeaderBackground = (props: any) => {
 
   return (
     <HeaderBackgroundContainerView scrollY={scrollY}>
-      <BlurBackground />
+      <BlurBackgroundNoRoundedCorners />
       <HeaderLinearGradient colors={theme.headerBackground} start={theme.headerBackgroundStart} end={theme.headerBackgroundEnd} />
       <DividerLine colors={theme.headerOutlineColors} />
     </HeaderBackgroundContainerView>

diff --git a/src/components/themed/MenuTabs.tsx b/src/components/themed/MenuTabs.tsx
@@ -20,7 +20,7 @@ import { lstrings } from '../../locales/strings'
 import { useSceneFooterRenderState, useSceneFooterState } from '../../state/SceneFooterState'
 import { config } from '../../theme/appConfig'
 import { scale } from '../../util/scaling'
-import { BlurBackground } from '../common/BlurBackground'
+import { BlurBackgroundNoRoundedCorners } from '../common/BlurBackground'
 import { styled } from '../hoc/styled'
 import { useTheme } from '../services/ThemeContext'
 import { VectorIcon } from './VectorIcon'
@@ -89,7 +89,7 @@ export const MenuTabs = (props: BottomTabBarProps) => {
   return (
     <Container shiftY={shiftY} pointerEvents="box-none">
       <Background footerHeight={footerHeight} openRatio={footerOpenRatio} tabLabelHeight={tabLabelHeight} pointerEvents="none">
-        <BlurBackground />
+        <BlurBackgroundNoRoundedCorners />
         <BackgroundLinearGradient colors={theme.tabBarBackground} start={theme.tabBarBackgroundStart} end={theme.tabBarBackgroundEnd} />
       </Background>
       {renderFooter()}