Merge pull request #151 from sendbird/fix/typing-bubble-android

fix(CLNP-1459): not scrolled to bottom on android when typing bubble is rendered
sendbird · Nov 22, 2023 · 1c51127 · 1c51127
2 parents 8c67c31 + a866422
commit 1c51127
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx b/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
 import {
@@ -302,12 +302,21 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
 
 export const GroupChannelTypingIndicatorBubble = () => {
   const { sbOptions } = useSendbirdChat();
+  const { publish } = useContext(GroupChannelContexts.PubSub);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
 
-  if (typingUsers.length === 0) return null;
-  if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return null;
-  if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Bubble)) return null;
+  const shouldRenderBubble = useIIFE(() => {
+    if (typingUsers.length === 0) return false;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return false;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Bubble)) return false;
+    return true;
+  });
+
+  useEffect(() => {
+    if (shouldRenderBubble) publish({ type: 'TYPING_BUBBLE_RENDERED' });
+  }, [shouldRenderBubble]);
 
+  if (!shouldRenderBubble) return null;
   return (
     <Box paddingHorizontal={16} marginTop={4} marginBottom={16}>
       <TypingIndicatorBubble typingUsers={typingUsers} />

diff --git a/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx b/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx
@@ -73,6 +73,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   useEffect(() => {
     return subscribe(({ type }) => {
       switch (type) {
+        case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
           if (!props.scrolledAwayFromBottom) {
             scrollToBottom(true);

diff --git a/packages/uikit-react-native/src/domain/groupChannel/types.ts b/packages/uikit-react-native/src/domain/groupChannel/types.ts
@@ -183,4 +183,8 @@ export type GroupChannelPubSubContextPayload =
       data: {
         messages: SendbirdMessage[];
       };
+    }
+  | {
+      type: 'TYPING_BUBBLE_RENDERED';
+      data?: undefined;
     };