fix: remove props from backdrop override

Author: isekovanic

examples/SampleApp/App.tsx

@@ -17,7 +17,6 @@ import {
   useOverlayContext,
   useTheme,
 } from 'stream-chat-react-native';
-import type { MessageOverlayBackgroundProps } from 'stream-chat-react-native';
 
 import { getMessaging } from '@react-native-firebase/messaging';
 import notifee, { EventType } from '@notifee/react-native';
@@ -99,7 +98,7 @@ const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
 
-const MessageOverlayBlurBackground = ({ style }: MessageOverlayBackgroundProps) => {
+const MessageOverlayBlurBackground = () => {
   const {
     theme: { semantics },
   } = useTheme();
@@ -116,7 +115,7 @@ const MessageOverlayBlurBackground = ({ style }: MessageOverlayBackgroundProps)
         downsampleFactor={isIOS ? undefined : 12}
         pointerEvents='none'
         reducedTransparencyFallbackColor='rgba(0, 0, 0, 0.8)'
-        style={[styles.messageOverlayBlurBackground, style]}
+        style={styles.messageOverlayBlurBackground}
       />
       <View
         style={[

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -3,7 +3,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  useColorScheme,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -20,7 +19,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PortalHost } from 'react-native-teleport';
 
 import { ClosingPortalHostsLayer } from './ClosingPortalHostsLayer';
-import type { MessageOverlayBackgroundProps } from './OverlayContext';
 
 import {
   closeOverlay,
@@ -33,13 +31,13 @@ import { useTheme } from '../themeContext/ThemeContext';
 
 const DURATION = 300;
 
-const DefaultMessageOverlayBackground = ({ style }: MessageOverlayBackgroundProps) => {
+const DefaultMessageOverlayBackground = () => {
   const {
     theme: { semantics },
   } = useTheme();
 
   return (
-    <View pointerEvents='none' style={[StyleSheet.absoluteFillObject, style]}>
+    <View pointerEvents='none' style={StyleSheet.absoluteFillObject}>
       <View
         pointerEvents='none'
         style={[
@@ -54,7 +52,7 @@ const DefaultMessageOverlayBackground = ({ style }: MessageOverlayBackgroundProp
 };
 
 type MessageOverlayHostLayerProps = {
-  BackgroundComponent?: React.ComponentType<MessageOverlayBackgroundProps>;
+  BackgroundComponent?: React.ComponentType;
 };
 
 export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayHostLayerProps) => {
@@ -271,7 +269,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
             pointerEvents='none'
             style={[StyleSheet.absoluteFillObject, backdropStyle]}
           >
-            <OverlayBackground overlayOpacity={backdrop} style={StyleSheet.absoluteFillObject} />
+            <OverlayBackground />
           </Animated.View>
         ) : null}
 

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 
-import { StyleProp, ViewStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 
 import type { Streami18n } from '../../utils/i18n/Streami18n';
@@ -12,10 +11,6 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type Overlay = 'alert' | 'gallery' | 'none';
-export type MessageOverlayBackgroundProps = {
-  overlayOpacity: SharedValue<number>;
-  style?: StyleProp<ViewStyle>;
-};
 
 export type OverlayContextValue = {
   overlay: Overlay;
@@ -33,9 +28,8 @@ export type OverlayProviderProps = ImageGalleryProviderProps & {
   i18nInstance?: Streami18n;
   /**
    * Custom backdrop component rendered behind overlay content in `MessageOverlayHostLayer`.
-   * Receives a shared opacity value that should be used for its visibility animation.
    */
-  MessageOverlayBackground?: React.ComponentType<MessageOverlayBackgroundProps>;
+  MessageOverlayBackground?: React.ComponentType;
   value?: Partial<OverlayContextValue>;
 };