@sendbird/uikit-react-native 3.7.6 → 3.8.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","useForceUpdate","useGroupChannelHandler","getReactionCount","DEFAULT_LONG_PRESS_DELAY","UNKNOWN_USER_ID","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","getUserReacted","reaction","userId","arguments","length","undefined","userIds","indexOf","createOnPressReaction","channel","message","reacted","deleteReaction","key","addReaction","createReactionButtons","getEmoji","emojiLimit","onOpenReactionList","onOpenReactionUserList","currentUserId","reactionAddonType","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","createElement","onPress","onLongPress","delayLongPress","_ref","pressed","url","count","style","styles","marginRight","marginBottom","push","_ref2","More","MessageReactionAddon","_ref3","_message$reactions","colors","sdk","emojiManager","currentUser","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","allEmojiMap","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 { Pressable } from 'react-native';\n\nimport type { Emoji } from '@sendbird/chat';\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, UNKNOWN_USER_ID } 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 getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {\n  return reaction.userIds.indexOf(userId) > -1;\n};\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  getEmoji: (key: string) => Emoji,\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  currentUserId?: string,\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, getUserReacted(reaction, currentUserId))}\n        onLongPress={() => onOpenReactionUserList(index)}\n        delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      >\n        {({ pressed }) => (\n          <ReactionRoundedButton\n            url={getEmoji(reaction.key).url}\n            count={getReactionCount(reaction)}\n            reacted={pressed || getUserReacted(reaction, currentUserId)}\n            style={\n              reactionAddonType === 'default'\n                ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]\n                : [styles.marginRight, 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, currentUser } = 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    (key) => emojiManager.allEmojiMap[key],\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    currentUser?.userId,\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  marginRight: {\n    marginRight: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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"}
+{"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","getEmoji","emojiLimit","onOpenReactionList","onOpenReactionUserList","reactionAddonType","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","length","createElement","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","pressed","url","count","style","styles","marginEnd","marginBottom","push","More","MessageReactionAddon","_message$reactions","colors","sdk","emojiManager","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","allEmojiMap","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 { Pressable } from 'react-native';\n\nimport type { Emoji } from '@sendbird/chat';\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  getEmoji: (key: string) => Emoji,\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            url={getEmoji(reaction.key).url}\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    (key) => emojiManager.allEmojiMap[key],\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/ReactionAddons/ReactionRoundedButton.js

@@ -2,13 +2,12 @@ import React from 'react';
 import { View } from 'react-native';
 import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { truncatedCount } from '@sendbird/uikit-utils';
-const ReactionRoundedButton = _ref => {
-  let {
-    url,
-    count,
-    reacted,
-    style
-  } = _ref;
+const ReactionRoundedButton = ({
+  url,
+  count,
+  reacted,
+  style
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -29,10 +28,9 @@ const ReactionRoundedButton = _ref => {
     style: styles.count
   }, truncatedCount(count, 99, '')));
 };
-ReactionRoundedButton.More = _ref2 => {
-  let {
-    pressed
-  } = _ref2;
+ReactionRoundedButton.More = ({
+  pressed
+}) => {
   const {
     colors
   } = useUIKitTheme();
@@ -60,7 +58,7 @@ const styles = createStyleSheet({
   emoji: {
     width: 20,
     height: 20,
-    marginRight: 4
+    marginEnd: 4
   },
   count: {
     width: 13,

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","Image","Text","createStyleSheet","useUIKitTheme","truncatedCount","ReactionRoundedButton","_ref","url","count","reacted","style","colors","color","ui","reaction","rounded","createElement","styles","reactionContainer","backgroundColor","selected","background","enabled","source","uri","emoji","caption4","onBackground01","numberOfLines","More","_ref2","pressed","icon","onBackground03","size","flexDirection","justifyContent","alignItems","width","borderRadius","paddingVertical","paddingHorizontal","height","marginRight","textAlign"],"sources":["ReactionRoundedButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\ntype Props = {\n  url: string;\n  count: number;\n  reacted: boolean;\n  style: StyleProp<ViewStyle>;\n};\n\nconst ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: reacted ? color.selected.background : color.enabled.background },\n        style,\n      ]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>\n        {truncatedCount(count, 99, '')}\n      </Text>\n    </View>\n  );\n};\n\nReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n      ]}\n    >\n      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 52,\n    borderRadius: 24,\n    paddingVertical: 5,\n    paddingHorizontal: 8,\n  },\n  emoji: {\n    width: 20,\n    height: 20,\n    marginRight: 4,\n  },\n  count: {\n    width: 13,\n    textAlign: 'left',\n  },\n});\n\nexport default ReactionRoundedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,SAASC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAC5G,SAASC,cAAc,QAAQ,uBAAuB;AAStD,MAAMC,qBAAqB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC,GAAG;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAJ,IAAA;EAClE,MAAM;IAAEK;EAAO,CAAC,GAAGR,aAAa,EAAE;EAClC,MAAMS,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACElB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACHY,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEV,OAAO,GAAGG,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC,EACnFX,KAAK;EACL,gBAEFb,KAAA,CAAAmB,aAAA,CAAChB,KAAK;IAACuB,MAAM,EAAE;MAAEC,GAAG,EAAEjB;IAAI,CAAE;IAACG,KAAK,EAAEO,MAAM,CAACQ;EAAM,EAAG,eACpD5B,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAACyB,QAAQ;IAACd,KAAK,EAAED,MAAM,CAACgB,cAAe;IAACC,aAAa,EAAE,CAAE;IAAClB,KAAK,EAAEO,MAAM,CAACT;EAAM,GAChFJ,cAAc,CAACI,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CACzB,CACF;AAEX,CAAC;AAEDH,qBAAqB,CAACwB,IAAI,GAAGC,KAAA,IAAuC;EAAA,IAAtC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAC7D,MAAM;IAAEnB;EAAO,CAAC,GAAGR,aAAa,EAAE;EAClC,MAAMS,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACElB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACHY,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEY,OAAO,GAAGnB,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC;EACnF,gBAEFxB,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAACiC,IAAI,EAAE,YAAa;IAACpB,KAAK,EAAED,MAAM,CAACsB,cAAe;IAACC,IAAI,EAAE;EAAG,EAAG,CAC/D;AAEX,CAAC;AAED,MAAMjB,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,iBAAiB,EAAE;IACjBiB,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,EAAE;IACTC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDhB,KAAK,EAAE;IACLa,KAAK,EAAE,EAAE;IACTI,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE;EACf,CAAC;EACDnC,KAAK,EAAE;IACL8B,KAAK,EAAE,EAAE;IACTM,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAevC,qBAAqB"}
+{"version":3,"names":["React","View","Icon","Image","Text","createStyleSheet","useUIKitTheme","truncatedCount","ReactionRoundedButton","url","count","reacted","style","colors","color","ui","reaction","rounded","createElement","styles","reactionContainer","backgroundColor","selected","background","enabled","source","uri","emoji","caption4","onBackground01","numberOfLines","More","pressed","icon","onBackground03","size","flexDirection","justifyContent","alignItems","width","borderRadius","paddingVertical","paddingHorizontal","height","marginEnd","textAlign"],"sources":["ReactionRoundedButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\ntype Props = {\n  url: string;\n  count: number;\n  reacted: boolean;\n  style: StyleProp<ViewStyle>;\n};\n\nconst ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: reacted ? color.selected.background : color.enabled.background },\n        style,\n      ]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>\n        {truncatedCount(count, 99, '')}\n      </Text>\n    </View>\n  );\n};\n\nReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n      ]}\n    >\n      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 52,\n    borderRadius: 24,\n    paddingVertical: 5,\n    paddingHorizontal: 8,\n  },\n  emoji: {\n    width: 20,\n    height: 20,\n    marginEnd: 4,\n  },\n  count: {\n    width: 13,\n    textAlign: 'left',\n  },\n});\n\nexport default ReactionRoundedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,SAASC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAC5G,SAASC,cAAc,QAAQ,uBAAuB;AAStD,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC,GAAG;EAAEC,KAAK;EAAEC,OAAO;EAAEC;AAAa,CAAC,KAAK;EACvE,MAAM;IAAEC;EAAO,CAAC,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACEjB,KAAA,CAAAkB,aAAA,CAACjB,IAAI;IACHW,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEV,OAAO,GAAGG,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC,EACnFX,KAAK;EACL,gBAEFZ,KAAA,CAAAkB,aAAA,CAACf,KAAK;IAACsB,MAAM,EAAE;MAAEC,GAAG,EAAEjB;IAAI,CAAE;IAACG,KAAK,EAAEO,MAAM,CAACQ;EAAM,CAAE,CAAC,eACpD3B,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACwB,QAAQ;IAACd,KAAK,EAAED,MAAM,CAACgB,cAAe;IAACC,aAAa,EAAE,CAAE;IAAClB,KAAK,EAAEO,MAAM,CAACT;EAAM,GAChFH,cAAc,CAACG,KAAK,EAAE,EAAE,EAAE,EAAE,CACzB,CACF,CAAC;AAEX,CAAC;AAEDF,qBAAqB,CAACuB,IAAI,GAAG,CAAC;EAAEC;AAA8B,CAAC,KAAK;EAClE,MAAM;IAAEnB;EAAO,CAAC,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACEjB,KAAA,CAAAkB,aAAA,CAACjB,IAAI;IACHW,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEW,OAAO,GAAGlB,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC;EACnF,gBAEFvB,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IAAC+B,IAAI,EAAE,YAAa;IAACnB,KAAK,EAAED,MAAM,CAACqB,cAAe;IAACC,IAAI,EAAE;EAAG,CAAE,CAC/D,CAAC;AAEX,CAAC;AAED,MAAMhB,MAAM,GAAGd,gBAAgB,CAAC;EAC9Be,iBAAiB,EAAE;IACjBgB,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,EAAE;IACTC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDf,KAAK,EAAE;IACLY,KAAK,EAAE,EAAE;IACTI,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE;EACb,CAAC;EACDlC,KAAK,EAAE;IACL6B,KAAK,EAAE,EAAE;IACTM,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAerC,qBAAqB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["BottomSheet","Message","ReactionAddons"],"sources":["index.tsx"],"sourcesContent":["import BottomSheet from './BottomSheetReactionAddon';\nimport Message from './MessageReactionAddon';\n\nexport const ReactionAddons = {\n  BottomSheet,\n  Message,\n};\n"],"mappings":"AAAA,OAAOA,WAAW,MAAM,4BAA4B;AACpD,OAAOC,OAAO,MAAM,wBAAwB;AAE5C,OAAO,MAAMC,cAAc,GAAG;EAC5BF,WAAW;EACXC;AACF,CAAC"}
+{"version":3,"names":["BottomSheet","Message","ReactionAddons"],"sources":["index.tsx"],"sourcesContent":["import BottomSheet from './BottomSheetReactionAddon';\nimport Message from './MessageReactionAddon';\n\nexport const ReactionAddons = {\n  BottomSheet,\n  Message,\n};\n"],"mappings":"AAAA,OAAOA,WAAW,MAAM,4BAA4B;AACpD,OAAOC,OAAO,MAAM,wBAAwB;AAE5C,OAAO,MAAMC,cAAc,GAAG;EAC5BF,WAAW;EACXC;AACF,CAAC","ignoreList":[]}

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger } from '@sendbird/uikit-utils';
+import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 const NUM_COLUMN = 6;
-const ReactionListBottomSheet = _ref => {
-  let {
-    visible,
-    onClose,
-    onDismiss,
-    reactionCtx,
-    chatCtx
-  } = _ref;
+const ReactionListBottomSheet = ({
+  visible,
+  onClose,
+  onDismiss,
+  reactionCtx,
+  chatCtx
+}) => {
   const {
     width
   } = useWindowDimensions();
-  const {
-    bottom,
-    left,
-    right
-  } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   const {
     colors
   } = useUIKitTheme();
@@ -42,10 +36,10 @@ const ReactionListBottomSheet = _ref => {
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       width,
-      paddingBottom: bottom,
+      paddingBottom: safeArea.paddingBottom,
       backgroundColor: colors.ui.dialog.default.none.background,
-      paddingLeft: left + styles.container.paddingHorizontal,
-      paddingRight: right + styles.container.paddingHorizontal
+      paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
+      paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal
     }]
   }, /*#__PURE__*/React.createElement(FlatList, {
     data: emojiManager.allEmoji,
@@ -57,15 +51,14 @@ const ReactionListBottomSheet = _ref => {
         height: 16
       }
     }),
-    renderItem: _ref2 => {
-      var _message$reactions, _message$reactions$fi;
-      let {
-        item: {
-          key,
-          url
-        }
-      } = _ref2;
-      const reactedUserIds = (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.find(it => it.key === key)) === null || _message$reactions$fi === void 0 ? void 0 : _message$reactions$fi.userIds) ?? [];
+    renderItem: ({
+      item: {
+        key,
+        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, {
@@ -83,14 +76,11 @@ const ReactionListBottomSheet = _ref => {
           }
           await onClose();
         },
-        style: _ref3 => {
-          let {
-            pressed
-          } = _ref3;
-          return [styles.button, {
-            backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
-          }];
-        }
+        style: ({
+          pressed
+        }) => [styles.button, {
+          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
+        }]
       }, /*#__PURE__*/React.createElement(Image, {
         source: {
           uri: url
@@ -103,8 +93,8 @@ const ReactionListBottomSheet = _ref => {
 const styles = createStyleSheet({
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     paddingHorizontal: 18,
     flexDirection: 'row'

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

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","useSafeAreaInsets","Image","Modal","createStyleSheet","useUIKitTheme","Logger","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","_ref","visible","onClose","onDismiss","reactionCtx","chatCtx","width","bottom","left","right","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","createElement","type","Boolean","backgroundStyle","styles","modal","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingLeft","paddingHorizontal","paddingRight","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","_ref2","_message$reactions","_message$reactions$fi","url","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","onPress","action","deleteReaction","addReaction","catch","error","warn","_ref3","pressed","button","selected","enabled","source","uri","emoji","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger } 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 { bottom, left, right } = useSafeAreaInsets();\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: bottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingLeft: left + styles.container.paddingHorizontal,\n            paddingRight: right + 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    borderTopLeftRadius: 8,\n    borderTopRightRadius: 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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"}
+{"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":[]}

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

@@ -1,26 +1,20 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 import { Avatar, Divider, Image, Modal, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getReactionCount, truncatedCount } from '@sendbird/uikit-utils';
-const ReactionUserListBottomSheet = _ref => {
-  let {
-    visible,
-    onClose,
-    onDismiss,
-    reactionCtx,
-    chatCtx,
-    localizationCtx,
-    onPressUserProfile
-  } = _ref;
+import { getReactionCount, truncatedCount, useSafeAreaPadding } from '@sendbird/uikit-utils';
+const ReactionUserListBottomSheet = ({
+  visible,
+  onClose,
+  onDismiss,
+  reactionCtx,
+  chatCtx,
+  localizationCtx,
+  onPressUserProfile
+}) => {
   const {
     width
   } = useWindowDimensions();
-  const {
-    bottom,
-    left,
-    right
-  } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);
   const {
     colors
   } = useUIKitTheme();
@@ -47,24 +41,22 @@ const ReactionUserListBottomSheet = _ref => {
   const reactions = (message === null || message === void 0 ? void 0 : message.reactions) ?? [];
   const focusedReaction = reactions[tabIndex];
   const containerSafeArea = {
-    paddingLeft: left + styles.layout.paddingHorizontal,
-    paddingRight: right + styles.layout.paddingHorizontal
+    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,
+    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal
   };
-  const focusTab = function (index) {
-    let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const focusTab = (index, animated = true) => {
     const indicatorValue = tabIndicatorValue.current[index];
     if (indicatorValue) {
       var _scrollRef$current;
       setTabIndex(index);
       animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);
-      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo({
+      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
         x: indicatorValue.x,
         animated
       });
     }
   };
-  const animateTabIndicator = function (x, width) {
-    let animated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const animateTabIndicator = (x, width, animated = true) => {
     const baseConfig = {
       duration: animated ? 300 : 0,
       easing: Easing.inOut(Easing.ease),
@@ -79,7 +71,7 @@ const ReactionUserListBottomSheet = _ref => {
     })]).start();
   };
   const layoutCalculated = () => {
-    return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);
+    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;
   };
   useEffect(() => {
     if (!visible) {
@@ -99,13 +91,15 @@ const ReactionUserListBottomSheet = _ref => {
       return /*#__PURE__*/React.createElement(Pressable, {
         key: reaction.key,
         style: [styles.tabItem, isLastItem && {
-          marginRight: styles.layout.marginRight
+          marginEnd: styles.layout.marginEnd
         }],
         onPress: () => focusTab(index),
         onLayout: e => {
-          tabIndicatorValue.current[index] = e.nativeEvent.layout;
+          const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;
+          tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;
           if (layoutCalculated()) {
             if (focusedWithLayoutCalculated.current) {
+              // re-calculating layout when screen rotation
               focusTab(tabIndex, false);
             } else {
               focusedWithLayoutCalculated.current = true;
@@ -124,38 +118,41 @@ const ReactionUserListBottomSheet = _ref => {
       }, truncatedCount(getReactionCount(reaction))));
     }), /*#__PURE__*/React.createElement(Animated.View, {
       style: [styles.tabIndicator, {
-        left: tabIndicatorAnimated.x,
+        start: tabIndicatorAnimated.x,
         width: tabIndicatorAnimated.width,
         backgroundColor: color.selected.highlight
       }]
     }));
   };
   const renderPage = () => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.userIds.map(userId => {
+    const userCountDifference = ((focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.count) || 0) - ((focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.sampledUserInfoList.length) || 0);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.sampledUserInfoList.map(reactedUserInfo => {
       if (channel !== null && channel !== void 0 && channel.isGroupChannel()) {
-        const user = channel.members.find(x => x.userId === userId);
         return /*#__PURE__*/React.createElement(Pressable, {
-          key: userId,
+          key: reactedUserInfo.userId,
           onPress: async () => {
-            if (user) {
-              await onClose();
-              onPressUserProfile(user);
-            }
+            await onClose();
+            onPressUserProfile(reactedUserInfo);
           },
           style: styles.pageItem
         }, /*#__PURE__*/React.createElement(Avatar, {
           size: 36,
-          uri: user === null || user === void 0 ? void 0 : user.profileUrl,
+          uri: reactedUserInfo === null || reactedUserInfo === void 0 ? void 0 : reactedUserInfo.profileUrl,
           containerStyle: styles.avatar
         }), /*#__PURE__*/React.createElement(Text, {
           subtitle2: true,
           style: {
             flex: 1
           }
-        }, (user === null || user === void 0 ? void 0 : user.nickname) || STRINGS.LABELS.USER_NO_NAME));
+        }, (reactedUserInfo === null || reactedUserInfo === void 0 ? void 0 : reactedUserInfo.nickname) || STRINGS.LABELS.USER_NO_NAME));
       }
       return null;
-    }));
+    }), userCountDifference > 0 && /*#__PURE__*/React.createElement(View, {
+      style: styles.pageItem
+    }, /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: colors.onBackground02
+    }, STRINGS.REACTION.MORE_USERS(userCountDifference))));
   };
   return /*#__PURE__*/React.createElement(Modal, {
     type: 'slide-no-gesture',
@@ -166,7 +163,7 @@ const ReactionUserListBottomSheet = _ref => {
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       width,
-      paddingBottom: bottom,
+      paddingBottom: safeArea.paddingBottom,
       backgroundColor: colors.ui.dialog.default.none.background
     }]
   }, /*#__PURE__*/React.createElement(ScrollView, {
@@ -189,12 +186,12 @@ const ReactionUserListBottomSheet = _ref => {
 const styles = createStyleSheet({
   layout: {
     paddingHorizontal: 16,
-    marginRight: 0
+    marginEnd: 0
   },
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     alignItems: 'center'
   },
@@ -213,7 +210,7 @@ const styles = createStyleSheet({
     height: 44
   },
   tabItem: {
-    marginRight: 16,
+    marginEnd: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center'
@@ -221,7 +218,7 @@ const styles = createStyleSheet({
   tabEmoji: {
     width: 28,
     height: 28,
-    marginRight: 4
+    marginEnd: 4
   },
   tabIndicator: {
     position: 'absolute',
@@ -239,7 +236,7 @@ const styles = createStyleSheet({
     alignItems: 'center'
   },
   avatar: {
-    marginRight: 16
+    marginEnd: 16
   }
 });
 export default ReactionUserListBottomSheet;

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","Pressable","ScrollView","View","useWindowDimensions","useSafeAreaInsets","Avatar","Divider","Image","Modal","Text","createStyleSheet","useUIKitTheme","getReactionCount","truncatedCount","ReactionUserListBottomSheet","_ref","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","onPressUserProfile","width","bottom","left","right","colors","tabIndex","setTabIndex","scrollRef","tabIndicatorValue","tabIndicatorAnimated","x","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","default","reactions","focusedReaction","containerSafeArea","paddingLeft","styles","layout","paddingHorizontal","paddingRight","focusTab","index","animated","arguments","length","undefined","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","every","Boolean","renderTabs","createElement","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginRight","onPress","onLayout","e","nativeEvent","source","uri","url","tabEmoji","button","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","Fragment","userIds","userId","isGroupChannel","user","members","find","pageItem","size","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","top","showsVerticalScrollIndicator","pageContainer","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdReaction, getReactionCount, truncatedCount } 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 { bottom, left, right } = useSafeAreaInsets();\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    paddingLeft: left + styles.layout.paddingHorizontal,\n    paddingRight: right + 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.length === reactions.length && tabIndicatorValue.current.every(Boolean);\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];\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginRight: styles.layout.marginRight }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                tabIndicatorValue.current[index] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={{ uri: emoji.url }} 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              left: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    return (\n      <>\n        {focusedReaction?.userIds.map((userId) => {\n          if (channel?.isGroupChannel()) {\n            const user = channel.members.find((x) => x.userId === userId);\n            return (\n              <Pressable\n                key={userId}\n                onPress={async () => {\n                  if (user) {\n                    await onClose();\n                    onPressUserProfile(user);\n                  }\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {user?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\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: bottom, 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    marginRight: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopLeftRadius: 8,\n    borderTopRightRadius: 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    marginRight: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginRight: 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    marginRight: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":"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"}
+{"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","uri","url","tabEmoji","button","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","userCountDifference","count","sampledUserInfoList","Fragment","reactedUserInfo","isGroupChannel","userId","pageItem","size","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 { SendbirdReaction, getReactionCount, truncatedCount, useSafeAreaPadding } 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];\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={{ uri: emoji.url }} 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/components/ReactionBottomSheets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactionList","UserList","ReactionBottomSheets"],"sources":["index.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport type { LocalizationContext } from '../../contexts/LocalizationCtx';\nimport type { ReactionContext } from '../../contexts/ReactionCtx';\nimport type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';\nimport ReactionList from './ReactionListBottomSheet';\nimport UserList from './ReactionUserListBottomSheet';\n\ntype GetFromContext<T> = T extends React.Context<infer Value> ? NonNullable<Value> : never;\nexport type ReactionBottomSheetProps = {\n  visible: boolean;\n  onDismiss: () => void;\n  onClose: () => Promise<void>;\n  onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;\n  chatCtx: GetFromContext<typeof SendbirdChatContext>;\n  reactionCtx: GetFromContext<typeof ReactionContext>;\n  localizationCtx: GetFromContext<typeof LocalizationContext>;\n};\n\nexport const ReactionBottomSheets = {\n  ReactionList,\n  UserList,\n};\n"],"mappings":"AAOA,OAAOA,YAAY,MAAM,2BAA2B;AACpD,OAAOC,QAAQ,MAAM,+BAA+B;AAapD,OAAO,MAAMC,oBAAoB,GAAG;EAClCF,YAAY;EACZC;AACF,CAAC"}
+{"version":3,"names":["ReactionList","UserList","ReactionBottomSheets"],"sources":["index.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { SendbirdReactedUserInfo } from '@sendbird/uikit-utils';\n\nimport type { LocalizationContext } from '../../contexts/LocalizationCtx';\nimport type { ReactionContext } from '../../contexts/ReactionCtx';\nimport type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';\nimport ReactionList from './ReactionListBottomSheet';\nimport UserList from './ReactionUserListBottomSheet';\n\ntype GetFromContext<T> = T extends React.Context<infer Value> ? NonNullable<Value> : never;\nexport type ReactionBottomSheetProps = {\n  visible: boolean;\n  onDismiss: () => void;\n  onClose: () => Promise<void>;\n  onPressUserProfile: (user: SendbirdReactedUserInfo) => void;\n  chatCtx: GetFromContext<typeof SendbirdChatContext>;\n  reactionCtx: GetFromContext<typeof ReactionContext>;\n  localizationCtx: GetFromContext<typeof LocalizationContext>;\n};\n\nexport const ReactionBottomSheets = {\n  ReactionList,\n  UserList,\n};\n"],"mappings":"AAOA,OAAOA,YAAY,MAAM,2BAA2B;AACpD,OAAOC,QAAQ,MAAM,+BAA+B;AAapD,OAAO,MAAMC,oBAAoB,GAAG;EAClCF,YAAY;EACZC;AACF,CAAC","ignoreList":[]}

package/lib/module/components/ScrollToBottomButton.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-const ScrollToBottomButton = _ref => {
-  let {
-    visible,
-    onPress
-  } = _ref;
+const ScrollToBottomButton = ({
+  visible,
+  onPress
+}) => {
   const {
     palette,
     select