feat: fix variety bugs and introduce actual action/reaction ui

isekovanic · isekovanic · commit de5a167a4f69 · 2025-12-22T19:50:29.000+01:00
diff --git a/examples/SampleApp/App.tsx b/examples/SampleApp/App.tsx
@@ -94,6 +94,7 @@ notifee.onBackgroundEvent(async ({ detail, type }) => {
 const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createNativeStackNavigator<UserSelectorParamList>();
+
 const App = () => {
   const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
   const [messageListImplementation, setMessageListImplementation] = useState<
@@ -107,6 +108,7 @@ const App = () => {
   >(undefined);
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
+  const streami18n = new Streami18n();
 
   useEffect(() => {
     const messaging = getMessaging();
@@ -209,39 +211,41 @@ const App = () => {
         backgroundColor: streamChatTheme.colors?.white_snow || '#FCFCFC',
       }}
     >
-      <ThemeProvider style={streamChatTheme}>
-        <NavigationContainer
-          ref={RootNavigationRef}
-          theme={{
-            colors: {
-              ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
-              background: streamChatTheme.colors?.white_snow || '#FCFCFC',
-            },
-            fonts: (colorScheme === 'dark' ? DarkTheme : DefaultTheme).fonts,
-            dark: colorScheme === 'dark',
-          }}
-        >
-          <AppContext.Provider
-            value={{
-              chatClient,
-              loginUser,
-              logout,
-              switchUser,
-              messageListImplementation,
-              messageListMode,
-              messageListPruning,
+      <OverlayProvider value={{ style: streamChatTheme }} i18nInstance={streami18n}>
+        <ThemeProvider style={streamChatTheme}>
+          <NavigationContainer
+            ref={RootNavigationRef}
+            theme={{
+              colors: {
+                ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
+                background: streamChatTheme.colors?.white_snow || '#FCFCFC',
+              },
+              fonts: (colorScheme === 'dark' ? DarkTheme : DefaultTheme).fonts,
+              dark: colorScheme === 'dark',
             }}
           >
-            {isConnecting && !chatClient ? (
-              <LoadingScreen />
-            ) : chatClient ? (
-              <DrawerNavigatorWrapper chatClient={chatClient} />
-            ) : (
-              <UserSelector />
-            )}
-          </AppContext.Provider>
-        </NavigationContainer>
-      </ThemeProvider>
+            <AppContext.Provider
+              value={{
+                chatClient,
+                loginUser,
+                logout,
+                switchUser,
+                messageListImplementation,
+                messageListMode,
+                messageListPruning,
+              }}
+            >
+              {isConnecting && !chatClient ? (
+                <LoadingScreen />
+              ) : chatClient ? (
+                <DrawerNavigatorWrapper chatClient={chatClient} i18nInstance={streami18n} />
+              ) : (
+                <UserSelector />
+              )}
+            </AppContext.Provider>
+          </NavigationContainer>
+        </ThemeProvider>
+      </OverlayProvider>
     </SafeAreaProvider>
   );
 };
@@ -265,31 +269,27 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message.ai_generated;
 
 const DrawerNavigatorWrapper: React.FC<{
   chatClient: StreamChat;
-}> = ({ chatClient }) => {
-  const streamChatTheme = useStreamChatTheme();
-  const streami18n = new Streami18n();
-
+  i18nInstance: Streami18n;
+}> = ({ chatClient, i18nInstance }) => {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <OverlayProvider value={{ style: streamChatTheme }} i18nInstance={streami18n}>
-        <Chat
-          client={chatClient}
-          enableOfflineSupport
-          // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
-          ImageComponent={FastImage}
-          isMessageAIGenerated={isMessageAIGenerated}
-          i18nInstance={streami18n}
-        >
-          <StreamChatProvider>
-            <AppOverlayProvider>
-              <UserSearchProvider>
-                <DrawerNavigator />
-                <Toast />
-              </UserSearchProvider>
-            </AppOverlayProvider>
-          </StreamChatProvider>
-        </Chat>
-      </OverlayProvider>
+      <Chat
+        client={chatClient}
+        enableOfflineSupport
+        // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
+        ImageComponent={FastImage}
+        isMessageAIGenerated={isMessageAIGenerated}
+        i18nInstance={i18nInstance}
+      >
+        <StreamChatProvider>
+          <AppOverlayProvider>
+            <UserSearchProvider>
+              <DrawerNavigator />
+              <Toast />
+            </UserSearchProvider>
+          </AppOverlayProvider>
+        </StreamChatProvider>
+      </Chat>
     </GestureHandlerRootView>
   );
 };
diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -1,10 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Alert,
   findNodeHandle,
   GestureResponderEvent,
   Keyboard,
-  Pressable,
   StyleProp,
   UIManager,
   View,
@@ -75,14 +73,15 @@ export type TouchableEmitter =
 
 export type TextMentionTouchableHandlerAdditionalInfo = { user?: UserResponse };
 
-function measureInWindow(node: any): Promise<{ x: number; y: number; w: number; h: number }> {
+// TODO: Take care of forwards compatibility with new measuring API (0.81+)
+const measureInWindow = (node: any): Promise<{ x: number; y: number; w: number; h: number }> => {
   return new Promise((resolve, reject) => {
     const handle = findNodeHandle(node);
     if (!handle) return reject(new Error('No native handle'));
 
     UIManager.measureInWindow(handle, (x, y, w, h) => resolve({ h, w, x, y }));
   });
-}
+};
 
 export type TextMentionTouchableHandlerPayload = {
   emitter: 'textMention';
@@ -216,6 +215,13 @@ export type MessagePropsWithContext = Pick<
     | 'supportedReactions'
     | 'updateMessage'
     | 'PollContent'
+    // TODO: remove this comment later, using it as a pragma mark
+    | 'MessageUserReactions'
+    | 'MessageUserReactionsAvatar'
+    | 'MessageUserReactionsItem'
+    | 'MessageReactionPicker'
+    | 'MessageActionList'
+    | 'MessageActionListItem'
   > &
   Pick<ThreadContextValue, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
@@ -243,12 +249,6 @@ export type MessagePropsWithContext = Pick<
  * each individual Message component.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
-  // const [messageOverlayVisible, setMessageOverlayVisible] = useState<{
-  //   x: number;
-  //   y: number;
-  //   w: number;
-  //   h: number;
-  // } | null>(null);
   const [isErrorInMessage, setIsErrorInMessage] = useState(false);
   const [showMessageReactions, setShowMessageReactions] = useState(true);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
@@ -288,7 +288,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     MessageBlocked,
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
-    MessageMenu,
     messagesContext,
     MessageSimple,
     onLongPressMessage: onLongPressMessageProp,
@@ -312,6 +311,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     updateMessage,
     readBy,
     setQuotedMessage,
+    // MessageUserReactions,
+    // MessageUserReactionsAvatar,
+    // MessageUserReactionsItem,
+    MessageReactionPicker,
+    MessageActionList,
+    MessageActionListItem,
   } = props;
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
@@ -792,8 +797,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     return <MessageBlocked message={message} />;
   }
 
-  console.log('ACTIVE: ', active);
-
   return (
     <MessageProvider value={messageContext}>
       <View
@@ -817,7 +820,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           ]}
           testID='message-wrapper'
         >
-          {active && state ? (
+          {active && state?.rect ? (
             <View
               style={{
                 height: state.rect.h,
@@ -827,34 +830,40 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           ) : null}
           <Portal hostName={active && !closing ? 'top-item' : undefined}>
             {active && !closing ? (
-              <Pressable
+              <View
                 onLayout={(e) => {
                   const { x, y, width: w, height: h } = e.nativeEvent.layout;
                   topH.value = { h, w, x, y };
                 }}
-                onPress={() => Alert.alert('HIT TOP')}
               >
-                <ReactionList />
-              </Pressable>
+                <MessageReactionPicker
+                  dismissOverlay={dismissOverlay}
+                  handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
+                  ownReactionTypes={message?.own_reactions?.map((reaction) => reaction.type) || []}
+                />
+              </View>
             ) : null}
           </Portal>
           <Portal
             hostName={active ? 'message-overlay' : undefined}
-            style={active && state ? { width: state.rect.w } : undefined}
+            style={active && state?.rect ? { width: state.rect.w } : undefined}
           >
             <MessageSimple ref={messageWrapperRef} />
           </Portal>
           <Portal hostName={active && !closing ? 'bottom-item' : undefined}>
             {active && !closing ? (
-              <Pressable
+              <View
                 onLayout={(e) => {
                   const { x, y, width: w, height: h } = e.nativeEvent.layout;
                   bottomH.value = { h, w, x, y };
                 }}
-                onPress={() => Alert.alert('HIT BOTTOM')}
               >
-                <MessageActions />
-              </Pressable>
+                <MessageActionList
+                  dismissOverlay={dismissOverlay}
+                  MessageActionListItem={MessageActionListItem}
+                  messageActions={messageActions}
+                />
+              </View>
             ) : null}
           </Portal>
           {isBounceDialogOpen ? (
@@ -1084,8 +1093,3 @@ export const Message = (props: MessageProps) => {
     />
   );
 };
-
-const ReactionList = () => <View style={{ backgroundColor: 'blue', height: 30, width: 150 }} />;
-const MessageActions = () => (
-  <View style={{ backgroundColor: 'purple', height: 200, width: 150 }} />
-);
diff --git a/package/src/components/Message/MessageSimple/MessageSimple.tsx b/package/src/components/Message/MessageSimple/MessageSimple.tsx
@@ -3,6 +3,7 @@ import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
 
+import { updateOverlayState } from '../../../contexts';
 import {
   MessageContextValue,
   useMessageContext,
diff --git a/package/src/components/MessageMenu/MessageActionList.tsx b/package/src/components/MessageMenu/MessageActionList.tsx
@@ -24,6 +24,7 @@ export const MessageActionList = (props: MessageActionListProps) => {
   const { MessageActionListItem, messageActions } = props;
   const {
     theme: {
+      colors: { white },
       messageMenu: {
         actionList: { container, contentContainer },
       },
@@ -37,8 +38,12 @@ export const MessageActionList = (props: MessageActionListProps) => {
   return (
     <ScrollView
       accessibilityLabel='Message action list'
-      contentContainerStyle={[styles.contentContainer, contentContainer]}
-      style={[styles.container, container]}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { backgroundColor: white },
+        contentContainer,
+      ]}
+      style={[styles.container, { backgroundColor: white }, container]}
     >
       {messageActions?.map((messageAction, index) => (
         <MessageActionListItem
@@ -51,8 +56,10 @@ export const MessageActionList = (props: MessageActionListProps) => {
 };
 
 const styles = StyleSheet.create({
-  container: {},
+  // TODO: Preliminary height fix, think about this more thoroughly
+  container: { marginTop: 16, maxHeight: 200 },
   contentContainer: {
+    flexGrow: 1,
     paddingHorizontal: 16,
   },
 });
diff --git a/package/src/components/MessageMenu/MessageActionListItem.tsx b/package/src/components/MessageMenu/MessageActionListItem.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { Pressable, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
+import { closeOverlay, scheduleActionOnClose } from '../../contexts';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useStableCallback } from '../../hooks';
 
 export type ActionType =
   | 'banUser'
@@ -62,8 +64,13 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
     },
   } = useTheme();
 
+  const onActionPress = useStableCallback(() => {
+    closeOverlay();
+    scheduleActionOnClose(() => action());
+  });
+
   return (
-    <Pressable onPress={action} style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }]}>
+    <Pressable onPress={onActionPress} style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }]}>
       <View
         accessibilityLabel={`${actionType} action list item`}
         style={[styles.container, container]}
diff --git a/package/src/components/MessageMenu/MessageReactionPicker.tsx b/package/src/components/MessageMenu/MessageReactionPicker.tsx
@@ -3,6 +3,7 @@ import { FlatList, StyleSheet, View } from 'react-native';
 
 import { ReactionButton } from './ReactionButton';
 
+import { scheduleActionOnClose } from '../../contexts';
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import {
   MessagesContextValue,
@@ -62,10 +63,10 @@ export const MessageReactionPicker = (props: MessageReactionPickerProps) => {
 
   const onSelectReaction = (type: string) => {
     NativeHandlers.triggerHaptic('impactLight');
+    dismissOverlay();
     if (handleReaction) {
-      handleReaction(type);
+      scheduleActionOnClose(() => handleReaction(type));
     }
-    dismissOverlay();
   };
 
   if (!own_capabilities.sendReaction) {
diff --git a/package/src/contexts/overlayContext/OverlayProvider.tsx b/package/src/contexts/overlayContext/OverlayProvider.tsx
