feat: introduce custom overlay background component

Author: isekovanic

examples/SampleApp/App.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { DevSettings, LogBox, Platform, useColorScheme } from 'react-native';
+import { DevSettings, LogBox, Platform, StyleSheet, useColorScheme, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { BlurView } from '@react-native-community/blur';
 import {
   Chat,
   createTextComposerEmojiMiddleware,
@@ -14,7 +15,9 @@ import {
   Streami18n,
   ThemeProvider,
   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';
@@ -96,6 +99,35 @@ const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
 
+const MessageOverlayBlurBackground = ({ style }: MessageOverlayBackgroundProps) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const scheme = useColorScheme();
+  const isDark = scheme === 'dark';
+  const isIOS = Platform.OS === 'ios';
+
+  return (
+    <>
+      <BlurView
+        blurAmount={isIOS ? 10 : 6}
+        blurType={isDark ? 'dark' : 'light'}
+        blurRadius={isIOS ? undefined : 6}
+        downsampleFactor={isIOS ? undefined : 12}
+        pointerEvents='none'
+        reducedTransparencyFallbackColor='rgba(0, 0, 0, 0.8)'
+        style={[styles.messageOverlayBlurBackground, style]}
+      />
+      <View
+        style={[
+          styles.messageOverlayBlurBackground,
+          { backgroundColor: semantics.backgroundCoreScrim },
+        ]}
+      />
+    </>
+  );
+};
+
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
   const [messageListImplementation, setMessageListImplementation] = useState<
@@ -198,7 +230,7 @@ const App = () => {
         },
         linkPreviews: {
           enabled: true,
-        }
+        },
       });
 
       setupCommandUIMiddlewares(composer);
@@ -226,7 +258,11 @@ const App = () => {
       }}
     >
       <GestureHandlerRootView style={{ flex: 1 }}>
-        <OverlayProvider value={{ style: streamChatTheme }} i18nInstance={streami18n}>
+        <OverlayProvider
+          MessageOverlayBackground={MessageOverlayBlurBackground}
+          value={{ style: streamChatTheme }}
+          i18nInstance={streami18n}
+        >
           <ThemeProvider style={streamChatTheme}>
             <NavigationContainer
               ref={RootNavigationRef}
@@ -416,3 +452,9 @@ const HomeScreen = () => {
 };
 
 export default App;
+
+const styles = StyleSheet.create({
+  messageOverlayBlurBackground: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});

examples/SampleApp/package.json

@@ -35,6 +35,7 @@
     "@react-native-clipboard/clipboard": "^1.16.3",
     "@react-native-community/geolocation": "^3.4.0",
     "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-community/blur": "^4.4.1",
     "@react-native-documents/picker": "^10.1.3",
     "@react-native-firebase/app": "22.2.1",
     "@react-native-firebase/messaging": "22.2.1",

examples/SampleApp/yarn.lock

@@ -2199,6 +2199,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.16.3.tgz#7807a90fd9984bf4d3a96faf2eee20457984a9bd"
   integrity sha512-cMIcvoZKIrShzJHEaHbTAp458R9WOv0fB6UyC7Ek4Qk561Ow/DrzmmJmH/rAZg21Z6ixJ4YSdFDC14crqIBmCQ==
 
+"@react-native-community/blur@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.4.1.tgz#72cbc0be5a84022c33091683ec6888925ebcca6e"
+  integrity sha512-XBSsRiYxE/MOEln2ayunShfJtWztHwUxLFcSL20o+HNNRnuUDv+GXkF6FmM2zE8ZUfrnhQ/zeTqvnuDPGw6O8A==
+
 "@react-native-community/cli-clean@19.1.2":
   version "19.1.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-19.1.2.tgz#10be56a6ab966c141090176e54937cb7b7618a9b"

package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx

@@ -10,16 +10,14 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Pin } from '../../../../icons/Pin';
 import { primitives } from '../../../../theme';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 export type MessagePinnedHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
 
 export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
   const { message: propMessage } = props;
   const { message: contextMessage } = useMessageContext();
   const message = propMessage || contextMessage;
-  const {
-    theme: { semantics },
-  } = useTheme();
   const styles = useStyles();
   const { t } = useTranslationContext();
   const { client } = useChatContext();
@@ -30,7 +28,7 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
 
   return (
     <View accessibilityLabel='Message Pinned Header' style={styles.container}>
-      <Pin height={16} width={16} stroke={semantics.textPrimary} />
+      <Pin height={16} width={16} stroke={styles.label.color} />
       <Text style={styles.label}>
         {t('Pinned by')}{' '}
         {message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
@@ -48,6 +46,7 @@ const useStyles = () => {
       },
     },
   } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
 
   return useMemo(() => {
     return StyleSheet.create({
@@ -59,12 +58,12 @@ const useStyles = () => {
         ...container,
       },
       label: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...label,
       },
     });
-  }, [semantics, container, label]);
+  }, [shouldUseOverlayStyles, semantics, container, label]);
 };

package/src/components/Message/MessageSimple/Headers/MessageReminderHeader.tsx

@@ -11,6 +11,7 @@ import { useMessageReminder } from '../../../../hooks/useMessageReminder';
 import { useStateStore } from '../../../../hooks/useStateStore';
 import { Bell } from '../../../../icons';
 import { primitives } from '../../../../theme';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 const reminderStateSelector = (state: ReminderState) => ({
   timeLeftMs: state.timeLeftMs,
@@ -23,15 +24,12 @@ type MessageReminderHeaderPropsWithContext = {
 
 const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithContext) => {
   const { timeLeftMs, isReminderTimeLeft } = props;
-  const {
-    theme: { semantics },
-  } = useTheme();
   const { t } = useTranslationContext();
   const styles = useStyles();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <Bell height={16} width={16} stroke={semantics.textPrimary} />
+      <Bell height={16} width={16} stroke={styles.time.color} />
       <Text style={styles.label}>
         {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
       </Text>
@@ -72,6 +70,7 @@ const useStyles = () => {
       },
     },
   } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
 
   return useMemo(() => {
     return StyleSheet.create({
@@ -83,26 +82,26 @@ const useStyles = () => {
         ...container,
       },
       label: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...label,
       },
       dot: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
         ...dot,
       },
       time: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
         ...time,
       },
     });
-  }, [container, semantics, label, dot, time]);
+  }, [shouldUseOverlayStyles, container, semantics, label, dot, time]);
 };

package/src/components/Message/MessageSimple/Headers/MessageSavedForLaterHeader.tsx

@@ -6,19 +6,17 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Bookmark } from '../../../../icons/Bookmark';
 import { primitives } from '../../../../theme';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 export type MessageSavedForLaterHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
 
 export const MessageSavedForLaterHeader = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
   const styles = useStyles();
   const { t } = useTranslationContext();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <Bookmark height={16} width={16} stroke={semantics.accentPrimary} />
+      <Bookmark height={16} width={16} stroke={styles.label.color} />
       <Text style={styles.label}>{t('Saved For Later')}</Text>
     </View>
   );
@@ -33,6 +31,7 @@ const useStyles = () => {
       },
     },
   } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
 
   return useMemo(() => {
     return StyleSheet.create({
@@ -44,12 +43,12 @@ const useStyles = () => {
         ...container,
       },
       label: {
-        color: semantics.accentPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...label,
       },
     });
-  }, [semantics, container, label]);
+  }, [shouldUseOverlayStyles, semantics, container, label]);
 };

package/src/components/Message/MessageSimple/Headers/SentToChannelHeader.tsx

@@ -15,6 +15,7 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T
 import { useStableCallback } from '../../../../hooks';
 import { ArrowUpRight } from '../../../../icons/ArrowUpRight';
 import { primitives } from '../../../../theme';
+import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 type SentToChannelHeaderPropsWithContext = Pick<ChannelContextValue, 'threadList'> & {
   /**
@@ -31,15 +32,12 @@ type SentToChannelHeaderPropsWithContext = Pick<ChannelContextValue, 'threadList
 
 const SentToChannelHeaderWithContext = (props: SentToChannelHeaderPropsWithContext) => {
   const { threadList, onPress, showViewText } = props;
-  const {
-    theme: { semantics },
-  } = useTheme();
   const { t } = useTranslationContext();
   const styles = useStyles();
 
   return (
     <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
-      <ArrowUpRight height={16} width={16} stroke={semantics.textPrimary} />
+      <ArrowUpRight height={16} width={16} stroke={styles.link.color} />
       <Text style={styles.label}>
         {threadList ? t('Also sent in channel') : t('Replied to a thread')}
       </Text>
@@ -118,6 +116,7 @@ const useStyles = () => {
       },
     },
   } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
 
   return useMemo(() => {
     return StyleSheet.create({
@@ -129,26 +128,28 @@ const useStyles = () => {
         ...container,
       },
       label: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...label,
       },
       dot: {
-        color: semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
         ...dot,
       },
       link: {
-        color: semantics.accentPrimary,
+        color: shouldUseOverlayStyles
+          ? semantics.buttonPrimaryTextOnAccent
+          : semantics.accentPrimary,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
         ...link,
       },
     });
-  }, [container, semantics, label, dot, link]);
+  }, [shouldUseOverlayStyles, container, semantics, label, dot, link]);
 };

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -21,6 +21,7 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 
 import { primitives } from '../../../theme';
 import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
+import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 type MessageFooterComponentProps = {
   date?: string | Date;
@@ -196,6 +197,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const shouldUseOverlayStyles = useShouldUseOverlayStyles();
   return useMemo(() => {
     return StyleSheet.create({
       container: {
@@ -206,17 +208,22 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       name: {
-        color: semantics.chatTextUsername,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
       },
       editedText: {
-        color: semantics.chatTextTimestamp,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
       },
     });
-  }, [semantics]);
+  }, [
+    shouldUseOverlayStyles,
+    semantics.chatTextTimestamp,
+    semantics.chatTextUsername,
+    semantics.textOnAccent,
+  ]);
 };