Make BlurBackground's background tint consistent across platforms

We remove the overlayColor property from BlurBackground which is Android-only. Instead, we add a backgroundColor to the blur view to match the light/dark modes in iOS.
EdgeApp · Jan 18, 2024 · f32d4fe · f32d4fe
1 parent aac5013
commit f32d4fe
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 19 deletions.
diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`CategoryModal should render with a subcategory 1`] = `
       <BlurView
         blurAmount={10}
         blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+        overlayColor="rgba(0, 0, 0, 0)"
         style={
           {
             "backgroundColor": undefined,
@@ -1512,7 +1512,7 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
       <BlurView
         blurAmount={10}
         blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+        overlayColor="rgba(0, 0, 0, 0)"
         style={
           {
             "backgroundColor": undefined,

diff --git a/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`HelpModal should render with loading props 1`] = `
       <BlurView
         blurAmount={10}
         blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+        overlayColor="rgba(0, 0, 0, 0)"
         style={
           {
             "backgroundColor": undefined,

diff --git a/src/components/ui4/BlurBackground.tsx b/src/components/ui4/BlurBackground.tsx
@@ -2,25 +2,24 @@ import React from 'react'
 import { Platform, StyleSheet } from 'react-native'
 import { BlurView } from 'rn-id-blurview'
 
-import { cacheStyles, useTheme } from '../services/ThemeContext'
+import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 
 const isAndroid = Platform.OS === 'android'
 
-export interface BlurBackgroundProps {
-  overlayColor?: string
-}
-
-export const BlurBackground = (props: BlurBackgroundProps) => {
-  const { overlayColor = 'rgba(0, 0, 0, 0)' } = props
+export const BlurBackground = () => {
   const theme = useTheme()
   const styles = getStyles(theme)
 
-  return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor={overlayColor} />
+  return <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor="rgba(0, 0, 0, 0)" />
 }
 
-const getStyles = cacheStyles(() => ({
+const getStyles = cacheStyles((theme: Theme) => ({
   blurView: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: isAndroid ? '#00000055' : undefined
+    // 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.
+    backgroundColor: isAndroid ? (theme.isDark ? '#161616aa' : '#ffffff55') : undefined
   }
 }))
diff --git a/src/components/ui4/ModalUi4.tsx b/src/components/ui4/ModalUi4.tsx
@@ -125,7 +125,7 @@ export function ModalUi4<T>(props: ModalPropsUi4<T>): JSX.Element {
         <Animated.View style={[styles.body, bodyStyle, bodyLayout]}>
           {/* Need another Biew here because BlurView doesn't accept rounded corners in its styling */}
           <View style={styles.blurContainer}>
-            <BlurBackground overlayColor={theme.modalAndroidBlurColor} />
+            <BlurBackground />
           </View>
 
           <View style={styles.dragBarContainer}>

diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
@@ -176,7 +176,6 @@ export const edgeDark: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.blackOp70,
   modalBackgroundUi4: palette.whiteOp37,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,

diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts
@@ -152,7 +152,6 @@ export const edgeLight: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.whiteOp75,
   modalBackgroundUi4: palette.blackOp25,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,

diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts
@@ -177,7 +177,6 @@ export const testDark: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.blackOp25,
   modalBackgroundUi4: palette.whiteOp10,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,

diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts
@@ -152,7 +152,6 @@ export const testLight: Theme = {
   modalBorderColor: palette.transparent,
   modalBorderWidth: 0,
   modalBorderRadiusRem: 1,
-  modalAndroidBlurColor: palette.whiteOp75,
   modalBackgroundUi4: palette.blackOp25,
   modalSceneOverlayColor: palette.black,
   modalDragbarColor: palette.gray,

diff --git a/src/types/Theme.ts b/src/types/Theme.ts
@@ -122,7 +122,6 @@ export interface Theme {
   modalBorderWidth: number
   modalBorderRadiusRem: number
   modalBackgroundUi4: string
-  modalAndroidBlurColor: string
   modalSceneOverlayColor: string
   modalDragbarColor: string