@sendbird/uikit-react-native 2.4.2 → 2.5.0-rc.1

package/src/components/ChannelMessageList/index.tsx

@@ -0,0 +1,392 @@
+import React, { Ref } from 'react';
+import { FlatList, FlatListProps, ListRenderItem, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  BottomSheetItem,
+  ChannelFrozenBanner,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  Logger,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdOpenChannel,
+  SendbirdUserMessage,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  messageKeyExtractor,
+  shouldRenderReaction,
+  toMegabyte,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
+
+import { DEPRECATION_WARNING } from '../../constants';
+import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import type { CommonComponent } from '../../types';
+import ChatFlatList from '../ChatFlatList';
+import { ReactionAddons } from '../ReactionAddons';
+
+type PressActions = { onPress?: () => void; onLongPress?: () => void };
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
+  enableMessageGrouping: boolean;
+  currentUserId?: string;
+  channel: T;
+  messages: SendbirdMessage[];
+  newMessages: SendbirdMessage[];
+  searchItem?: { startingPoint: number };
+
+  scrolledAwayFromBottom: boolean;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+  onTopReached: () => void;
+  onBottomReached: () => void;
+  hasNext: () => boolean;
+
+  onPressNewMessagesButton: (animated?: boolean) => void;
+  onPressScrollToBottomButton: (animated?: boolean) => void;
+
+  onEditMessage: (message: HandleableMessage) => void;
+  onDeleteMessage: (message: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+
+  renderMessage: (props: {
+    focused: boolean;
+    message: SendbirdMessage;
+    prevMessage?: SendbirdMessage;
+    nextMessage?: SendbirdMessage;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onPressAvatar?: UserProfileContextType['show'];
+    channel: T;
+    currentUserId?: ChannelMessageListProps<T>['currentUserId'];
+    enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+  }) => React.ReactElement | null;
+  renderNewMessagesButton: null | CommonComponent<{
+    visible: boolean;
+    onPress: () => void;
+    newMessages: SendbirdMessage[];
+  }>;
+  renderScrollToBottomButton: null | CommonComponent<{
+    visible: boolean;
+    onPress: () => void;
+  }>;
+  flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+
+  /** @deprecated Please use `onPressMediaMessage` instead **/
+  onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+} & {
+  ref?: Ref<FlatList<SendbirdMessage>> | undefined;
+};
+
+const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel>(
+  {
+    searchItem,
+    hasNext,
+    channel,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressMediaMessage,
+    currentUserId,
+    renderNewMessagesButton,
+    renderScrollToBottomButton,
+    renderMessage,
+    messages,
+    newMessages,
+    enableMessageGrouping,
+    onScrolledAwayFromBottom,
+    scrolledAwayFromBottom,
+    onBottomReached,
+    onTopReached,
+    flatListProps,
+    onPressNewMessagesButton,
+    onPressScrollToBottomButton,
+    onPressImageMessage,
+  }: ChannelMessageListProps<T>,
+  ref: React.ForwardedRef<FlatList<SendbirdMessage>>,
+) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { left, right } = useSafeAreaInsets();
+  const getMessagePressActions = useGetMessagePressActions({
+    channel,
+    currentUserId,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressImageMessage,
+    onPressMediaMessage,
+  });
+
+  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
+
+  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
+    const { onPress, onLongPress } = getMessagePressActions(item);
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index + 1],
+      nextMessage: messages[index - 1],
+      onPress,
+      onLongPress,
+      enableMessageGrouping,
+      channel,
+      currentUserId,
+      focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+    });
+  });
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
+      {channel.isFrozen && (
+        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
+      )}
+      <ChatFlatList
+        {...flatListProps}
+        onTopReached={onTopReached}
+        onBottomReached={onBottomReached}
+        onScrolledAwayFromBottom={onScrolledAwayFromBottom}
+        ref={ref}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={messageKeyExtractor}
+        contentContainerStyle={[
+          // { minHeight: '100%', justifyContent: 'flex-end' },
+          channel.isFrozen && styles.frozenListPadding,
+          flatListProps?.contentContainerStyle,
+        ]}
+      />
+      {renderNewMessagesButton && (
+        <View style={[styles.newMsgButton, safeAreaLayout]}>
+          {renderNewMessagesButton({
+            visible: newMessages.length > 0 && (hasNext() || scrolledAwayFromBottom),
+            onPress: () => onPressNewMessagesButton(),
+            newMessages,
+          })}
+        </View>
+      )}
+      {renderScrollToBottomButton && (
+        <View style={[styles.scrollButton, safeAreaLayout]}>
+          {renderScrollToBottomButton({
+            visible: hasNext() || scrolledAwayFromBottom,
+            onPress: () => onPressScrollToBottomButton(),
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+  channel,
+  currentUserId,
+  onResendFailedMessage,
+  onEditMessage,
+  onDeleteMessage,
+  onPressImageMessage,
+  onPressMediaMessage,
+}: Pick<
+  ChannelMessageListProps<T>,
+  | 'channel'
+  | 'currentUserId'
+  | 'onEditMessage'
+  | 'onDeleteMessage'
+  | 'onResendFailedMessage'
+  | 'onPressImageMessage'
+  | 'onPressMediaMessage'
+>) => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { features } = useSendbirdChat();
+
+  const handleFailedMessage = (message: HandleableMessage) => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
+          onPress: () => {
+            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+          },
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
+          titleColor: colors.ui.dialog.default.none.destructive,
+          onPress: () => confirmDelete(message),
+        },
+      ],
+    });
+  };
+  const confirmDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
+        },
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => {
+            onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'));
+          },
+        },
+      ],
+    });
+  };
+
+  return (msg: SendbirdMessage) => {
+    if (!msg.isUserMessage() && !msg.isFileMessage()) {
+      return { onPress: undefined, onLongPress: undefined };
+    }
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const response: PressActions = {
+      onPress: undefined,
+      onLongPress: undefined,
+    };
+
+    if (msg.isUserMessage()) {
+      sheetItems.push({
+        icon: 'copy',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
+        onPress: () => {
+          clipboardService.setString(msg.message || '');
+          toast.show(STRINGS.TOAST.COPY_OK, 'success');
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push(
+          {
+            icon: 'edit',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+            onPress: () => onEditMessage(msg),
+          },
+          {
+            icon: 'delete',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+            onPress: () => confirmDelete(msg),
+          },
+        );
+      }
+    }
+
+    if (msg.isFileMessage()) {
+      sheetItems.push({
+        icon: 'download',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
+        onPress: async () => {
+          if (toMegabyte(msg.size) > 4) {
+            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+          }
+
+          fileService
+            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
+            .then((response) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+              Logger.log('File saved to', response);
+            })
+            .catch((err) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+              Logger.log('File save failure', err);
+            });
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'delete',
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg),
+        });
+      }
+
+      const fileType = getFileType(msg.type || getFileExtension(msg.name));
+      switch (fileType) {
+        case 'image':
+        case 'video':
+        case 'audio': {
+          response.onPress = () => {
+            if (onPressImageMessage && fileType === 'image') {
+              Logger.warn(DEPRECATION_WARNING.CHANNEL.ON_PRESS_IMAGE_MESSAGE);
+              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
+            }
+            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
+          };
+          break;
+        }
+        default: {
+          response.onPress = () => SBUUtils.openURL(msg.url);
+          break;
+        }
+      }
+    }
+
+    if (sheetItems.length > 0) {
+      response.onLongPress = () => {
+        openSheet({
+          sheetItems,
+          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
+            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
+            : undefined,
+        });
+      };
+    }
+
+    if (msg.sendingStatus === 'failed') {
+      response.onLongPress = () => handleFailedMessage(msg);
+      response.onPress = () => {
+        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+      };
+    }
+
+    if (msg.sendingStatus === 'pending') {
+      response.onLongPress = undefined;
+      response.onPress = undefined;
+    }
+
+    return response;
+  };
+};
+
+const styles = createStyleSheet({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8,
+  },
+  frozenListPadding: {
+    paddingBottom: 32,
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center',
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16,
+  },
+});
+
+// NOTE: Due to Generic inference is not working on forwardRef, we need to cast it as typeof ChannelMessageList and implicit `ref` prop
+export default React.forwardRef(ChannelMessageList) as typeof ChannelMessageList;

package/src/components/ChatFlatList.tsx

@@ -1,69 +1,50 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { FlatList, FlatListProps, Platform } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import { FlatListProps, Platform, FlatList as RNFlatList, StyleSheet } from 'react-native';
 
+import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, getMessageUniqId, isMyMessage } from '@sendbird/uikit-utils';
+import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
-// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;
+const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
 
-function hasReachedToBottom(yPos: number, thresholdPx = 0) {
-  return thresholdPx >= yPos;
-}
-
-export type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };
 type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
-  currentUserId?: string;
   onBottomReached: () => void;
   onTopReached: () => void;
-  nextMessages: SendbirdMessage[];
-  onLeaveScrollBottom: (value: boolean) => void;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+
+  /** @deprecated Please use `onScrolledAwayFromBottom` **/
+  onLeaveScrollBottom?: (value: boolean) => void;
+  /** @deprecated Not used anymore **/
+  nextMessages?: unknown;
 };
 // FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
-const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
-  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },
+const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function CustomFlatList(
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onLeaveScrollBottom, onScroll, ...props },
   ref,
 ) {
   const { select } = useUIKitTheme();
-  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);
-  const yPos = useRef(0);
+  const contentOffsetY = useRef(0);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),
-    }),
-    [],
-  );
+  const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
+    onScroll?.(event);
 
-  useEffect(() => {
-    const latestMessage = nextMessages[nextMessages.length - 1];
-    if (!latestMessage) return;
+    const { contentOffset } = event.nativeEvent;
 
-    if (hasReachedToBottom(yPos.current)) {
-      onBottomReached();
-    } else if (isMyMessage(latestMessage, currentUserId)) {
-      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });
-    }
-  }, [onBottomReached, nextMessages, currentUserId]);
+    const prevOffsetY = contentOffsetY.current;
+    const currOffsetY = contentOffset.y;
 
-  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(
-    (event) => {
-      const { contentOffset } = event.nativeEvent;
-      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {
-        onLeaveScrollBottom(false);
-      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {
-        onLeaveScrollBottom(true);
-      }
-
-      yPos.current = contentOffset.y;
+    if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(false);
+      onLeaveScrollBottom?.(false);
+    } else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
+      onScrolledAwayFromBottom(true);
+      onLeaveScrollBottom?.(true);
+    }
 
-      onScroll?.(event);
-      if (hasReachedToBottom(yPos.current)) onBottomReached();
-    },
-    [onScroll, onBottomReached],
-  );
+    contentOffsetY.current = contentOffset.y;
+  });
 
   if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {
     ANDROID_BUG_ALERT_SHOWED = true;
@@ -83,14 +64,15 @@ const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
       {...props}
       // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
       inverted={Boolean(props.data?.length)}
-      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}
-      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}
-      ref={scrollRef}
-      onEndReachedThreshold={0.5}
+      ref={ref}
       onEndReached={onTopReached}
+      onScrollToIndexFailed={NOOP}
+      onStartReached={onBottomReached}
       scrollEventThrottle={16}
       onScroll={_onScroll}
       keyExtractor={getMessageUniqId}
+      style={{ flex: 1, ...StyleSheet.flatten(props.style) }}
+      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: UNREACHABLE_THRESHOLD }}
     />
   );
 });

package/src/components/MessageSearchResultItem.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import {
+  Avatar,
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import { getFileExtension, getFileType, useIIFE } from '@sendbird/uikit-utils';
+
+import type { MessageSearchProps } from '../domain/messageSearch/types';
+import { useLocalization } from '../hooks/useContext';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+export const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {
+  const { colors, select, palette } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+
+  const fileIcon = useIIFE(() => {
+    if (!message?.isFileMessage()) return undefined;
+    return iconMapper[getFileType(message.type || getFileExtension(message.name))];
+  });
+
+  return (
+    <PressBox onPress={onPress}>
+      <Box style={styles.container}>
+        <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />
+
+        <Box flex={1} paddingRight={16}>
+          <Box style={styles.titleLine}>
+            <Box flex={1} marginRight={4} justifyContent={'center'}>
+              <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}
+              </Text>
+            </Box>
+            <Box paddingTop={2}>
+              <Text caption2 color={colors.onBackground02}>
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE_CAPTION(message)}
+              </Text>
+            </Box>
+          </Box>
+
+          <Box flex={1}>
+            <Box alignItems={'center'} flexDirection={'row'}>
+              {fileIcon && (
+                <Icon
+                  size={18}
+                  icon={fileIcon}
+                  color={colors.onBackground02}
+                  containerStyle={[
+                    styles.bodyIcon,
+                    { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },
+                  ]}
+                />
+              )}
+
+              <Text
+                body3
+                numberOfLines={fileIcon ? 1 : 2}
+                ellipsizeMode={fileIcon ? 'middle' : 'tail'}
+                style={styles.bodyText}
+                color={colors.onBackground03}
+              >
+                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
+              </Text>
+            </Box>
+          </Box>
+
+          <Box style={styles.separator} backgroundColor={colors.onBackground04} />
+        </Box>
+      </Box>
+    </PressBox>
+  );
+};
+
+function getSenderProfile(message: SendbirdBaseMessage) {
+  if (message.isUserMessage() || message.isFileMessage()) {
+    return message.sender.profileUrl;
+  } else {
+    return undefined;
+  }
+}
+
+const styles = createStyleSheet({
+  container: {
+    height: 76,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {
+    marginHorizontal: 16,
+  },
+  avatarSize: {
+    width: 56,
+  },
+  titleLine: {
+    flexDirection: 'row',
+    marginTop: 10,
+    marginBottom: 4,
+  },
+  bodyIcon: {
+    borderRadius: 8,
+    width: 26,
+    height: 26,
+    marginRight: 4,
+  },
+  bodyText: {
+    flex: 1,
+    lineHeight: 16,
+  },
+  separator: {
+    position: 'absolute',
+    left: 0,
+    right: -16,
+    bottom: 0,
+    height: 1,
+  },
+});

package/src/components/ScrollToBottomButton.tsx

@@ -9,6 +9,8 @@ type Props = {
 };
 const ScrollToBottomButton = ({ visible, onPress }: Props) => {
   const { palette, select } = useUIKitTheme();
+  if (!visible) return null;
+
   return (
     <TouchableOpacity
       onPress={onPress}
@@ -16,10 +18,7 @@ const ScrollToBottomButton = ({ visible, onPress }: Props) => {
       disabled={!visible}
       style={[
         styles.container,
-        {
-          opacity: visible ? 1 : 0,
-          backgroundColor: select({ dark: palette.background400, light: palette.background50 }),
-        },
+        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },
       ]}
     >
       <Icon icon={'chevron-down'} size={22} />

package/src/constants.ts

@@ -1,6 +1,8 @@
 export const DEFAULT_LONG_PRESS_DELAY = 350;
+export const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
+export const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
 export const DEPRECATION_WARNING = {
-  GROUP_CHANNEL: {
+  CHANNEL: {
     ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
   },
 } as const;

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -55,7 +55,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
   });
 
-  const bodyIcon = useIIFE(() => {
+  const fileIcon = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
     if (typingUsers.length > 0) return undefined;
     return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
@@ -98,7 +98,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         titleCaptionLeft={titleCaptionIcon}
         titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
         body={bodyText}
-        bodyIcon={bodyIcon}
+        bodyIcon={fileIcon}
         badgeCount={channel.unreadMessageCount}
         mentioned={channel.unreadMentionCount > 0}
         mentionTrigger={mentionManager.config.trigger}