changed default of overlayBlur and other changes

laurens-lamberts · Feb 2, 2025 · 559db28 · 559db28
1 parent 33792a1
commit 559db28
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+- BREAKING CHANGE: changed default of overlayBlur to false
+- BREAKING CHANGE: changed image to "contain" when there is no overlayBlur
+- removed overlay background color when there is no blur
+-
+
 ## [0.1.15-11] - 2025-02-02
 
 - Another attempt to provide option disabling the blur

diff --git a/package/src/components/PopoutRootView.tsx b/package/src/components/PopoutRootView.tsx
@@ -71,7 +71,7 @@ const DEFAULT_OVERLAY_CONFIG: OverlayConfigType = {
   overlayDimmedBackground: true,
   overlayNotchInset: true,
   overlayBorderRadius: BORDER_RADIUS_OVERLAY,
-  overlayBlur: true,
+  overlayBlur: false,
 };
 
 export const PopoutContext = createContext<PopoutContextType>({

diff --git a/package/src/screens/OverlayBackdrop.tsx b/package/src/screens/OverlayBackdrop.tsx
@@ -51,7 +51,7 @@ const OverlayBackdrop = ({
     top: 0,
     width: screenWidth,
     height: screenHeight - insets.top,
-    backgroundColor: '#000',
+    backgroundColor: overlayBlur ? '#000' : undefined,
   };
 
   const height = useDerivedValue(() => {
@@ -80,7 +80,12 @@ const OverlayBackdrop = ({
   return (
     <Animated.View style={[viewStyle, animatedStyle]} pointerEvents="none">
       <Canvas style={[{ flex: 1 }, overlayImageStyle]}>
-        <Image image={image} fit="cover" width={screenWidth} height={height}>
+        <Image
+          image={image}
+          fit={overlayBlur ? 'cover' : 'contain'}
+          width={screenWidth}
+          height={height}
+        >
           {blurred && overlayBlur && (
             <Blur blur={dimmed ? 150 : 15} mode={dimmed ? 'decal' : 'clamp'}>
               {dimmed && (