diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md index ae7502d..972e1d8 100644 --- 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 index 5077e0f..114a492 100644 --- 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; backdropProgress: SharedValue; disableBlur?: boolean; + overlayImageStyle?: ViewStyle; } const OverlayAnchor = ({ @@ -18,6 +19,7 @@ const OverlayAnchor = ({ panScale, backdropProgress, disableBlur, + overlayImageStyle, }: PropsWithChildren) => { const skiaImage = useImage(item?.image); if (!skiaImage) { @@ -41,6 +43,7 @@ const OverlayAnchor = ({ panScale={panScale} backdropProgress={backdropProgress} disableBlur={disableBlur} + overlayImageStyle={overlayImageStyle} > {children} diff --git a/package/src/components/PopoutRootView.tsx b/package/src/components/PopoutRootView.tsx index b55f296..92aa15e 100644 --- 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; 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' ? ( diff --git a/package/src/screens/Overlay.tsx b/package/src/screens/Overlay.tsx index 55a46cc..0548098 100644 --- 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 { panScale: SharedValue; backdropProgress: SharedValue; disableBlur?: boolean; + overlayImageStyle?: ViewStyle; } const GestureOrNoGesture = ({ @@ -61,6 +62,7 @@ const Overlay = ({ panScale, backdropProgress, disableBlur, + overlayImageStyle, }: PropsWithChildren) => { const { width: screenWidth, height: screenHeight } = useWindowDimensions(); @@ -281,6 +283,7 @@ const Overlay = ({ tileWidth={item?.origin?.width} tileHeight={item?.origin?.height} overlayProgress={overlayProgress} + overlayImageStyle={overlayImageStyle} /> diff --git a/package/src/screens/OverlayBackdrop.tsx b/package/src/screens/OverlayBackdrop.tsx index 109dbf1..0e8e9f1 100644 --- a/package/src/screens/OverlayBackdrop.tsx +++ b/package/src/screens/OverlayBackdrop.tsx @@ -24,6 +24,7 @@ const OverlayBackdrop = ({ tileWidth, tileHeight, overlayProgress, + overlayImageStyle, }: { image: SkImage; blurred?: boolean; @@ -31,6 +32,7 @@ const OverlayBackdrop = ({ tileWidth?: number; tileHeight?: number; overlayProgress: SharedValue; + overlayImageStyle?: ViewStyle; }) => { const { overlayConfig: { overlayUnderNotch, dimmedOverlayBackdrop }, @@ -77,7 +79,7 @@ const OverlayBackdrop = ({ return ( - + {blurred && (