@sendbird/uikit-react-native 3.12.1 → 3.12.3

package/lib/module/components/FileViewer/FileViewerContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactNativeZoomableView","React","useLayoutEffect","useRef","useState","StyleSheet","useWindowDimensions","Box","Image","LoadingSpinner","createStyleSheet","useHeaderStyle","useUIKitTheme","useIIFE","usePlatformService","SBUUtils","FileViewerContent","type","src","topInset","bottomInset","maxZoom","minZoom","onPress","loading","setLoading","defaultHeight","mediaService","palette","source","uri","onLoadEnd","mediaViewer","createElement","ZoomableImageView","style","absoluteFill","resizeMode","zoomProps","onSingleTap","VideoComponent","top","bottom","onLoad","styles","container","position","size","color","primary300","props","width","height","imageSize","contentSizeProps","setContentSizeProps","contentWidth","contentHeight","safeRun","image","current","getImageSize","viewRatio","imageRatio","fitDirection","ratio","actualSize","_extends","visualTouchFeedbackEnabled","initialZoom","zIndex","flex","alignItems","justifyContent"],"sources":["FileViewerContent.tsx"],"sourcesContent":["import { ReactNativeZoomableView, ReactNativeZoomableViewProps } from '@openspacelabs/react-native-zoomable-view';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ImageProps, ImageStyle, ImageURISource, StyleProp, StyleSheet, useWindowDimensions } from 'react-native';\n\nimport {\n  Box,\n  Image,\n  LoadingSpinner,\n  createStyleSheet,\n  useHeaderStyle,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { FileType, useIIFE } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\n\ntype Props = {\n  type: FileType;\n  src: string;\n  topInset?: number;\n  bottomInset?: number;\n  maxZoom?: number;\n  minZoom?: number;\n  onPress?: () => void;\n};\nconst FileViewerContent = ({ type, src, topInset = 0, bottomInset = 0, maxZoom = 4, minZoom = 1, onPress }: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { defaultHeight } = useHeaderStyle();\n  const { mediaService } = usePlatformService();\n  const { palette } = useUIKitTheme();\n\n  const source = { uri: src };\n  const onLoadEnd = () => setLoading(false);\n  const mediaViewer = useIIFE(() => {\n    switch (type) {\n      case 'image': {\n        return (\n          <ZoomableImageView\n            source={source}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={onLoadEnd}\n            zoomProps={{\n              minZoom,\n              maxZoom,\n              onSingleTap: onPress,\n            }}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        return (\n          <mediaService.VideoComponent\n            source={source}\n            style={[StyleSheet.absoluteFill, { top: topInset, bottom: defaultHeight + bottomInset }]}\n            resizeMode={'contain'}\n            onLoad={onLoadEnd}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  return (\n    <Box style={styles.container}>\n      {mediaViewer}\n      {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n    </Box>\n  );\n};\n\nconst ZoomableImageView = ({\n  zoomProps,\n  ...props\n}: {\n  source: ImageURISource;\n  style: StyleProp<ImageStyle>;\n  resizeMode: ImageProps['resizeMode'];\n  onLoadEnd: () => void;\n  zoomProps?: Partial<ReactNativeZoomableViewProps>;\n}) => {\n  const { width, height } = useWindowDimensions();\n\n  const imageSize = useRef<{ width: number; height: number }>();\n  const [contentSizeProps, setContentSizeProps] = useState<{\n    contentWidth: number;\n    contentHeight: number;\n  }>({\n    contentWidth: width,\n    contentHeight: height,\n  });\n\n  useLayoutEffect(() => {\n    SBUUtils.safeRun(async () => {\n      if (props.source.uri) {\n        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));\n        imageSize.current = image;\n\n        const viewRatio = width / height;\n        const imageRatio = image.width / image.height;\n\n        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';\n        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;\n        const actualSize = { width: image.width * ratio, height: image.height * ratio };\n\n        setContentSizeProps({\n          contentWidth: actualSize.width,\n          contentHeight: actualSize.height,\n        });\n      }\n    });\n  }, [props.source.uri, width, height]);\n\n  return (\n    <ReactNativeZoomableView\n      visualTouchFeedbackEnabled={false}\n      style={{ width, height }}\n      initialZoom={1}\n      {...contentSizeProps}\n      {...zoomProps}\n    >\n      <Image {...props} />\n    </ReactNativeZoomableView>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    zIndex: 0,\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default FileViewerContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ReactNativeZoomableView","React","useLayoutEffect","useRef","useState","StyleSheet","useWindowDimensions","Box","Image","LoadingSpinner","createStyleSheet","useHeaderStyle","useUIKitTheme","useIIFE","usePlatformService","SBUUtils","FileViewerContent","type","src","topInset","bottomInset","maxZoom","minZoom","onPress","loading","setLoading","defaultHeight","mediaService","palette","source","uri","onLoadEnd","mediaViewer","createElement","ZoomableImageView","style","absoluteFill","resizeMode","zoomProps","onSingleTap","VideoComponent","top","bottom","onLoad","styles","container","position","size","color","primary300","props","width","height","imageSize","undefined","contentSizeProps","setContentSizeProps","contentWidth","contentHeight","safeRun","image","current","getImageSize","viewRatio","imageRatio","fitDirection","ratio","actualSize","_extends","visualTouchFeedbackEnabled","initialZoom","zIndex","flex","alignItems","justifyContent"],"sources":["FileViewerContent.tsx"],"sourcesContent":["import { ReactNativeZoomableView, ReactNativeZoomableViewProps } from '@openspacelabs/react-native-zoomable-view';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { ImageProps, ImageStyle, ImageURISource, StyleProp, StyleSheet, useWindowDimensions } from 'react-native';\n\nimport {\n  Box,\n  Image,\n  LoadingSpinner,\n  createStyleSheet,\n  useHeaderStyle,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { FileType, useIIFE } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\n\ntype Props = {\n  type: FileType;\n  src: string;\n  topInset?: number;\n  bottomInset?: number;\n  maxZoom?: number;\n  minZoom?: number;\n  onPress?: () => void;\n};\nconst FileViewerContent = ({ type, src, topInset = 0, bottomInset = 0, maxZoom = 4, minZoom = 1, onPress }: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { defaultHeight } = useHeaderStyle();\n  const { mediaService } = usePlatformService();\n  const { palette } = useUIKitTheme();\n\n  const source = { uri: src };\n  const onLoadEnd = () => setLoading(false);\n  const mediaViewer = useIIFE(() => {\n    switch (type) {\n      case 'image': {\n        return (\n          <ZoomableImageView\n            source={source}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={onLoadEnd}\n            zoomProps={{\n              minZoom,\n              maxZoom,\n              onSingleTap: onPress,\n            }}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        return (\n          <mediaService.VideoComponent\n            source={source}\n            style={[StyleSheet.absoluteFill, { top: topInset, bottom: defaultHeight + bottomInset }]}\n            resizeMode={'contain'}\n            onLoad={onLoadEnd}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  return (\n    <Box style={styles.container}>\n      {mediaViewer}\n      {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n    </Box>\n  );\n};\n\nconst ZoomableImageView = ({\n  zoomProps,\n  ...props\n}: {\n  source: ImageURISource;\n  style: StyleProp<ImageStyle>;\n  resizeMode: ImageProps['resizeMode'];\n  onLoadEnd: () => void;\n  zoomProps?: Partial<ReactNativeZoomableViewProps>;\n}) => {\n  const { width, height } = useWindowDimensions();\n\n  const imageSize = useRef<{ width: number; height: number } | undefined>(undefined);\n  const [contentSizeProps, setContentSizeProps] = useState<{\n    contentWidth: number;\n    contentHeight: number;\n  }>({\n    contentWidth: width,\n    contentHeight: height,\n  });\n\n  useLayoutEffect(() => {\n    SBUUtils.safeRun(async () => {\n      if (props.source.uri) {\n        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));\n        imageSize.current = image;\n\n        const viewRatio = width / height;\n        const imageRatio = image.width / image.height;\n\n        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';\n        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;\n        const actualSize = { width: image.width * ratio, height: image.height * ratio };\n\n        setContentSizeProps({\n          contentWidth: actualSize.width,\n          contentHeight: actualSize.height,\n        });\n      }\n    });\n  }, [props.source.uri, width, height]);\n\n  return (\n    <ReactNativeZoomableView\n      visualTouchFeedbackEnabled={false}\n      style={{ width, height }}\n      initialZoom={1}\n      {...contentSizeProps}\n      {...zoomProps}\n    >\n      <Image {...props} />\n    </ReactNativeZoomableView>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    zIndex: 0,\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default FileViewerContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ReactionAddons/BottomSheetReactionAddon.js

@@ -1,10 +1,52 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
+const EmojiReactionPressable = ({
+  url,
+  reacted,
+  selectedBackground,
+  enabledBackground,
+  onPress
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [styles.button, {
+      backgroundColor: reacted || pressed ? selectedBackground : enabledBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: url
+    },
+    style: styles.emoji
+  }));
+};
+const EmojiMorePressable = ({
+  selectedBackground,
+  enabledBackground,
+  iconColor,
+  onPress
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [styles.button, {
+      backgroundColor: pressed ? selectedBackground : enabledBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'emoji-more',
+    style: styles.emoji,
+    color: iconColor
+  }));
+};
 const BottomSheetReactionAddon = ({
   onClose,
   message,
@@ -63,38 +105,26 @@ const BottomSheetReactionAddon = ({
         onClose();
       });
     };
-    return /*#__PURE__*/React.createElement(Pressable, {
+    return /*#__PURE__*/React.createElement(EmojiReactionPressable, {
       key: key,
-      onPress: onPress,
-      style: ({
-        pressed
-      }) => [styles.button, {
-        backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
-      }]
-    }, /*#__PURE__*/React.createElement(Image, {
-      source: {
-        uri: url
-      },
-      style: styles.emoji
-    }));
-  }), /*#__PURE__*/React.createElement(Pressable, {
+      url: url,
+      reacted: reacted,
+      selectedBackground: color.selected.background,
+      enabledBackground: color.enabled.background,
+      onPress: onPress
+    });
+  }), /*#__PURE__*/React.createElement(EmojiMorePressable, {
+    selectedBackground: color.selected.background,
+    enabledBackground: color.enabled.background,
+    iconColor: colors.onBackground03,
     onPress: async () => {
       await onClose();
       openReactionList({
         channel,
         message
       });
-    },
-    style: ({
-      pressed
-    }) => [styles.button, {
-      backgroundColor: pressed ? color.selected.background : color.enabled.background
-    }]
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'emoji-more',
-    style: styles.emoji,
-    color: colors.onBackground03
-  })));
+    }
+  }));
 };
 const styles = createStyleSheet({
   container: {

package/lib/module/components/ReactionAddons/BottomSheetReactionAddon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","Icon","Image","createStyleSheet","useUIKitTheme","useGroupChannelHandler","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","useReaction","useSendbirdChat","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","safeArea","onReactionUpdated","eventChannel","event","url","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","createElement","style","styles","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","action","deleteReaction","addReaction","catch","error","warn","finally","pressed","button","backgroundColor","selected","background","enabled","source","uri","emoji","icon","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const safeArea = useSafeAreaPadding(['left', 'right']);\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        const msg = (await sdk.message.getMessage({\n          includeReactions: true,\n          messageId: message.messageId,\n          channelUrl: message.channelUrl,\n          channelType: message.channelType,\n        })) as null | BaseMessage;\n        if (msg) updateReactionFocusedItem({ message: msg });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = async () => {\n          const action = (message: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n          };\n\n          await action(message, key)\n            .catch((error) => {\n              Logger.warn('Failed to reaction', error);\n            })\n            .finally(() => {\n              onClose();\n            });\n        };\n\n        return (\n          <Pressable\n            key={key}\n            onPress={onPress}\n            style={({ pressed }) => [\n              styles.button,\n              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n            ]}\n          >\n            <Image source={{ uri: url }} style={styles.emoji} />\n          </Pressable>\n        );\n      })}\n\n      <Pressable\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n        style={({ pressed }) => [\n          styles.button,\n          { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n        ]}\n      >\n        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />\n      </Pressable>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","Pressable","View","Icon","Image","createStyleSheet","useUIKitTheme","useGroupChannelHandler","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","useReaction","useSendbirdChat","EmojiReactionPressable","url","reacted","selectedBackground","enabledBackground","onPress","pressed","setPressed","createElement","onPressIn","onPressOut","style","styles","button","backgroundColor","source","uri","emoji","EmojiMorePressable","iconColor","icon","color","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","safeArea","onReactionUpdated","eventChannel","event","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","ui","reaction","default","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","action","deleteReaction","addReaction","catch","error","warn","finally","selected","background","enabled","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\n\nconst EmojiReactionPressable = ({\n  url,\n  reacted,\n  selectedBackground,\n  enabledBackground,\n  onPress,\n}: {\n  url: string;\n  reacted: boolean;\n  selectedBackground: string;\n  enabledBackground: string;\n  onPress: () => void;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n    </Pressable>\n  );\n};\n\nconst EmojiMorePressable = ({\n  selectedBackground,\n  enabledBackground,\n  iconColor,\n  onPress,\n}: {\n  selectedBackground: string;\n  enabledBackground: string;\n  iconColor: string;\n  onPress: () => void;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Icon icon={'emoji-more'} style={styles.emoji} color={iconColor} />\n    </Pressable>\n  );\n};\n\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const safeArea = useSafeAreaPadding(['left', 'right']);\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        const msg = (await sdk.message.getMessage({\n          includeReactions: true,\n          messageId: message.messageId,\n          channelUrl: message.channelUrl,\n          channelType: message.channelType,\n        })) as null | BaseMessage;\n        if (msg) updateReactionFocusedItem({ message: msg });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = async () => {\n          const action = (message: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n          };\n\n          await action(message, key)\n            .catch((error) => {\n              Logger.warn('Failed to reaction', error);\n            })\n            .finally(() => {\n              onClose();\n            });\n        };\n\n        return (\n          <EmojiReactionPressable\n            key={key}\n            url={url}\n            reacted={reacted}\n            selectedBackground={color.selected.background}\n            enabledBackground={color.enabled.background}\n            onPress={onPress}\n          />\n        );\n      })}\n\n      <EmojiMorePressable\n        selectedBackground={color.selected.background}\n        enabledBackground={color.enabled.background}\n        iconColor={colors.onBackground03}\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n      />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ReactionAddons/MessageReactionAddon.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable } from 'react-native';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
@@ -17,34 +17,62 @@ const createOnPressReaction = (reaction, channel, message, reacted) => {
     }
   };
 };
+const ReactionPressable = ({
+  reaction,
+  channel,
+  message,
+  source,
+  onOpenReactionUserList,
+  index,
+  style
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
+    onLongPress: () => onOpenReactionUserList(index),
+    delayLongPress: DEFAULT_LONG_PRESS_DELAY,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false)
+  }, /*#__PURE__*/React.createElement(ReactionRoundedButton, {
+    source: source,
+    count: getReactionCount(reaction),
+    reacted: pressed || reaction.hasCurrentUserReacted,
+    style: style
+  }));
+};
+const ReactionMorePressable = ({
+  onPress
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false)
+  }, /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
+    pressed: pressed
+  }));
+};
 const createReactionButtons = (channel, message, getIconSource, emojiLimit, onOpenReactionList, onOpenReactionUserList, reactionAddonType) => {
   const reactions = message.reactions ?? [];
   const buttons = reactions.map((reaction, index) => {
     const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;
     const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;
-    return /*#__PURE__*/React.createElement(Pressable, {
+    return /*#__PURE__*/React.createElement(ReactionPressable, {
       key: reaction.key,
-      onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
-      onLongPress: () => onOpenReactionUserList(index),
-      delayLongPress: DEFAULT_LONG_PRESS_DELAY
-    }, ({
-      pressed
-    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton, {
+      reaction: reaction,
+      channel: channel,
+      message: message,
       source: getIconSource(reaction.key),
-      count: getReactionCount(reaction),
-      reacted: pressed || reaction.hasCurrentUserReacted,
+      onOpenReactionUserList: onOpenReactionUserList,
+      index: index,
       style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom] : [styles.marginEnd, styles.marginBottom]
-    }));
+    });
   });
   if (buttons.length < emojiLimit) {
-    buttons.push(/*#__PURE__*/React.createElement(Pressable, {
+    buttons.push(/*#__PURE__*/React.createElement(ReactionMorePressable, {
       key: REACTION_MORE_KEY,
       onPress: onOpenReactionList
-    }, ({
-      pressed
-    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
-      pressed: pressed
-    })));
+    }));
   }
   return buttons;
 };

package/lib/module/components/ReactionAddons/MessageReactionAddon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","useForceUpdate","useGroupChannelHandler","getReactionCount","DEFAULT_LONG_PRESS_DELAY","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","createOnPressReaction","reaction","channel","message","reacted","deleteReaction","key","addReaction","createReactionButtons","getIconSource","emojiLimit","onOpenReactionList","onOpenReactionUserList","reactionAddonType","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","length","createElement","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","pressed","source","count","style","styles","marginEnd","marginBottom","push","More","MessageReactionAddon","_message$reactions","colors","sdk","emojiManager","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { ImageProps, Pressable } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\nexport type ReactionAddonType = 'default' | 'thread_parent_message';\n\nconst createOnPressReaction = (\n  reaction: SendbirdReaction,\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  reacted: boolean,\n) => {\n  return () => {\n    if (reacted) {\n      return channel.deleteReaction(message, reaction.key);\n    } else {\n      return channel.addReaction(message, reaction.key);\n    }\n  };\n};\n\nconst createReactionButtons = (\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  getIconSource: (reactionKey: string) => ImageProps['source'],\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  reactionAddonType?: ReactionAddonType,\n) => {\n  const reactions = message.reactions ?? [];\n  const buttons = reactions.map((reaction, index) => {\n    const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;\n    const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;\n    return (\n      <Pressable\n        key={reaction.key}\n        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}\n        onLongPress={() => onOpenReactionUserList(index)}\n        delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      >\n        {({ pressed }) => (\n          <ReactionRoundedButton\n            source={getIconSource(reaction.key)}\n            count={getReactionCount(reaction)}\n            reacted={pressed || reaction.hasCurrentUserReacted}\n            style={\n              reactionAddonType === 'default'\n                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]\n                : [styles.marginEnd, styles.marginBottom]\n            }\n          />\n        )}\n      </Pressable>\n    );\n  });\n  if (buttons.length < emojiLimit) {\n    buttons.push(\n      <Pressable key={REACTION_MORE_KEY} onPress={onOpenReactionList}>\n        {({ pressed }) => <ReactionRoundedButton.More pressed={pressed} />}\n      </Pressable>,\n    );\n  }\n\n  return buttons;\n};\n\nconst MessageReactionAddon = ({\n  channel,\n  message,\n  reactionAddonType = 'default',\n}: {\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  reactionAddonType?: ReactionAddonType;\n}) => {\n  const { colors } = useUIKitTheme();\n  const { sdk, emojiManager } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n  const forceUpdate = useForceUpdate();\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(_, event) {\n      if (event.messageId === message.messageId) {\n        message.applyReactionEvent(event);\n        forceUpdate();\n      }\n    },\n  });\n\n  if (reactionAddonType === 'default' && !message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (reactionKey) => {\n      const emoji = emojiManager.allEmojiMap[reactionKey];\n      return emojiManager.getEmojiIconSource(emoji);\n    },\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    reactionAddonType,\n  );\n\n  const containerStyle =\n    reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;\n\n  return (\n    <Pressable\n      style={[\n        containerStyle,\n        { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },\n      ]}\n    >\n      {reactionButtons}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    padding: 8,\n    borderRadius: 16,\n    borderWidth: 1,\n  },\n  reactionThreadParentMessageContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  marginEnd: {\n    marginEnd: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","Pressable","createStyleSheet","useUIKitTheme","useForceUpdate","useGroupChannelHandler","getReactionCount","DEFAULT_LONG_PRESS_DELAY","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","createOnPressReaction","reaction","channel","message","reacted","deleteReaction","key","addReaction","ReactionPressable","source","onOpenReactionUserList","index","style","pressed","setPressed","createElement","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","onPressIn","onPressOut","count","ReactionMorePressable","More","createReactionButtons","getIconSource","emojiLimit","onOpenReactionList","reactionAddonType","reactions","buttons","map","isNotLastOfRow","isNotLastOfCol","length","styles","marginEnd","marginBottom","push","MessageReactionAddon","_message$reactions","colors","sdk","emojiManager","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ImageProps, Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\nexport type ReactionAddonType = 'default' | 'thread_parent_message';\n\nconst createOnPressReaction = (\n  reaction: SendbirdReaction,\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  reacted: boolean,\n) => {\n  return () => {\n    if (reacted) {\n      return channel.deleteReaction(message, reaction.key);\n    } else {\n      return channel.addReaction(message, reaction.key);\n    }\n  };\n};\n\nconst ReactionPressable = ({\n  reaction,\n  channel,\n  message,\n  source,\n  onOpenReactionUserList,\n  index,\n  style,\n}: {\n  reaction: SendbirdReaction;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  source: ImageProps['source'];\n  onOpenReactionUserList: (focusIndex: number) => void;\n  index: number;\n  style: StyleProp<ViewStyle>;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}\n      onLongPress={() => onOpenReactionUserList(index)}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n    >\n      <ReactionRoundedButton\n        source={source}\n        count={getReactionCount(reaction)}\n        reacted={pressed || reaction.hasCurrentUserReacted}\n        style={style}\n      />\n    </Pressable>\n  );\n};\n\nconst ReactionMorePressable = ({ onPress }: { onPress: () => void }) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable onPress={onPress} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>\n      <ReactionRoundedButton.More pressed={pressed} />\n    </Pressable>\n  );\n};\n\nconst createReactionButtons = (\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  getIconSource: (reactionKey: string) => ImageProps['source'],\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  reactionAddonType?: ReactionAddonType,\n) => {\n  const reactions = message.reactions ?? [];\n  const buttons = reactions.map((reaction, index) => {\n    const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;\n    const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;\n    return (\n      <ReactionPressable\n        key={reaction.key}\n        reaction={reaction}\n        channel={channel}\n        message={message}\n        source={getIconSource(reaction.key)}\n        onOpenReactionUserList={onOpenReactionUserList}\n        index={index}\n        style={\n          reactionAddonType === 'default'\n            ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]\n            : [styles.marginEnd, styles.marginBottom]\n        }\n      />\n    );\n  });\n  if (buttons.length < emojiLimit) {\n    buttons.push(<ReactionMorePressable key={REACTION_MORE_KEY} onPress={onOpenReactionList} />);\n  }\n\n  return buttons;\n};\n\nconst MessageReactionAddon = ({\n  channel,\n  message,\n  reactionAddonType = 'default',\n}: {\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  reactionAddonType?: ReactionAddonType;\n}) => {\n  const { colors } = useUIKitTheme();\n  const { sdk, emojiManager } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n  const forceUpdate = useForceUpdate();\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(_, event) {\n      if (event.messageId === message.messageId) {\n        message.applyReactionEvent(event);\n        forceUpdate();\n      }\n    },\n  });\n\n  if (reactionAddonType === 'default' && !message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (reactionKey) => {\n      const emoji = emojiManager.allEmojiMap[reactionKey];\n      return emojiManager.getEmojiIconSource(emoji);\n    },\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    reactionAddonType,\n  );\n\n  const containerStyle =\n    reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;\n\n  return (\n    <Pressable\n      style={[\n        containerStyle,\n        { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },\n      ]}\n    >\n      {reactionButtons}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    padding: 8,\n    borderRadius: 16,\n    borderWidth: 1,\n  },\n  reactionThreadParentMessageContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  marginEnd: {\n    marginEnd: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ReactionBottomSheets/ReactionListBottomSheet.js

@@ -1,8 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
+const ReactionEmojiPressable = ({
+  emojiKey,
+  url,
+  message,
+  channel,
+  currentUserId,
+  selectedBackground,
+  enabledBackground,
+  onClose
+}) => {
+  var _message$reactions;
+  const [pressed, setPressed] = useState(false);
+  const reactedUserIds = (message === null || message === void 0 || (_message$reactions = message.reactions) === null || _message$reactions === void 0 || (_message$reactions = _message$reactions.find(it => it.key === emojiKey)) === null || _message$reactions === void 0 ? void 0 : _message$reactions.userIds) ?? [];
+  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);
+  const reacted = idx > -1;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: async () => {
+      if (message && channel) {
+        const action = (msg, key) => {
+          return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
+        };
+        action(message, emojiKey).catch(error => {
+          const operation = reacted ? 'remove' : 'add';
+          Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
+        });
+      }
+      await onClose();
+    },
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [styles.button, {
+      backgroundColor: reacted || pressed ? selectedBackground : enabledBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: url
+    },
+    style: styles.emoji
+  }));
+};
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({
   visible,
@@ -57,36 +97,18 @@ const ReactionListBottomSheet = ({
         url
       }
     }) => {
-      var _message$reactions;
-      const reactedUserIds = (message === null || message === void 0 || (_message$reactions = message.reactions) === null || _message$reactions === void 0 || (_message$reactions = _message$reactions.find(it => it.key === key)) === null || _message$reactions === void 0 ? void 0 : _message$reactions.userIds) ?? [];
-      const idx = reactedUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID);
-      const reacted = idx > -1;
       return /*#__PURE__*/React.createElement(View, {
         style: styles.emojiItem
-      }, /*#__PURE__*/React.createElement(Pressable, {
-        key: key,
-        onPress: async () => {
-          if (message && channel) {
-            const action = (message, key) => {
-              return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);
-            };
-            action(message, key).catch(error => {
-              Logger.warn('Failed to reaction', error);
-            });
-          }
-          await onClose();
-        },
-        style: ({
-          pressed
-        }) => [styles.button, {
-          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
-        }]
-      }, /*#__PURE__*/React.createElement(Image, {
-        source: {
-          uri: url
-        },
-        style: styles.emoji
-      })));
+      }, /*#__PURE__*/React.createElement(ReactionEmojiPressable, {
+        emojiKey: key,
+        url: url,
+        message: message,
+        channel: channel,
+        currentUserId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId,
+        selectedBackground: color.selected.background,
+        enabledBackground: color.enabled.background,
+        onClose: onClose
+      }));
     }
   })));
 };

package/lib/module/components/ReactionBottomSheets/ReactionListBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","Image","Modal","createStyleSheet","useUIKitTheme","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","width","safeArea","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","createElement","type","Boolean","backgroundStyle","styles","modal","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","url","_message$reactions","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","onPress","action","deleteReaction","addReaction","catch","error","warn","pressed","button","selected","enabled","source","uri","emoji","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: safeArea.paddingBottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,\n            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n\n            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n            const reacted = idx > -1;\n\n            return (\n              <View style={styles.emojiItem}>\n                <Pressable\n                  key={key}\n                  onPress={async () => {\n                    if (message && channel) {\n                      const action = (message: BaseMessage, key: string) => {\n                        return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n                      };\n\n                      action(message, key).catch((error) => {\n                        Logger.warn('Failed to reaction', error);\n                      });\n                    }\n                    await onClose();\n                  }}\n                  style={({ pressed }) => [\n                    styles.button,\n                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n                  ]}\n                >\n                  <Image source={{ uri: url }} style={styles.emoji} />\n                </Pressable>\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","FlatList","Pressable","View","useWindowDimensions","Image","Modal","createStyleSheet","useUIKitTheme","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","ReactionEmojiPressable","emojiKey","url","message","channel","currentUserId","selectedBackground","enabledBackground","onClose","_message$reactions","pressed","setPressed","reactedUserIds","reactions","find","it","key","userIds","idx","indexOf","reacted","createElement","onPress","action","msg","deleteReaction","addReaction","catch","error","operation","warn","onPressIn","onPressOut","style","styles","button","backgroundColor","source","uri","emoji","NUM_COLUMN","ReactionListBottomSheet","visible","onDismiss","reactionCtx","chatCtx","width","safeArea","colors","currentUser","emojiManager","color","ui","reaction","default","type","Boolean","backgroundStyle","modal","container","paddingBottom","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","data","allEmoji","numColumns","keyExtractor","item","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","emojiItem","userId","selected","enabled","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionEmojiPressable = ({\n  emojiKey,\n  url,\n  message,\n  channel,\n  currentUserId,\n  selectedBackground,\n  enabledBackground,\n  onClose,\n}: {\n  emojiKey: string;\n  url: string;\n  message: SendbirdBaseMessage | undefined;\n  channel: SendbirdBaseChannel | undefined;\n  currentUserId: string | undefined;\n  selectedBackground: string;\n  enabledBackground: string;\n  onClose: () => Promise<void>;\n}) => {\n  const [pressed, setPressed] = useState(false);\n\n  const reactedUserIds = message?.reactions?.find((it) => it.key === emojiKey)?.userIds ?? [];\n  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);\n  const reacted = idx > -1;\n\n  return (\n    <Pressable\n      onPress={async () => {\n        if (message && channel) {\n          const action = (msg: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);\n          };\n\n          action(message, emojiKey).catch((error) => {\n            const operation = reacted ? 'remove' : 'add';\n            Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);\n          });\n        }\n        await onClose();\n      }}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n    </Pressable>\n  );\n};\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: safeArea.paddingBottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,\n            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            return (\n              <View style={styles.emojiItem}>\n                <ReactionEmojiPressable\n                  emojiKey={key}\n                  url={url}\n                  message={message}\n                  channel={channel}\n                  currentUserId={currentUser?.userId}\n                  selectedBackground={color.selected.background}\n                  enabledBackground={color.enabled.background}\n                  onClose={onClose}\n                />\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AAG7E,SAASC,KAAK,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AACvG,SAASC,MAAM,EAAEC,kBAAkB,QAAQ,uBAAuB;AAGlE,SAASC,eAAe,QAAQ,iBAAiB;AAGjD,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,GAAG;EACHC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,kBAAkB;EAClBC,iBAAiB;EACjBC;AAUF,CAAC,KAAK;EAAA,IAAAC,kBAAA;EACJ,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMwB,cAAc,GAAG,CAAAT,OAAO,aAAPA,OAAO,gBAAAM,kBAAA,GAAPN,OAAO,CAAEU,SAAS,cAAAJ,kBAAA,gBAAAA,kBAAA,GAAlBA,kBAAA,CAAoBK,IAAI,CAAEC,EAAE,IAAKA,EAAE,CAACC,GAAG,KAAKf,QAAQ,CAAC,cAAAQ,kBAAA,uBAArDA,kBAAA,CAAuDQ,OAAO,KAAI,EAAE;EAC3F,MAAMC,GAAG,GAAGN,cAAc,CAACO,OAAO,CAACd,aAAa,IAAIN,eAAe,CAAC;EACpE,MAAMqB,OAAO,GAAGF,GAAG,GAAG,CAAC,CAAC;EAExB,oBACE/B,KAAA,CAAAkC,aAAA,CAAC/B,SAAS;IACRgC,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,IAAInB,OAAO,IAAIC,OAAO,EAAE;QACtB,MAAMmB,MAAM,GAAGA,CAACC,GAAgB,EAAER,GAAW,KAAK;UAChD,OAAOI,OAAO,GAAGhB,OAAO,CAACqB,cAAc,CAACD,GAAG,EAAER,GAAG,CAAC,GAAGZ,OAAO,CAACsB,WAAW,CAACF,GAAG,EAAER,GAAG,CAAC;QACnF,CAAC;QAEDO,MAAM,CAACpB,OAAO,EAAEF,QAAQ,CAAC,CAAC0B,KAAK,CAAEC,KAAK,IAAK;UACzC,MAAMC,SAAS,GAAGT,OAAO,GAAG,QAAQ,GAAG,KAAK;UAC5CvB,MAAM,CAACiC,IAAI,CAAC,aAAaD,SAAS,uBAAuB5B,QAAQ,GAAG,EAAE2B,KAAK,CAAC;QAC9E,CAAC,CAAC;MACJ;MACA,MAAMpB,OAAO,CAAC,CAAC;IACjB,CAAE;IACFuB,SAAS,EAAEA,CAAA,KAAMpB,UAAU,CAAC,IAAI,CAAE;IAClCqB,UAAU,EAAEA,CAAA,KAAMrB,UAAU,CAAC,KAAK,CAAE;IACpCsB,KAAK,EAAE,CAACC,MAAM,CAACC,MAAM,EAAE;MAAEC,eAAe,EAAEhB,OAAO,IAAIV,OAAO,GAAGJ,kBAAkB,GAAGC;IAAkB,CAAC;EAAE,gBAEzGpB,KAAA,CAAAkC,aAAA,CAAC5B,KAAK;IAAC4C,MAAM,EAAE;MAAEC,GAAG,EAAEpC;IAAI,CAAE;IAAC+B,KAAK,EAAEC,MAAM,CAACK;EAAM,CAAE,CAC1C,CAAC;AAEhB,CAAC;AAED,MAAMC,UAAU,GAAG,CAAC;AACpB,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAElC,OAAO;EAAEmC,SAAS;EAAEC,WAAW;EAAEC;AAAkC,CAAC,KAAK;EACnH,MAAM;IAAEC;EAAM,CAAC,GAAGtD,mBAAmB,CAAC,CAAC;EACvC,MAAMuD,QAAQ,GAAGjD,kBAAkB,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EAChE,MAAM;IAAEkD;EAAO,CAAC,GAAGpD,aAAa,CAAC,CAAC;EAElC,MAAM;IAAEqD,WAAW;IAAEC;EAAa,CAAC,GAAGL,OAAO;EAC7C,MAAM;IAAEzC,OAAO;IAAED;EAAQ,CAAC,GAAGyC,WAAW;EACxC,MAAMO,KAAK,GAAGH,MAAM,CAACI,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACEnE,KAAA,CAAAkC,aAAA,CAAC3B,KAAK;IACJ6D,IAAI,EAAE,OAAQ;IACdb,OAAO,EAAEc,OAAO,CAACd,OAAO,IAAItC,OAAO,IAAID,OAAO,CAAE;IAChDK,OAAO,EAAEA,OAAQ;IACjBmC,SAAS,EAAEA,SAAU;IACrBc,eAAe,EAAEvB,MAAM,CAACwB;EAAM,gBAE9BvE,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;IACH0C,KAAK,EAAE,CACLC,MAAM,CAACyB,SAAS,EAChB;MACEb,KAAK;MACLc,aAAa,EAAEb,QAAQ,CAACa,aAAa;MACrCxB,eAAe,EAAEY,MAAM,CAACI,EAAE,CAACS,MAAM,CAACP,OAAO,CAACQ,IAAI,CAACC,UAAU;MACzDC,YAAY,EAAEjB,QAAQ,CAACiB,YAAY,GAAG9B,MAAM,CAACyB,SAAS,CAACM,iBAAiB;MACxEC,UAAU,EAAEnB,QAAQ,CAACmB,UAAU,GAAGhC,MAAM,CAACyB,SAAS,CAACM;IACrD,CAAC;EACD,gBAEF9E,KAAA,CAAAkC,aAAA,CAAChC,QAAQ;IACP8E,IAAI,EAAEjB,YAAY,CAACkB,QAAS;IAC5BC,UAAU,EAAE7B,UAAW;IACvB8B,YAAY,EAAGC,IAAI,IAAKA,IAAI,CAACvD,GAAI;IACjCwD,qBAAqB,EAAEtC,MAAM,CAACuC,QAAS;IACvCC,sBAAsB,EAAEA,CAAA,kBAAMvF,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;MAAC0C,KAAK,EAAE;QAAE0C,MAAM,EAAE;MAAG;IAAE,CAAE,CAAE;IAC9DC,UAAU,EAAEA,CAAC;MAAEL,IAAI,EAAE;QAAEvD,GAAG;QAAEd;MAAI;IAAE,CAAC,KAAK;MACtC,oBACEf,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;QAAC0C,KAAK,EAAEC,MAAM,CAAC2C;MAAU,gBAC5B1F,KAAA,CAAAkC,aAAA,CAACrB,sBAAsB;QACrBC,QAAQ,EAAEe,GAAI;QACdd,GAAG,EAAEA,GAAI;QACTC,OAAO,EAAEA,OAAQ;QACjBC,OAAO,EAAEA,OAAQ;QACjBC,aAAa,EAAE4C,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAE6B,MAAO;QACnCxE,kBAAkB,EAAE6C,KAAK,CAAC4B,QAAQ,CAAChB,UAAW;QAC9CxD,iBAAiB,EAAE4C,KAAK,CAAC6B,OAAO,CAACjB,UAAW;QAC5CvD,OAAO,EAAEA;MAAQ,CAClB,CACG,CAAC;IAEX;EAAE,CACH,CACG,CACD,CAAC;AAEZ,CAAC;AAED,MAAM0B,MAAM,GAAGvC,gBAAgB,CAAC;EAC9BgE,SAAS,EAAE;IACTsB,QAAQ,EAAE,QAAQ;IAClBC,oBAAoB,EAAE,CAAC;IACvBC,kBAAkB,EAAE,CAAC;IACrBC,UAAU,EAAE,EAAE;IACdnB,iBAAiB,EAAE,EAAE;IACrBoB,aAAa,EAAE;EACjB,CAAC;EACD3B,KAAK,EAAE;IACL4B,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDd,QAAQ,EAAE;IACR3B,KAAK,EAAE,MAAM;IACbuC,aAAa,EAAE,QAAQ;IACvBE,cAAc,EAAE;EAClB,CAAC;EACDV,SAAS,EAAE;IACT/B,KAAK,EAAE,GAAG,GAAG,GAAGN,UAAU,GAAG;IAC7B8C,UAAU,EAAE;EACd,CAAC;EACDnD,MAAM,EAAE;IACNW,KAAK,EAAE,EAAE;IACT6B,MAAM,EAAE,EAAE;IACVa,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE;EAChB,CAAC;EACDlD,KAAK,EAAE;IACLO,KAAK,EAAE,MAAM;IACb6B,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAelC,uBAAuB","ignoreList":[]}

package/lib/module/components/ReactionBottomSheets/ReactionUserListBottomSheet.js

@@ -19,7 +19,7 @@ const ReactionUserListBottomSheet = ({
     colors
   } = useUIKitTheme();
   const [tabIndex, setTabIndex] = useState(0);
-  const scrollRef = useRef();
+  const scrollRef = useRef(undefined);
   const tabIndicatorValue = useRef([]);
   const tabIndicatorAnimated = useRef({
     x: new Animated.Value(0),

package/lib/module/components/ReactionBottomSheets/ReactionUserListBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","I18nManager","Pressable","ScrollView","View","useWindowDimensions","Avatar","Divider","Image","Modal","Text","createStyleSheet","useUIKitTheme","getReactionCount","truncatedCount","useSafeAreaPadding","ReactionUserListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","onPressUserProfile","width","safeArea","colors","tabIndex","setTabIndex","scrollRef","tabIndicatorValue","tabIndicatorAnimated","x","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","default","reactions","focusedReaction","containerSafeArea","paddingStart","styles","layout","paddingHorizontal","paddingEnd","focusTab","index","animated","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","filter","Boolean","length","renderTabs","createElement","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginEnd","onPress","onLayout","e","indexForLayout","isRTL","nativeEvent","source","getEmojiIconSource","tabEmoji","button","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","userCountDifference","count","sampledUserInfoList","Fragment","reactedUserInfo","isGroupChannel","userId","pageItem","size","uri","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","body3","onBackground02","REACTION","MORE_USERS","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","top","showsVerticalScrollIndicator","pageContainer","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position","bottom"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdEmoji,\n  SendbirdReaction,\n  getReactionCount,\n  truncatedCount,\n  useSafeAreaPadding,\n} from '@sendbird/uikit-utils';\n\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionUserListBottomSheet = ({\n  visible,\n  onClose,\n  onDismiss,\n  reactionCtx,\n  chatCtx,\n  localizationCtx,\n  onPressUserProfile,\n}: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);\n  const { colors } = useUIKitTheme();\n\n  const [tabIndex, setTabIndex] = useState(0);\n  const scrollRef = useRef<ScrollView>();\n  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);\n  const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;\n  const focusedWithLayoutCalculated = useRef(false);\n\n  const { emojiManager } = chatCtx;\n  const { channel, message, focusIndex } = reactionCtx;\n  const { STRINGS } = localizationCtx;\n\n  const color = colors.ui.reaction.default;\n  const reactions = message?.reactions ?? [];\n  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;\n  const containerSafeArea = {\n    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,\n    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,\n  };\n\n  const focusTab = (index: number, animated = true) => {\n    const indicatorValue = tabIndicatorValue.current[index];\n    if (indicatorValue) {\n      setTabIndex(index);\n      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);\n      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });\n    }\n  };\n\n  const animateTabIndicator = (x: number, width: number, animated = true) => {\n    const baseConfig = { duration: animated ? 300 : 0, easing: Easing.inOut(Easing.ease), useNativeDriver: false };\n    Animated.parallel([\n      Animated.timing(tabIndicatorAnimated.x, { toValue: x, ...baseConfig }),\n      Animated.timing(tabIndicatorAnimated.width, { toValue: width, ...baseConfig }),\n    ]).start();\n  };\n\n  const layoutCalculated = () => {\n    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      tabIndicatorValue.current = [];\n      tabIndicatorAnimated.x = new Animated.Value(0);\n      tabIndicatorAnimated.width = new Animated.Value(0);\n      focusedWithLayoutCalculated.current = false;\n    }\n  }, [visible]);\n\n  const renderTabs = () => {\n    return (\n      <Pressable style={styles.tabsWrapper}>\n        {reactions.map((reaction, index) => {\n          const isFocused = focusedReaction?.key === reaction.key;\n          const isLastItem = reactions.length - 1 === index;\n          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;\n                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    // re-calculating layout when screen rotation\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />\n              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>\n                {truncatedCount(getReactionCount(reaction))}\n              </Text>\n            </Pressable>\n          );\n        })}\n        <Animated.View\n          style={[\n            styles.tabIndicator,\n            {\n              start: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);\n\n    return (\n      <>\n        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {\n          if (channel?.isGroupChannel()) {\n            return (\n              <Pressable\n                key={reactedUserInfo.userId}\n                onPress={async () => {\n                  await onClose();\n                  onPressUserProfile(reactedUserInfo);\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\n        })}\n        {userCountDifference > 0 && (\n          <View style={styles.pageItem}>\n            <Text body3 color={colors.onBackground02}>\n              {STRINGS.REACTION.MORE_USERS(userCountDifference)}\n            </Text>\n          </View>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Modal\n      type={'slide-no-gesture'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },\n        ]}\n      >\n        <ScrollView\n          ref={scrollRef as never}\n          horizontal\n          bounces={false}\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}\n        >\n          {renderTabs()}\n        </ScrollView>\n        <Divider style={{ top: -1 }} />\n        <ScrollView\n          bounces={false}\n          showsVerticalScrollIndicator={false}\n          style={styles.pageContainer}\n          contentContainerStyle={containerSafeArea}\n        >\n          {renderPage()}\n        </ScrollView>\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  layout: {\n    paddingHorizontal: 16,\n    marginEnd: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    alignItems: 'center',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  tabsContainer: {\n    flexGrow: 1,\n  },\n  tabsWrapper: {\n    flexGrow: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    height: 44,\n  },\n  tabItem: {\n    marginEnd: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginEnd: 4,\n  },\n  tabIndicator: {\n    position: 'absolute',\n    bottom: 0,\n    height: 3,\n  },\n  pageContainer: {\n    height: 216,\n    width: '100%',\n  },\n  pageItem: {\n    flexDirection: 'row',\n    width: '100%',\n    height: 48,\n    alignItems: 'center',\n  },\n  avatar: {\n    marginEnd: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","I18nManager","Pressable","ScrollView","View","useWindowDimensions","Avatar","Divider","Image","Modal","Text","createStyleSheet","useUIKitTheme","getReactionCount","truncatedCount","useSafeAreaPadding","ReactionUserListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","onPressUserProfile","width","safeArea","colors","tabIndex","setTabIndex","scrollRef","undefined","tabIndicatorValue","tabIndicatorAnimated","x","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","default","reactions","focusedReaction","containerSafeArea","paddingStart","styles","layout","paddingHorizontal","paddingEnd","focusTab","index","animated","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","filter","Boolean","length","renderTabs","createElement","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginEnd","onPress","onLayout","e","indexForLayout","isRTL","nativeEvent","source","getEmojiIconSource","tabEmoji","button","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","userCountDifference","count","sampledUserInfoList","Fragment","reactedUserInfo","isGroupChannel","userId","pageItem","size","uri","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","body3","onBackground02","REACTION","MORE_USERS","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","top","showsVerticalScrollIndicator","pageContainer","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position","bottom"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdEmoji,\n  SendbirdReaction,\n  getReactionCount,\n  truncatedCount,\n  useSafeAreaPadding,\n} from '@sendbird/uikit-utils';\n\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionUserListBottomSheet = ({\n  visible,\n  onClose,\n  onDismiss,\n  reactionCtx,\n  chatCtx,\n  localizationCtx,\n  onPressUserProfile,\n}: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);\n  const { colors } = useUIKitTheme();\n\n  const [tabIndex, setTabIndex] = useState(0);\n  const scrollRef = useRef<ScrollView | undefined>(undefined);\n  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);\n  const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;\n  const focusedWithLayoutCalculated = useRef(false);\n\n  const { emojiManager } = chatCtx;\n  const { channel, message, focusIndex } = reactionCtx;\n  const { STRINGS } = localizationCtx;\n\n  const color = colors.ui.reaction.default;\n  const reactions = message?.reactions ?? [];\n  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;\n  const containerSafeArea = {\n    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,\n    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,\n  };\n\n  const focusTab = (index: number, animated = true) => {\n    const indicatorValue = tabIndicatorValue.current[index];\n    if (indicatorValue) {\n      setTabIndex(index);\n      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);\n      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });\n    }\n  };\n\n  const animateTabIndicator = (x: number, width: number, animated = true) => {\n    const baseConfig = { duration: animated ? 300 : 0, easing: Easing.inOut(Easing.ease), useNativeDriver: false };\n    Animated.parallel([\n      Animated.timing(tabIndicatorAnimated.x, { toValue: x, ...baseConfig }),\n      Animated.timing(tabIndicatorAnimated.width, { toValue: width, ...baseConfig }),\n    ]).start();\n  };\n\n  const layoutCalculated = () => {\n    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      tabIndicatorValue.current = [];\n      tabIndicatorAnimated.x = new Animated.Value(0);\n      tabIndicatorAnimated.width = new Animated.Value(0);\n      focusedWithLayoutCalculated.current = false;\n    }\n  }, [visible]);\n\n  const renderTabs = () => {\n    return (\n      <Pressable style={styles.tabsWrapper}>\n        {reactions.map((reaction, index) => {\n          const isFocused = focusedReaction?.key === reaction.key;\n          const isLastItem = reactions.length - 1 === index;\n          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;\n                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    // re-calculating layout when screen rotation\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />\n              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>\n                {truncatedCount(getReactionCount(reaction))}\n              </Text>\n            </Pressable>\n          );\n        })}\n        <Animated.View\n          style={[\n            styles.tabIndicator,\n            {\n              start: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);\n\n    return (\n      <>\n        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {\n          if (channel?.isGroupChannel()) {\n            return (\n              <Pressable\n                key={reactedUserInfo.userId}\n                onPress={async () => {\n                  await onClose();\n                  onPressUserProfile(reactedUserInfo);\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\n        })}\n        {userCountDifference > 0 && (\n          <View style={styles.pageItem}>\n            <Text body3 color={colors.onBackground02}>\n              {STRINGS.REACTION.MORE_USERS(userCountDifference)}\n            </Text>\n          </View>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Modal\n      type={'slide-no-gesture'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },\n        ]}\n      >\n        <ScrollView\n          ref={scrollRef as never}\n          horizontal\n          bounces={false}\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}\n        >\n          {renderTabs()}\n        </ScrollView>\n        <Divider style={{ top: -1 }} />\n        <ScrollView\n          bounces={false}\n          showsVerticalScrollIndicator={false}\n          style={styles.pageContainer}\n          contentContainerStyle={containerSafeArea}\n        >\n          {renderPage()}\n        </ScrollView>\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  layout: {\n    paddingHorizontal: 16,\n    marginEnd: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    alignItems: 'center',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  tabsContainer: {\n    flexGrow: 1,\n  },\n  tabsWrapper: {\n    flexGrow: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    height: 44,\n  },\n  tabItem: {\n    marginEnd: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginEnd: 4,\n  },\n  tabIndicator: {\n    position: 'absolute',\n    bottom: 0,\n    height: 3,\n  },\n  pageContainer: {\n    height: 216,\n    width: '100%',\n  },\n  pageItem: {\n    flexDirection: 'row',\n    width: '100%',\n    height: 48,\n    alignItems: 'center',\n  },\n  avatar: {\n    marginEnd: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/domain/groupChannel/component/GroupChannelMessageList.js

@@ -34,7 +34,7 @@ const GroupChannelMessageList = props => {
   const isNewLineExistInChannelRef = useRef(false);
   const scrolledAwayFromBottomRef = useRef(false);
   const [isVisibleUnreadMessageFloating, setIsVisibleUnreadMessageFloating] = useState(false);
-  const viewableMessages = useRef();
+  const viewableMessages = useRef(undefined);
   const hasUserMarkedAsUnreadRef = useRef(false);
   const [unreadFirstMessage, setUnreadFirstMessage] = useState(undefined);
   const pendingBottomReachedRef = useRef(null);
@@ -190,7 +190,7 @@ const GroupChannelMessageList = props => {
   useEffect(() => {
     isNewLineExistInChannelRef.current = !!props.isNewLineExistInChannel && !!viewableMessages.current;
   }, [props.isNewLineExistInChannel, viewableMessages.current]);
-  const unreadMessagesFloatingPropsRef = useRef();
+  const unreadMessagesFloatingPropsRef = useRef(undefined);
   const updateUnreadMessagesFloatingProps = useFreshCallback(() => {
     const canAutoMarkAsRead = !scrolledAwayFromBottomRef.current && !hasUserMarkedAsUnreadRef.current && (hasSeenNewLineRef.current || !isNewLineExistInChannelRef.current);
     unreadMessagesFloatingPropsRef.current = {