Added overlayImageStyle prop

laurens-lamberts · Feb 1, 2025 · ce48a69 · ce48a69
1 parent 551c061
commit ce48a69
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - possible fix for overlay height
+- Added overlayImageStyle prop
 
 ## [0.1.15-3] - 2025-02-01
 

diff --git a/package/src/components/OverlayAnchor.tsx b/package/src/components/OverlayAnchor.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { View } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 import Overlay from '../screens/Overlay';
 import { useImage } from '@shopify/react-native-skia';
 import { PopoutTileType } from '../types/PopoutTile';
@@ -10,6 +10,7 @@ interface Props {
   panScale: SharedValue<number>;
   backdropProgress: SharedValue<number>;
   disableBlur?: boolean;
+  overlayImageStyle?: ViewStyle;
 }
 
 const OverlayAnchor = ({
@@ -18,6 +19,7 @@ const OverlayAnchor = ({
   panScale,
   backdropProgress,
   disableBlur,
+  overlayImageStyle,
 }: PropsWithChildren<Props>) => {
   const skiaImage = useImage(item?.image);
   if (!skiaImage) {
@@ -41,6 +43,7 @@ const OverlayAnchor = ({
         panScale={panScale}
         backdropProgress={backdropProgress}
         disableBlur={disableBlur}
+        overlayImageStyle={overlayImageStyle}
       >
         {children}
       </Overlay>

diff --git a/package/src/components/PopoutRootView.tsx b/package/src/components/PopoutRootView.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import { View, ViewStyle, useWindowDimensions } from 'react-native';
 import OverlayAnchor from '../components/OverlayAnchor';
 import Animated, {
   Extrapolation,
@@ -41,6 +41,7 @@ export type OverlayConfigType = {
   tileOriginContainerRef?: RefObject<View>;
   overlayUnderNotch?: boolean;
   overlayBorderRadius?: number;
+  overlayImageStyle?: ViewStyle;
 };
 
 type OnElementTapType = {
@@ -303,6 +304,7 @@ const PopoutRootView = ({ children }: { children: ReactNode }) => {
             panScale={panScale}
             backdropProgress={backdropProgress}
             disableBlur={!overlayConfig.backdropBlur}
+            overlayImageStyle={overlayConfig.overlayImageStyle}
           >
             {typeof OverlayComponent === 'function' ? (
               <OverlayComponent />

diff --git a/package/src/screens/Overlay.tsx b/package/src/screens/Overlay.tsx
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useMemo,
 } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import { View, ViewStyle, useWindowDimensions } from 'react-native';
 import {
   ComposedGesture,
   Gesture,
@@ -37,6 +37,7 @@ interface Props extends React.ComponentProps<typeof Animated.View> {
   panScale: SharedValue<number>;
   backdropProgress: SharedValue<number>;
   disableBlur?: boolean;
+  overlayImageStyle?: ViewStyle;
 }
 
 const GestureOrNoGesture = ({
@@ -61,6 +62,7 @@ const Overlay = ({
   panScale,
   backdropProgress,
   disableBlur,
+  overlayImageStyle,
 }: PropsWithChildren<Props>) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
@@ -281,6 +283,7 @@ const Overlay = ({
             tileWidth={item?.origin?.width}
             tileHeight={item?.origin?.height}
             overlayProgress={overlayProgress}
+            overlayImageStyle={overlayImageStyle}
           />
           <View
             style={{
@@ -297,6 +300,7 @@ const Overlay = ({
             tileWidth={item?.origin?.width}
             tileHeight={item?.origin?.height}
             overlayProgress={overlayProgress}
+            overlayImageStyle={overlayImageStyle}
           />
         </View>
       </GestureOrNoGesture>

diff --git a/package/src/screens/OverlayBackdrop.tsx b/package/src/screens/OverlayBackdrop.tsx
@@ -24,13 +24,15 @@ const OverlayBackdrop = ({
   tileWidth,
   tileHeight,
   overlayProgress,
+  overlayImageStyle,
 }: {
   image: SkImage;
   blurred?: boolean;
   opacity: SharedValue<number> | number;
   tileWidth?: number;
   tileHeight?: number;
   overlayProgress: SharedValue<number>;
+  overlayImageStyle?: ViewStyle;
 }) => {
   const {
     overlayConfig: { overlayUnderNotch, dimmedOverlayBackdrop },
@@ -77,7 +79,7 @@ const OverlayBackdrop = ({
 
   return (
     <Animated.View style={[viewStyle, animatedStyle]} pointerEvents="none">
-      <Canvas style={{ flex: 1 }}>
+      <Canvas style={[{ flex: 1 }, overlayImageStyle]}>
         <Image image={image} fit="cover" width={screenWidth} height={height}>
           {blurred && (
             <Blur blur={dimmed ? 150 : 15} mode={dimmed ? 'decal' : 'clamp'}>