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 · 085a81e · 085a81e
1 parent aac5013
commit 085a81e
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 74 deletions.
diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap
@@ -13,21 +13,38 @@ exports[`MenuTabs should render with loading props 1`] = `
     }
   }
 >
-  <BlurView
-    blurAmount={10}
-    blurType="dark"
-    overlayColor="rgba(0, 0, 0, 0)"
+  <View
     style={
-      {
-        "backgroundColor": undefined,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
     }
-  />
+  >
+    <BlurView
+      blurAmount={10}
+      blurType="dark"
+      overlayColor="rgba(0, 0, 0, 0)"
+      style={
+        {
+          "backgroundColor": undefined,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+  </View>
   <BVLinearGradient
     colors={
       [

diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap
@@ -71,27 +71,43 @@ exports[`CategoryModal should render with a subcategory 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={
@@ -1503,27 +1519,43 @@ exports[`CategoryModal should render with an empty subcategory 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={

diff --git a/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/HelpModal.test.tsx.snap
@@ -71,27 +71,43 @@ exports[`HelpModal should render with loading props 1`] = `
           "borderTopLeftRadius": 22,
           "borderTopRightRadius": 22,
           "height": "100%",
-          "overflow": "hidden",
           "position": "absolute",
           "width": "100%",
         }
       }
     >
-      <BlurView
-        blurAmount={10}
-        blurType="dark"
-        overlayColor="rgba(0, 0, 0, .7)"
+      <View
         style={
-          {
-            "backgroundColor": undefined,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
+          [
+            {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
-      />
+      >
+        <BlurView
+          blurAmount={10}
+          blurType="dark"
+          overlayColor="rgba(0, 0, 0, 0)"
+          style={
+            {
+              "backgroundColor": undefined,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
     </View>
     <View
       style={

diff --git a/src/components/ui4/BlurBackground.tsx b/src/components/ui4/BlurBackground.tsx
@@ -1,26 +1,29 @@
 import React from 'react'
-import { Platform, StyleSheet } from 'react-native'
+import { Platform, StyleSheet, View } 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 (
+    <View style={[StyleSheet.absoluteFill, { overflow: 'hidden' }]}>
+      <BlurView blurType={theme.isDark ? 'dark' : 'light'} style={styles.blurView} overlayColor="rgba(0, 0, 0, 0)" />
+    </View>
+  )
 }
 
-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}>
@@ -173,8 +173,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     width: '100%',
     height: '100%',
     borderTopLeftRadius: theme.rem(1),
-    borderTopRightRadius: theme.rem(1),
-    overflow: 'hidden'
+    borderTopRightRadius: theme.rem(1)
   },
   dragBarContainer: {
     alignItems: 'center',

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