feat: custom context menu background (#3460)

## 🎯 Goal

This PR introduces an optional background component that can be used as
a backdrop for the message context menu. This can be used to introduce
something like a `BlurView` for example to mimic `iOS` contextual menus
a bit better.

It also resolves some issues around teleported text specifically in
terms of colors.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

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,6 +15,7 @@ import {
   Streami18n,
   ThemeProvider,
   useOverlayContext,
+  useTheme,
 } from 'stream-chat-react-native';
 
 import { getMessaging } from '@react-native-firebase/messaging';
@@ -61,6 +63,7 @@ import { useClientNotificationsToastHandler } from './src/hooks/useClientNotific
 import AsyncStore from './src/utils/AsyncStore.ts';
 import {
   MessageInputFloatingConfigItem,
+  MessageOverlayBackdropConfigItem,
   MessageListImplementationConfigItem,
   MessageListModeConfigItem,
   MessageListPruningConfigItem,
@@ -96,6 +99,35 @@ const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
 
+const MessageOverlayBlurBackground = () => {
+  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}
+      />
+      <View
+        style={[
+          styles.messageOverlayBlurBackground,
+          { backgroundColor: semantics.backgroundCoreScrim },
+        ]}
+      />
+    </>
+  );
+};
+
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
   const [messageListImplementation, setMessageListImplementation] = useState<
@@ -110,6 +142,9 @@ const App = () => {
   const [messageInputFloating, setMessageInputFloating] = useState<
     MessageInputFloatingConfigItem['value'] | undefined
   >(undefined);
+  const [messageOverlayBackdrop, setMessageOverlayBackdrop] = useState<
+    MessageOverlayBackdropConfigItem['value'] | undefined
+  >(undefined);
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
   const streami18n = new Streami18n();
@@ -169,6 +204,10 @@ const App = () => {
         '@stream-rn-sampleapp-messageinput-floating',
         { value: false },
       );
+      const messageOverlayBackdropStoredValue = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-message-overlay-backdrop',
+        { value: 'default' },
+      );
       setMessageListImplementation(
         messageListImplementationStoredValue?.id as MessageListImplementationConfigItem['id'],
       );
@@ -179,6 +218,9 @@ const App = () => {
       setMessageInputFloating(
         messageInputFloatingStoredValue?.value as MessageInputFloatingConfigItem['value'],
       );
+      setMessageOverlayBackdrop(
+        messageOverlayBackdropStoredValue?.value as MessageOverlayBackdropConfigItem['value'],
+      );
     };
     getMessageListConfig();
     return () => {
@@ -198,7 +240,7 @@ const App = () => {
         },
         linkPreviews: {
           enabled: true,
-        }
+        },
       });
 
       setupCommandUIMiddlewares(composer);
@@ -226,7 +268,13 @@ const App = () => {
       }}
     >
       <GestureHandlerRootView style={{ flex: 1 }}>
-        <OverlayProvider value={{ style: streamChatTheme }} i18nInstance={streami18n}>
+        <OverlayProvider
+          MessageOverlayBackground={
+            messageOverlayBackdrop === 'blurview' ? MessageOverlayBlurBackground : undefined
+          }
+          value={{ style: streamChatTheme }}
+          i18nInstance={streami18n}
+        >
           <ThemeProvider style={streamChatTheme}>
             <NavigationContainer
               ref={RootNavigationRef}
@@ -416,3 +464,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/src/components/ScreenHeader.tsx

@@ -64,16 +64,18 @@ export const BackButton: React.FC<{
   return (
     <TouchableOpacity
       onPress={() => {
+        if (onBack) {
+          onBack();
+          return;
+        }
+
         if (!navigation.canGoBack()) {
           // if no previous screen was present in history, go to the list screen
           // this can happen when opened through push notification
           navigation.reset({ index: 0, routes: [{ name: 'HomeScreen' }] });
         } else {
           navigation.goBack();
         }
-        if (onBack) {
-          onBack();
-        }
       }}
       style={styles.backButton}
     >

examples/SampleApp/src/components/SecretMenu.tsx

@@ -29,6 +29,10 @@ export type MessageListImplementationConfigItem = { label: string; id: 'flatlist
 export type MessageListModeConfigItem = { label: string; mode: 'default' | 'livestream' };
 export type MessageListPruningConfigItem = { label: string; value: 100 | 500 | 1000 | undefined };
 export type MessageInputFloatingConfigItem = { label: string; value: boolean };
+export type MessageOverlayBackdropConfigItem = {
+  label: string;
+  value: 'default' | 'blurview';
+};
 
 const messageListImplementationConfigItems: MessageListImplementationConfigItem[] = [
   { label: 'FlatList', id: 'flatlist' },
@@ -52,6 +56,11 @@ const messageInputFloatingConfigItems: MessageInputFloatingConfigItem[] = [
   { label: 'Floating', value: true },
 ];
 
+const messageOverlayBackdropConfigItems: MessageOverlayBackdropConfigItem[] = [
+  { label: 'Default', value: 'default' },
+  { label: 'BlurView', value: 'blurview' },
+];
+
 export const SlideInView = ({
   visible,
   children,
@@ -220,6 +229,23 @@ const SecretMenuMessageListPruningConfigItem = ({
   </TouchableOpacity>
 );
 
+const SecretMenuMessageOverlayBackdropConfigItem = ({
+  isSelected,
+  messageOverlayBackdropConfigItem,
+  storeMessageOverlayBackdrop,
+}: {
+  isSelected: boolean;
+  messageOverlayBackdropConfigItem: MessageOverlayBackdropConfigItem;
+  storeMessageOverlayBackdrop: (item: MessageOverlayBackdropConfigItem) => void;
+}) => (
+  <TouchableOpacity
+    style={[styles.notificationItemContainer, { borderColor: isSelected ? 'green' : 'gray' }]}
+    onPress={() => storeMessageOverlayBackdrop(messageOverlayBackdropConfigItem)}
+  >
+    <Text style={styles.notificationItem}>{messageOverlayBackdropConfigItem.label}</Text>
+  </TouchableOpacity>
+);
+
 /*
  * TODO: Please rewrite this entire component.
  */
@@ -245,6 +271,9 @@ export const SecretMenu = ({
   >(null);
   const [selectedMessageInputFloating, setSelectedMessageInputFloating] =
     useState<MessageInputFloatingConfigItem['value']>(false);
+  const [selectedMessageOverlayBackdrop, setSelectedMessageOverlayBackdrop] = useState<
+    MessageOverlayBackdropConfigItem['value'] | null
+  >(null);
   const {
     theme: {
       colors: { black, grey },
@@ -281,6 +310,10 @@ export const SecretMenu = ({
         '@stream-rn-sampleapp-messageinput-floating',
         messageInputFloatingConfigItems[0],
       );
+      const messageOverlayBackdrop = await AsyncStore.getItem(
+        '@stream-rn-sampleapp-message-overlay-backdrop',
+        messageOverlayBackdropConfigItems[0],
+      );
       setSelectedProvider(notificationProvider?.id ?? notificationConfigItems[0].id);
       setSelectedMessageListImplementation(
         messageListImplementation?.id ?? messageListImplementationConfigItems[0].id,
@@ -290,6 +323,9 @@ export const SecretMenu = ({
       setSelectedMessageInputFloating(
         messageInputFloating?.value ?? messageInputFloatingConfigItems[0].value,
       );
+      setSelectedMessageOverlayBackdrop(
+        messageOverlayBackdrop?.value ?? messageOverlayBackdropConfigItems[0].value,
+      );
     };
     getSelectedConfig();
   }, [notificationConfigItems]);
@@ -322,6 +358,14 @@ export const SecretMenu = ({
     setSelectedMessageInputFloating(item.value);
   }, []);
 
+  const storeMessageOverlayBackdrop = useCallback(
+    async (item: MessageOverlayBackdropConfigItem) => {
+      await AsyncStore.setItem('@stream-rn-sampleapp-message-overlay-backdrop', item);
+      setSelectedMessageOverlayBackdrop(item.value);
+    },
+    [],
+  );
+
   const removeAllDevices = useCallback(async () => {
     const { devices } = await chatClient.getDevices(chatClient.userID);
     for (const device of devices ?? []) {
@@ -390,6 +434,22 @@ export const SecretMenu = ({
             </View>
           </View>
         </View>
+        <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
+          <Folder height={20} pathFill={grey} width={20} />
+          <View>
+            <Text style={[menuDrawerStyles.menuTitle]}>Message Overlay Backdrop</Text>
+            <View style={{ marginLeft: 16 }}>
+              {messageOverlayBackdropConfigItems.map((item) => (
+                <SecretMenuMessageOverlayBackdropConfigItem
+                  key={item.value}
+                  isSelected={item.value === selectedMessageOverlayBackdrop}
+                  messageOverlayBackdropConfigItem={item}
+                  storeMessageOverlayBackdrop={storeMessageOverlayBackdrop}
+                />
+              ))}
+            </View>
+          </View>
+        </View>
         <View style={[menuDrawerStyles.menuItem, { alignItems: 'flex-start' }]}>
           <Edit height={20} pathFill={grey} width={20} />
           <View>

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]);
 };