Removed blur in transition when blur is disabled, renamed variables

laurens-lamberts · Feb 1, 2025 · aa63ed6 · aa63ed6
1 parent d59ed1b
commit aa63ed6
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 26 deletions.
diff --git a/example/src/app/examples/netflix/Overview.tsx b/example/src/app/examples/netflix/Overview.tsx
@@ -31,7 +31,7 @@ const Overview = () => {
               <PopoutTile
                 key={item.id}
                 item={item}
-                overlayUnderNotch={false}
+                overlayNotchInset={false}
                 OverlayComponent={() => (
                   <PopoutOverlayContent
                     item={DATA.testCollection[index]}

diff --git a/example/src/app/examples/testing/Overview.tsx b/example/src/app/examples/testing/Overview.tsx
@@ -50,7 +50,7 @@ NOT under notch`}
         )}
         style={{width: 100, height: 200}}
         item={DATA.testCollection[1]}
-        overlayUnderNotch={false}
+        overlayNotchInset={false}
       />
       <Text style={{color: 'white'}}>
         {`backdropBlur true
@@ -66,7 +66,7 @@ NOT under notch`}
         )}
         style={{width: screenWidth - 40, height: screenWidth - 40}}
         item={DATA.testCollection[2]}
-        overlayUnderNotch={false}
+        overlayNotchInset={false}
       />
       <Text style={{color: 'white'}}>
         {`backdropBlur false
@@ -84,7 +84,7 @@ with custom close button`}
         backdropScale={true}
         overlayBorderRadius={0.1}
         hasPanHandle={false}
-        dimmedOverlayBackdrop={false}
+        overlayDimmedBackground={false}
         tileOriginContainerRef={tileOriginContainerRef}
         OverlayComponent={() => (
           <View style={{margin: 20}}>

diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md
@@ -5,6 +5,11 @@ 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]
+
+- Removed blur in transition when blur is disabled
+- Renamed and corrected variables
+
 ## [0.1.15-5] - 2025-02-02
 
 - added null check for animated style

diff --git a/package/src/components/CloseButton.tsx b/package/src/components/CloseButton.tsx
@@ -40,7 +40,7 @@ const OpacityContainer = ({
 
 const CloseButton = ({ closeOverlay }: { closeOverlay: () => void }) => {
   const {
-    overlayConfig: { overlayUnderNotch },
+    overlayConfig: { overlayNotchInset },
   } = useContext(PopoutContext);
   const insets = useSafeAreaInsets();
 
@@ -49,8 +49,8 @@ const CloseButton = ({ closeOverlay }: { closeOverlay: () => void }) => {
       onPress={closeOverlay}
       style={{
         position: 'absolute',
-        top: overlayUnderNotch ? insets.top : 6,
-        right: overlayUnderNotch ? insets.top / 2 : 6,
+        top: overlayNotchInset ? insets.top : 6,
+        right: overlayNotchInset ? insets.top / 2 : 6,
         borderRadius: 18,
         height: 36,
         width: 36,

diff --git a/package/src/components/PopoutRootView.tsx b/package/src/components/PopoutRootView.tsx
@@ -37,11 +37,12 @@ export type OverlayConfigType = {
   backdropScale?: boolean;
   backdropBlur?: boolean;
   hasPanHandle?: boolean;
-  dimmedOverlayBackdrop?: boolean;
   tileOriginContainerRef?: RefObject<View>;
-  overlayUnderNotch?: boolean;
+  overlayNotchInset?: boolean;
   overlayBorderRadius?: number;
   overlayImageStyle?: ViewStyle;
+  overlayDimmedBackground?: boolean;
+  overlayBlur?: boolean;
 };
 
 type OnElementTapType = {
@@ -66,10 +67,11 @@ const DEFAULT_OVERLAY_CONFIG: OverlayConfigType = {
   backdropScale: true,
   backdropBlur: true,
   hasPanHandle: true,
-  dimmedOverlayBackdrop: true,
   tileOriginContainerRef: undefined,
-  overlayUnderNotch: true,
+  overlayDimmedBackground: true,
+  overlayNotchInset: true,
   overlayBorderRadius: BORDER_RADIUS_OVERLAY,
+  overlayBlur: true,
 };
 
 export const PopoutContext = createContext<PopoutContextType>({
@@ -303,7 +305,7 @@ const PopoutRootView = ({ children }: { children: ReactNode }) => {
             item={elementOpened}
             panScale={panScale}
             backdropProgress={backdropProgress}
-            disableBlur={!overlayConfig.backdropBlur}
+            disableBlur={!overlayConfig.overlayBlur}
             overlayImageStyle={overlayConfig.overlayImageStyle}
           >
             {typeof OverlayComponent === 'function' ? (

diff --git a/package/src/components/PopoutTile.tsx b/package/src/components/PopoutTile.tsx
@@ -30,11 +30,11 @@ const PopoutTile = ({
   style,
   children,
   fadeIn = true,
-  overlayUnderNotch = true,
+  overlayNotchInset = true,
   backdropBlur = true,
   backdropScale = true,
   hasPanHandle = true,
-  dimmedOverlayBackdrop = true,
+  overlayDimmedBackground = true,
   tileOriginContainerRef,
   overlayBorderRadius,
   OverlayComponent,
@@ -71,10 +71,10 @@ const PopoutTile = ({
             backdropScale,
             backdropBlur,
             hasPanHandle,
-            dimmedOverlayBackdrop,
+            overlayDimmedBackground,
             tileOriginContainerRef,
             overlayBorderRadius,
-            overlayUnderNotch,
+            overlayNotchInset,
           },
           OverlayComponent,
           CloseButtonComponent,

diff --git a/package/src/screens/Overlay.tsx b/package/src/screens/Overlay.tsx
@@ -69,12 +69,12 @@ const Overlay = ({
   // TODO: refactor into hook, together with the one in OverlayBackdrop.tsx
   const {
     elementOpened,
-    overlayConfig: { overlayUnderNotch, tileBorderRadius, overlayBorderRadius },
+    overlayConfig: { overlayNotchInset, tileBorderRadius, overlayBorderRadius },
     onCloseCallbackRef,
   } = useContext(PopoutContext);
   const insets = useSafeAreaInsets();
   const screenHeightMinusInset =
-    screenHeight - (overlayUnderNotch ? 0 : insets.top);
+    screenHeight - (overlayNotchInset ? 0 : insets.top);
 
   // We have all separate values, because we need to perform the animations imperatively due to new data coming in via props
   const overlayProgress = useSharedValue(0);
@@ -138,7 +138,7 @@ const Overlay = ({
     overlayProgress.value = withTiming(1, TRANSITION_CONFIG);
     overlayX.value = withTiming(-(item?.origin?.x || 0), TRANSITION_CONFIG);
     overlayY.value = withTiming(
-      -(item?.origin?.y || 0) + (overlayUnderNotch ? 0 : insets.top),
+      -(item?.origin?.y || 0) + (overlayNotchInset ? 0 : insets.top),
       TRANSITION_CONFIG
     );
     overlayWidth.value = withTiming(screenWidth, TRANSITION_CONFIG);
@@ -148,7 +148,7 @@ const Overlay = ({
   }, [
     item,
     insets.top,
-    overlayUnderNotch,
+    overlayNotchInset,
     screenHeightMinusInset,
     backdropProgress,
     panScale,
@@ -287,7 +287,7 @@ const Overlay = ({
           />
           <View
             style={{
-              paddingTop: overlayUnderNotch ? insets.top : 0,
+              paddingTop: overlayNotchInset ? insets.top : 0,
             }}
             pointerEvents="box-none"
           >
@@ -296,6 +296,7 @@ const Overlay = ({
           <CloseButton hide={onClose} overlayProgress={overlayProgress} />
           <OverlayBackdrop
             image={image}
+            blurred={!disableBlur}
             opacity={shadowImageOpacity}
             tileWidth={item?.origin?.width}
             tileHeight={item?.origin?.height}

diff --git a/package/src/screens/OverlayBackdrop.tsx b/package/src/screens/OverlayBackdrop.tsx
@@ -35,15 +35,15 @@ const OverlayBackdrop = ({
   overlayImageStyle?: ViewStyle;
 }) => {
   const {
-    overlayConfig: { overlayUnderNotch, dimmedOverlayBackdrop },
+    overlayConfig: { overlayNotchInset, overlayDimmedBackground },
   } = useContext(PopoutContext);
   const safeAreaInsets = useSafeAreaInsets();
-  const insets = overlayUnderNotch
+  const insets = overlayNotchInset
     ? { top: 0, bottom: 0, left: 0, right: 0 }
     : safeAreaInsets;
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
-  const dimmed = blurred && dimmedOverlayBackdrop;
+  const dimmed = blurred && overlayDimmedBackground;
 
   const viewStyle: ViewStyle = {
     position: 'absolute',

diff --git a/package/src/screens/PopoutOverlayContent.tsx b/package/src/screens/PopoutOverlayContent.tsx
@@ -12,14 +12,14 @@ const PopoutOverlayContent = ({
   textColor: string;
 }) => {
   const {
-    overlayConfig: { overlayUnderNotch },
+    overlayConfig: { overlayNotchInset },
   } = useContext(PopoutContext);
 
   return (
     <View>
       <View
         style={{
-          backgroundColor: overlayUnderNotch
+          backgroundColor: overlayNotchInset
             ? undefined
             : 'rgba(102, 119, 136, 0.3)',
           padding: 12,