feat: add optional blur view in the ctx menu

Author: isekovanic

examples/SampleApp/App.tsx

@@ -63,6 +63,7 @@ import { useClientNotificationsToastHandler } from './src/hooks/useClientNotific
 import AsyncStore from './src/utils/AsyncStore.ts';
 import {
   MessageInputFloatingConfigItem,
+  MessageOverlayBackdropConfigItem,
   MessageListImplementationConfigItem,
   MessageListModeConfigItem,
   MessageListPruningConfigItem,
@@ -141,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();
@@ -200,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'],
       );
@@ -210,6 +218,9 @@ const App = () => {
       setMessageInputFloating(
         messageInputFloatingStoredValue?.value as MessageInputFloatingConfigItem['value'],
       );
+      setMessageOverlayBackdrop(
+        messageOverlayBackdropStoredValue?.value as MessageOverlayBackdropConfigItem['value'],
+      );
     };
     getMessageListConfig();
     return () => {
@@ -258,7 +269,9 @@ const App = () => {
     >
       <GestureHandlerRootView style={{ flex: 1 }}>
         <OverlayProvider
-          MessageOverlayBackground={MessageOverlayBlurBackground}
+          MessageOverlayBackground={
+            messageOverlayBackdrop === 'blurview' ? MessageOverlayBlurBackground : undefined
+          }
           value={{ style: streamChatTheme }}
           i18nInstance={streami18n}
         >

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>