Skip to content

Commit

Permalink
fix: if the bubble renders and the scroll reaches the bottom, it shou…
Browse files Browse the repository at this point in the history
…ld scroll to bottom on android
  • Loading branch information
bang9 committed Nov 22, 2023
1 parent 8c67c31 commit a866422
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions packages/uikit-react-native/src/domain/groupChannel/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -183,4 +183,8 @@ export type GroupChannelPubSubContextPayload =
data: {
messages: SendbirdMessage[];
};
}
| {
type: 'TYPING_BUBBLE_RENDERED';
data?: undefined;
};

0 comments on commit a866422

Please sign in to comment.