diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap index fd3254a99e1..88548c5e068 100644 --- 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, + }, + ] } /> { const theme = useTheme() const styles = getStyles(theme) @@ -13,15 +14,29 @@ export const BlurBackground = () => { return } +/** A blur background WITHOUT rounded corners. For the scene header/footer */ +export const BlurBackgroundNoRoundedCorners = () => { + const theme = useTheme() + const styles = getStyles(theme) + + return +} + 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 index 449fab94be1..894efec9f13 100644 --- 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 ( - + diff --git a/src/components/themed/MenuTabs.tsx b/src/components/themed/MenuTabs.tsx index 3b72a5eb44c..cf55dbd29ea 100644 --- 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 ( - + {renderFooter()}