stream-chat-react-native-core 5.18.0-beta.3 → 5.18.0-beta.5

package/lib/module/components/MessageOverlay/OverlayReactions.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OverlayReactions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
@@ -64,6 +65,10 @@ var styles = _reactNative.StyleSheet.create({
     fontSize: 16,
     fontWeight: '700',
     paddingTop: 16
+  },
+  unseenItemContainer: {
+    opacity: 0,
+    position: 'absolute'
   }
 });
 var reactionData = [{
@@ -98,7 +103,7 @@ var ReactionIcon = function ReactionIcon(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 127,
       columnNumber: 10
     }
   });
@@ -113,6 +118,10 @@ var OverlayReactions = function OverlayReactions(props) {
     OverlayReactionsAvatar = props.OverlayReactionsAvatar;
   var layoutHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   var layoutWidth = (0, _reactNativeReanimated.useSharedValue)(0);
+  var _React$useState = _react["default"].useState(0),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    itemHeight = _React$useState2[0],
+    setItemHeight = _React$useState2[1];
   var _useTheme = (0, _ThemeContext.useTheme)(),
     _useTheme$theme = _useTheme.theme,
     _useTheme$theme$color = _useTheme$theme.colors,
@@ -133,7 +142,6 @@ var OverlayReactions = function OverlayReactions(props) {
     reactionBubbleBackground = _useTheme$theme$overl2.reactionBubbleBackground,
     titleStyle = _useTheme$theme$overl2.title;
   var width = (0, _reactNative.useWindowDimensions)().width;
-  var height = (0, _reactNative.useWindowDimensions)().height;
   var supportedReactionTypes = supportedReactions.map(function (supportedReaction) {
     return supportedReaction.type;
   });
@@ -141,7 +149,6 @@ var OverlayReactions = function OverlayReactions(props) {
     return supportedReactionTypes.includes(reaction.type);
   });
   var numColumns = Math.floor((width - overlayPadding * 2 - ((Number(flatListContainer.paddingHorizontal || 0) || styles.flatListContainer.paddingHorizontal) + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) * 2) / (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2));
-  var maxHeight = Math.floor(height - overlayPadding * 2 - ((Number(flatListContainer.paddingVertical || 0) || styles.flatListContainer.paddingVertical) + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) * 2);
   var renderItem = function renderItem(_ref2) {
     var item = _ref2.item;
     var _item$alignment = item.alignment,
@@ -157,7 +164,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 208,
+        lineNumber: 204,
         columnNumber: 7
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -165,7 +172,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 209,
+        lineNumber: 205,
         columnNumber: 9
       }
     }, _react["default"].createElement(OverlayReactionsAvatar, {
@@ -174,7 +181,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 210,
+        lineNumber: 206,
         columnNumber: 11
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -182,14 +189,14 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 211,
+        lineNumber: 207,
         columnNumber: 11
       }
     }, _react["default"].createElement(_reactNativeSvg["default"], {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 212,
+        lineNumber: 208,
         columnNumber: 13
       }
     }, _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -202,7 +209,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 213,
+        lineNumber: 209,
         columnNumber: 15
       }
     }), _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -215,7 +222,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 221,
+        lineNumber: 217,
         columnNumber: 15
       }
     })), _react["default"].createElement(_reactNative.View, {
@@ -229,7 +236,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 230,
+        lineNumber: 226,
         columnNumber: 13
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -237,14 +244,14 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 243,
+        lineNumber: 239,
         columnNumber: 13
       }
     }, _react["default"].createElement(_reactNativeSvg["default"], {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 244,
+        lineNumber: 240,
         columnNumber: 15
       }
     }, _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -255,7 +262,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 245,
+        lineNumber: 241,
         columnNumber: 17
       }
     }))), _react["default"].createElement(_reactNative.View, {
@@ -269,7 +276,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 253,
+        lineNumber: 249,
         columnNumber: 13
       }
     }, _react["default"].createElement(ReactionIcon, {
@@ -280,7 +287,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 270,
+        lineNumber: 266,
         columnNumber: 15
       }
     })))), _react["default"].createElement(_reactNative.View, {
@@ -288,7 +295,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 279,
+        lineNumber: 275,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.Text, {
@@ -298,7 +305,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 280,
+        lineNumber: 276,
         columnNumber: 11
       }
     }, name)));
@@ -314,20 +321,21 @@ var OverlayReactions = function OverlayReactions(props) {
       }]
     };
   }, [overlayAlignment]);
-  return _react["default"].createElement(_reactNativeReanimated["default"].View, {
+  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     onLayout: function onLayout(_ref3) {
       var layout = _ref3.nativeEvent.layout;
       layoutWidth.value = layout.width;
       layoutHeight.value = layout.height;
     },
     style: [styles.container, {
-      backgroundColor: white
+      backgroundColor: white,
+      opacity: itemHeight ? 1 : 0
     }, container, showScreenStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 308,
-      columnNumber: 5
+      lineNumber: 305,
+      columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.Text, {
     style: [styles.title, {
@@ -336,12 +344,13 @@ var OverlayReactions = function OverlayReactions(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 315,
-      columnNumber: 7
+      lineNumber: 317,
+      columnNumber: 9
     }
   }, title), _react["default"].createElement(_reactNativeGestureHandler.FlatList, {
     contentContainerStyle: styles.flatListContentContainer,
     data: filteredReactions,
+    key: numColumns,
     keyExtractor: function keyExtractor(_ref4, index) {
       var name = _ref4.name;
       return name + "_" + index;
@@ -349,15 +358,29 @@ var OverlayReactions = function OverlayReactions(props) {
     numColumns: numColumns,
     renderItem: renderItem,
     style: [styles.flatListContainer, flatListContainer, {
-      maxHeight: maxHeight / numColumns
+      maxHeight: itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 8 : 0)
     }],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 316,
-      columnNumber: 7
+      lineNumber: 318,
+      columnNumber: 9
+    }
+  }), _react["default"].createElement(_reactNative.View, {
+    onLayout: function onLayout(_ref5) {
+      var layout = _ref5.nativeEvent.layout;
+      setItemHeight(layout.height);
+    },
+    style: [styles.unseenItemContainer, styles.flatListContentContainer],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 336,
+      columnNumber: 9
     }
-  }));
+  }, renderItem({
+    item: filteredReactions[0]
+  }))));
 };
 exports.OverlayReactions = OverlayReactions;
 OverlayReactions.displayName = 'OverlayReactions{overlay{reactions}}';

package/lib/module/components/MessageOverlay/OverlayReactions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_ThemeContext","_icons","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","avatarContainer","padding","avatarInnerContainer","alignSelf","avatarName","flex","fontSize","fontWeight","paddingTop","textAlign","avatarNameContainer","alignItems","flexDirection","flexGrow","container","borderRadius","marginTop","width","flatListContainer","paddingHorizontal","paddingVertical","flatListContentContainer","paddingBottom","reactionBubble","justifyContent","position","reactionBubbleBackground","height","title","reactionData","Icon","LoveReaction","type","ThumbsUpReaction","ThumbsDownReaction","LOLReaction","WutReaction","ReactionIcon","_ref","_supportedReactions$f","pathFill","size","supportedReactions","find","reaction","Unknown","createElement","__self","__source","fileName","lineNumber","columnNumber","OverlayReactions","props","overlayAlignment","alignment","reactions","_props$supportedReact","showScreen","OverlayReactionsAvatar","layoutHeight","useSharedValue","layoutWidth","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","accent_blue","black","grey_gainsboro","white","_useTheme$theme$overl","overlay","overlayPadding","_useTheme$theme$overl2","avatarSize","radius","titleStyle","useWindowDimensions","supportedReactionTypes","map","supportedReaction","filteredReactions","filter","includes","numColumns","Math","floor","Number","maxHeight","renderItem","_ref2","item","_item$alignment","name","x","y","left","top","View","style","absoluteFill","Circle","cx","cy","fill","r","stroke","strokeWidth","backgroundColor","borderColor","borderWidth","Text","color","showScreenStyle","useAnimatedStyle","transform","translateY","interpolate","value","translateX","scale","onLayout","_ref3","layout","nativeEvent","FlatList","contentContainerStyle","data","keyExtractor","_ref4","index","exports","displayName"],"sources":["OverlayReactions.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport { FlatList } from 'react-native-gesture-handler';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport type { Alignment } from '../../contexts/messageContext/MessageContext';\nimport type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  LOLReaction,\n  LoveReaction,\n  ThumbsDownReaction,\n  ThumbsUpReaction,\n  Unknown,\n  WutReaction,\n} from '../../icons';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { ReactionData } from '../../utils/utils';\n\nconst styles = StyleSheet.create({\n  avatarContainer: {\n    padding: 8,\n  },\n  avatarInnerContainer: {\n    alignSelf: 'center',\n  },\n  avatarName: {\n    flex: 1,\n    fontSize: 12,\n    fontWeight: '700',\n    paddingTop: 6,\n    textAlign: 'center',\n  },\n  avatarNameContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexGrow: 1,\n  },\n  container: {\n    alignItems: 'center',\n    borderRadius: 16,\n    marginTop: 8,\n    width: '100%',\n  },\n  flatListContainer: {\n    paddingHorizontal: 12,\n    paddingVertical: 8,\n  },\n  flatListContentContainer: {\n    alignItems: 'center',\n    paddingBottom: 12,\n  },\n  reactionBubble: {\n    alignItems: 'center',\n    borderRadius: 24,\n    justifyContent: 'center',\n    position: 'absolute',\n  },\n  reactionBubbleBackground: {\n    borderRadius: 24,\n    height: 24,\n    position: 'absolute',\n    width: 24,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: '700',\n    paddingTop: 16,\n  },\n});\n\nconst reactionData: ReactionData[] = [\n  {\n    Icon: LoveReaction,\n    type: 'love',\n  },\n  {\n    Icon: ThumbsUpReaction,\n    type: 'like',\n  },\n  {\n    Icon: ThumbsDownReaction,\n    type: 'sad',\n  },\n  {\n    Icon: LOLReaction,\n    type: 'haha',\n  },\n  {\n    Icon: WutReaction,\n    type: 'wow',\n  },\n];\n\nexport type Reaction = {\n  alignment: Alignment;\n  id: string;\n  name: string;\n  type: string;\n  image?: string;\n};\n\nexport type OverlayReactionsProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {\n  reactions: Reaction[];\n  showScreen: Animated.SharedValue<number>;\n  title: string;\n  alignment?: Alignment;\n  supportedReactions?: ReactionData[];\n};\n\nconst ReactionIcon: React.FC<\n  Pick<Reaction, 'type'> & {\n    pathFill: string;\n    size: number;\n    supportedReactions: ReactionData[];\n  }\n> = ({ pathFill, size, supportedReactions, type }) => {\n  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;\n  return <Icon height={size} pathFill={pathFill} width={size} />;\n};\n\n/**\n * OverlayReactions - A high level component which implements all the logic required for message overlay reactions\n */\nexport const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {\n  const {\n    alignment: overlayAlignment,\n    reactions,\n    supportedReactions = reactionData,\n    showScreen,\n    title,\n    OverlayReactionsAvatar,\n  } = props;\n  const layoutHeight = useSharedValue(0);\n  const layoutWidth = useSharedValue(0);\n\n  const {\n    theme: {\n      colors: { accent_blue, black, grey_gainsboro, white },\n      overlay: {\n        padding: overlayPadding,\n        reactions: {\n          avatarContainer,\n          avatarName,\n          avatarSize,\n          container,\n          flatListContainer,\n          radius,\n          reactionBubble,\n          reactionBubbleBackground,\n          title: titleStyle,\n        },\n      },\n    },\n  } = useTheme();\n\n  const width = useWindowDimensions().width;\n  const height = useWindowDimensions().height;\n\n  const supportedReactionTypes = supportedReactions.map(\n    (supportedReaction) => supportedReaction.type,\n  );\n\n  const filteredReactions = reactions.filter((reaction) =>\n    supportedReactionTypes.includes(reaction.type),\n  );\n\n  const numColumns = Math.floor(\n    (width -\n      overlayPadding * 2 -\n      ((Number(flatListContainer.paddingHorizontal || 0) ||\n        styles.flatListContainer.paddingHorizontal) +\n        (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) *\n        2) /\n      (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2),\n  );\n\n  const maxHeight = Math.floor(\n    height -\n      overlayPadding * 2 -\n      ((Number(flatListContainer.paddingVertical || 0) ||\n        styles.flatListContainer.paddingVertical) +\n        (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) *\n        2,\n  );\n\n  const renderItem = ({ item }: { item: Reaction }) => {\n    const { alignment = 'left', name, type } = item;\n    const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);\n    const y = avatarSize - radius;\n\n    const left =\n      alignment === 'left'\n        ? x -\n          (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +\n          radius\n        : x - radius;\n    const top =\n      y -\n      radius -\n      (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);\n\n    return (\n      <View style={[styles.avatarContainer, avatarContainer]}>\n        <View style={styles.avatarInnerContainer}>\n          <OverlayReactionsAvatar reaction={item} size={avatarSize} />\n          <View style={[StyleSheet.absoluteFill]}>\n            <Svg>\n              <Circle\n                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}\n                cy={y - radius * 2 - radius / 4}\n                fill={alignment === 'left' ? grey_gainsboro : white}\n                r={radius * 2}\n                stroke={alignment === 'left' ? white : grey_gainsboro}\n                strokeWidth={radius / 2}\n              />\n              <Circle\n                cx={x}\n                cy={y}\n                fill={alignment === 'left' ? grey_gainsboro : white}\n                r={radius}\n                stroke={alignment === 'left' ? white : grey_gainsboro}\n                strokeWidth={radius / 2}\n              />\n            </Svg>\n            <View\n              style={[\n                styles.reactionBubbleBackground,\n                {\n                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,\n                  borderColor: alignment === 'left' ? white : grey_gainsboro,\n                  borderWidth: radius / 2,\n                  left,\n                  top,\n                },\n                reactionBubbleBackground,\n              ]}\n            />\n            <View style={[StyleSheet.absoluteFill]}>\n              <Svg>\n                <Circle\n                  cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}\n                  cy={y - radius * 2 - radius / 4}\n                  fill={alignment === 'left' ? grey_gainsboro : white}\n                  r={radius * 2 - radius / 2}\n                />\n              </Svg>\n            </View>\n            <View\n              style={[\n                styles.reactionBubble,\n                {\n                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,\n                  height:\n                    (reactionBubble.borderRadius || styles.reactionBubble.borderRadius) -\n                    radius / 2,\n                  left,\n                  top,\n                  width:\n                    (reactionBubble.borderRadius || styles.reactionBubble.borderRadius) -\n                    radius / 2,\n                },\n                reactionBubble,\n              ]}\n            >\n              <ReactionIcon\n                pathFill={accent_blue}\n                size={(reactionBubble.borderRadius || styles.reactionBubble.borderRadius) / 2}\n                supportedReactions={supportedReactions}\n                type={type}\n              />\n            </View>\n          </View>\n        </View>\n        <View style={styles.avatarNameContainer}>\n          <Text style={[styles.avatarName, { color: black }, avatarName]}>{name}</Text>\n        </View>\n      </View>\n    );\n  };\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-layoutHeight.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [overlayAlignment === 'left' ? -layoutWidth.value / 2 : layoutWidth.value / 2, 0],\n          ),\n        },\n        {\n          scale: showScreen.value,\n        },\n      ],\n    }),\n    [overlayAlignment],\n  );\n\n  return (\n    <Animated.View\n      onLayout={({ nativeEvent: { layout } }) => {\n        layoutWidth.value = layout.width;\n        layoutHeight.value = layout.height;\n      }}\n      style={[styles.container, { backgroundColor: white }, container, showScreenStyle]}\n    >\n      <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>\n      <FlatList\n        contentContainerStyle={styles.flatListContentContainer}\n        data={filteredReactions}\n        keyExtractor={({ name }, index) => `${name}_${index}`}\n        numColumns={numColumns}\n        renderItem={renderItem}\n        style={[styles.flatListContainer, flatListContainer, { maxHeight: maxHeight / numColumns }]}\n      />\n    </Animated.View>\n  );\n};\n\nOverlayReactions.displayName = 'OverlayReactions{overlay{reactions}}';\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_ThemeContext","_icons","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","avatarContainer","padding","avatarInnerContainer","alignSelf","avatarName","flex","fontSize","fontWeight","paddingTop","textAlign","avatarNameContainer","alignItems","flexDirection","flexGrow","container","borderRadius","marginTop","width","flatListContainer","paddingHorizontal","paddingVertical","flatListContentContainer","paddingBottom","reactionBubble","justifyContent","position","reactionBubbleBackground","height","title","unseenItemContainer","opacity","reactionData","Icon","LoveReaction","type","ThumbsUpReaction","ThumbsDownReaction","LOLReaction","WutReaction","ReactionIcon","_ref","_supportedReactions$f","pathFill","size","supportedReactions","find","reaction","Unknown","createElement","__self","__source","fileName","lineNumber","columnNumber","OverlayReactions","props","overlayAlignment","alignment","reactions","_props$supportedReact","showScreen","OverlayReactionsAvatar","layoutHeight","useSharedValue","layoutWidth","_React$useState","React","useState","_React$useState2","_slicedToArray2","itemHeight","setItemHeight","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","accent_blue","black","grey_gainsboro","white","_useTheme$theme$overl","overlay","overlayPadding","_useTheme$theme$overl2","avatarSize","radius","titleStyle","useWindowDimensions","supportedReactionTypes","map","supportedReaction","filteredReactions","filter","includes","numColumns","Math","floor","Number","renderItem","_ref2","item","_item$alignment","name","x","y","left","top","View","style","absoluteFill","Circle","cx","cy","fill","r","stroke","strokeWidth","backgroundColor","borderColor","borderWidth","Text","color","showScreenStyle","useAnimatedStyle","transform","translateY","interpolate","value","translateX","scale","Fragment","onLayout","_ref3","layout","nativeEvent","FlatList","contentContainerStyle","data","keyExtractor","_ref4","index","maxHeight","length","_ref5","exports","displayName"],"sources":["OverlayReactions.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport { FlatList } from 'react-native-gesture-handler';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport type { Alignment } from '../../contexts/messageContext/MessageContext';\nimport type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  LOLReaction,\n  LoveReaction,\n  ThumbsDownReaction,\n  ThumbsUpReaction,\n  Unknown,\n  WutReaction,\n} from '../../icons';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { ReactionData } from '../../utils/utils';\n\nconst styles = StyleSheet.create({\n  avatarContainer: {\n    padding: 8,\n  },\n  avatarInnerContainer: {\n    alignSelf: 'center',\n  },\n  avatarName: {\n    flex: 1,\n    fontSize: 12,\n    fontWeight: '700',\n    paddingTop: 6,\n    textAlign: 'center',\n  },\n  avatarNameContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexGrow: 1,\n  },\n  container: {\n    alignItems: 'center',\n    borderRadius: 16,\n    marginTop: 8,\n    width: '100%',\n  },\n  flatListContainer: {\n    paddingHorizontal: 12,\n    paddingVertical: 8,\n  },\n  flatListContentContainer: {\n    alignItems: 'center',\n    paddingBottom: 12,\n  },\n  reactionBubble: {\n    alignItems: 'center',\n    borderRadius: 24,\n    justifyContent: 'center',\n    position: 'absolute',\n  },\n  reactionBubbleBackground: {\n    borderRadius: 24,\n    height: 24,\n    position: 'absolute',\n    width: 24,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: '700',\n    paddingTop: 16,\n  },\n  unseenItemContainer: {\n    opacity: 0,\n    position: 'absolute',\n  },\n});\n\nconst reactionData: ReactionData[] = [\n  {\n    Icon: LoveReaction,\n    type: 'love',\n  },\n  {\n    Icon: ThumbsUpReaction,\n    type: 'like',\n  },\n  {\n    Icon: ThumbsDownReaction,\n    type: 'sad',\n  },\n  {\n    Icon: LOLReaction,\n    type: 'haha',\n  },\n  {\n    Icon: WutReaction,\n    type: 'wow',\n  },\n];\n\nexport type Reaction = {\n  alignment: Alignment;\n  id: string;\n  name: string;\n  type: string;\n  image?: string;\n};\n\nexport type OverlayReactionsProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {\n  reactions: Reaction[];\n  showScreen: Animated.SharedValue<number>;\n  title: string;\n  alignment?: Alignment;\n  supportedReactions?: ReactionData[];\n};\n\nconst ReactionIcon: React.FC<\n  Pick<Reaction, 'type'> & {\n    pathFill: string;\n    size: number;\n    supportedReactions: ReactionData[];\n  }\n> = ({ pathFill, size, supportedReactions, type }) => {\n  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;\n  return <Icon height={size} pathFill={pathFill} width={size} />;\n};\n\n/**\n * OverlayReactions - A high level component which implements all the logic required for message overlay reactions\n */\nexport const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {\n  const {\n    alignment: overlayAlignment,\n    reactions,\n    supportedReactions = reactionData,\n    showScreen,\n    title,\n    OverlayReactionsAvatar,\n  } = props;\n  const layoutHeight = useSharedValue(0);\n  const layoutWidth = useSharedValue(0);\n\n  const [itemHeight, setItemHeight] = React.useState(0);\n\n  const {\n    theme: {\n      colors: { accent_blue, black, grey_gainsboro, white },\n      overlay: {\n        padding: overlayPadding,\n        reactions: {\n          avatarContainer,\n          avatarName,\n          avatarSize,\n          container,\n          flatListContainer,\n          radius,\n          reactionBubble,\n          reactionBubbleBackground,\n          title: titleStyle,\n        },\n      },\n    },\n  } = useTheme();\n\n  const width = useWindowDimensions().width;\n\n  const supportedReactionTypes = supportedReactions.map(\n    (supportedReaction) => supportedReaction.type,\n  );\n\n  const filteredReactions = reactions.filter((reaction) =>\n    supportedReactionTypes.includes(reaction.type),\n  );\n\n  const numColumns = Math.floor(\n    (width -\n      overlayPadding * 2 -\n      ((Number(flatListContainer.paddingHorizontal || 0) ||\n        styles.flatListContainer.paddingHorizontal) +\n        (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) *\n        2) /\n      (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2),\n  );\n\n  const renderItem = ({ item }: { item: Reaction }) => {\n    const { alignment = 'left', name, type } = item;\n    const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);\n    const y = avatarSize - radius;\n\n    const left =\n      alignment === 'left'\n        ? x -\n          (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +\n          radius\n        : x - radius;\n    const top =\n      y -\n      radius -\n      (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);\n\n    return (\n      <View style={[styles.avatarContainer, avatarContainer]}>\n        <View style={styles.avatarInnerContainer}>\n          <OverlayReactionsAvatar reaction={item} size={avatarSize} />\n          <View style={[StyleSheet.absoluteFill]}>\n            <Svg>\n              <Circle\n                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}\n                cy={y - radius * 2 - radius / 4}\n                fill={alignment === 'left' ? grey_gainsboro : white}\n                r={radius * 2}\n                stroke={alignment === 'left' ? white : grey_gainsboro}\n                strokeWidth={radius / 2}\n              />\n              <Circle\n                cx={x}\n                cy={y}\n                fill={alignment === 'left' ? grey_gainsboro : white}\n                r={radius}\n                stroke={alignment === 'left' ? white : grey_gainsboro}\n                strokeWidth={radius / 2}\n              />\n            </Svg>\n            <View\n              style={[\n                styles.reactionBubbleBackground,\n                {\n                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,\n                  borderColor: alignment === 'left' ? white : grey_gainsboro,\n                  borderWidth: radius / 2,\n                  left,\n                  top,\n                },\n                reactionBubbleBackground,\n              ]}\n            />\n            <View style={[StyleSheet.absoluteFill]}>\n              <Svg>\n                <Circle\n                  cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}\n                  cy={y - radius * 2 - radius / 4}\n                  fill={alignment === 'left' ? grey_gainsboro : white}\n                  r={radius * 2 - radius / 2}\n                />\n              </Svg>\n            </View>\n            <View\n              style={[\n                styles.reactionBubble,\n                {\n                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,\n                  height:\n                    (reactionBubble.borderRadius || styles.reactionBubble.borderRadius) -\n                    radius / 2,\n                  left,\n                  top,\n                  width:\n                    (reactionBubble.borderRadius || styles.reactionBubble.borderRadius) -\n                    radius / 2,\n                },\n                reactionBubble,\n              ]}\n            >\n              <ReactionIcon\n                pathFill={accent_blue}\n                size={(reactionBubble.borderRadius || styles.reactionBubble.borderRadius) / 2}\n                supportedReactions={supportedReactions}\n                type={type}\n              />\n            </View>\n          </View>\n        </View>\n        <View style={styles.avatarNameContainer}>\n          <Text style={[styles.avatarName, { color: black }, avatarName]}>{name}</Text>\n        </View>\n      </View>\n    );\n  };\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-layoutHeight.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [overlayAlignment === 'left' ? -layoutWidth.value / 2 : layoutWidth.value / 2, 0],\n          ),\n        },\n        {\n          scale: showScreen.value,\n        },\n      ],\n    }),\n    [overlayAlignment],\n  );\n\n  return (\n    <>\n      <Animated.View\n        onLayout={({ nativeEvent: { layout } }) => {\n          layoutWidth.value = layout.width;\n          layoutHeight.value = layout.height;\n        }}\n        style={[\n          styles.container,\n          { backgroundColor: white, opacity: itemHeight ? 1 : 0 },\n          container,\n          showScreenStyle,\n        ]}\n      >\n        <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>\n        <FlatList\n          contentContainerStyle={styles.flatListContentContainer}\n          data={filteredReactions}\n          key={numColumns}\n          keyExtractor={({ name }, index) => `${name}_${index}`}\n          numColumns={numColumns}\n          renderItem={renderItem}\n          style={[\n            styles.flatListContainer,\n            flatListContainer,\n            {\n              // we show the item height plus a little extra to tease for scrolling if there are more than one row\n              maxHeight:\n                itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 8 : 0),\n            },\n          ]}\n        />\n        {/* The below view is unseen by the user, we use it to compute the height that the item must be */}\n        <View\n          onLayout={({ nativeEvent: { layout } }) => {\n            setItemHeight(layout.height);\n          }}\n          style={[styles.unseenItemContainer, styles.flatListContentContainer]}\n        >\n          {renderItem({ item: filteredReactions[0] })}\n        </View>\n      </Animated.View>\n    </>\n  );\n};\n\nOverlayReactions.displayName = 'OverlayReactions{overlay{reactions}}';\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAD,uBAAA,CAAAJ,OAAA;AAIA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAOqB,IAAAQ,KAAA;EAAAC,YAAA;AAAA,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAP,wBAAAW,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,cAAAN,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAKrB,IAAMW,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,OAAO,EAAE;EACX,CAAC;EACDC,oBAAoB,EAAE;IACpBC,SAAS,EAAE;EACb,CAAC;EACDC,UAAU,EAAE;IACVC,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE;EACb,CAAC;EACDC,mBAAmB,EAAE;IACnBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDC,SAAS,EAAE;IACTH,UAAU,EAAE,QAAQ;IACpBI,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE,CAAC;IACZC,KAAK,EAAE;EACT,CAAC;EACDC,iBAAiB,EAAE;IACjBC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDC,wBAAwB,EAAE;IACxBV,UAAU,EAAE,QAAQ;IACpBW,aAAa,EAAE;EACjB,CAAC;EACDC,cAAc,EAAE;IACdZ,UAAU,EAAE,QAAQ;IACpBI,YAAY,EAAE,EAAE;IAChBS,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE;EACZ,CAAC;EACDC,wBAAwB,EAAE;IACxBX,YAAY,EAAE,EAAE;IAChBY,MAAM,EAAE,EAAE;IACVF,QAAQ,EAAE,UAAU;IACpBR,KAAK,EAAE;EACT,CAAC;EACDW,KAAK,EAAE;IACLtB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE;EACd,CAAC;EACDqB,mBAAmB,EAAE;IACnBC,OAAO,EAAE,CAAC;IACVL,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,IAAMM,YAA4B,GAAG,CACnC;EACEC,IAAI,EAAEC,mBAAY;EAClBC,IAAI,EAAE;AACR,CAAC,EACD;EACEF,IAAI,EAAEG,uBAAgB;EACtBD,IAAI,EAAE;AACR,CAAC,EACD;EACEF,IAAI,EAAEI,yBAAkB;EACxBF,IAAI,EAAE;AACR,CAAC,EACD;EACEF,IAAI,EAAEK,kBAAW;EACjBH,IAAI,EAAE;AACR,CAAC,EACD;EACEF,IAAI,EAAEM,kBAAW;EACjBJ,IAAI,EAAE;AACR,CAAC,CACF;AAoBD,IAAMK,YAML,GAAG,SANEA,YAMLA,CAAAC,IAAA,EAAqD;EAAA,IAAAC,qBAAA;EAAA,IAA/CC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAAEV,IAAI,GAAAM,IAAA,CAAJN,IAAI;EAC7C,IAAMF,IAAI,GAAG,EAAAS,qBAAA,GAAAG,kBAAkB,CAACC,IAAI,CAAC,UAACC,QAAQ;IAAA,OAAKA,QAAQ,CAACZ,IAAI,KAAKA,IAAI;EAAA,EAAC,qBAA7DO,qBAAA,CAA+DT,IAAI,KAAIe,cAAO;EAC3F,OAAOpF,MAAA,YAAAqF,aAAA,CAAChB,IAAI;IAACL,MAAM,EAAEgB,IAAK;IAACD,QAAQ,EAAEA,QAAS;IAACzB,KAAK,EAAE0B,IAAK;IAAAM,MAAA,EAAA5E,KAAA;IAAA6E,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC;AAChE,CAAC;AAKM,IAAMC,gBAAiD,GAAG,SAApDA,gBAAiDA,CAAIC,KAAK,EAAK;EAC1E,IACaC,gBAAgB,GAMzBD,KAAK,CANPE,SAAS;IACTC,SAAS,GAKPH,KAAK,CALPG,SAAS;IAAAC,qBAAA,GAKPJ,KAAK,CAJPX,kBAAkB;IAAlBA,kBAAkB,GAAAe,qBAAA,cAAG5B,YAAY,GAAA4B,qBAAA;IACjCC,UAAU,GAGRL,KAAK,CAHPK,UAAU;IACVhC,KAAK,GAEH2B,KAAK,CAFP3B,KAAK;IACLiC,sBAAsB,GACpBN,KAAK,CADPM,sBAAsB;EAExB,IAAMC,YAAY,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACtC,IAAMC,WAAW,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAErC,IAAAE,eAAA,GAAoCC,iBAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAJ,eAAA;IAA9CK,UAAU,GAAAF,gBAAA;IAAEG,aAAa,GAAAH,gBAAA;EAEhC,IAAAI,SAAA,GAkBI,IAAAC,sBAAQ,EAAC,CAAC;IAAAC,eAAA,GAAAF,SAAA,CAjBZG,KAAK;IAAAC,qBAAA,GAAAF,eAAA,CACHG,MAAM;IAAIC,WAAW,GAAAF,qBAAA,CAAXE,WAAW;IAAEC,KAAK,GAAAH,qBAAA,CAALG,KAAK;IAAEC,cAAc,GAAAJ,qBAAA,CAAdI,cAAc;IAAEC,KAAK,GAAAL,qBAAA,CAALK,KAAK;IAAAC,qBAAA,GAAAR,eAAA,CACnDS,OAAO;IACIC,cAAc,GAAAF,qBAAA,CAAvBjF,OAAO;IAAAoF,sBAAA,GAAAH,qBAAA,CACPxB,SAAS;IACP1D,eAAe,GAAAqF,sBAAA,CAAfrF,eAAe;IACfI,UAAU,GAAAiF,sBAAA,CAAVjF,UAAU;IACVkF,UAAU,GAAAD,sBAAA,CAAVC,UAAU;IACVxE,SAAS,GAAAuE,sBAAA,CAATvE,SAAS;IACTI,iBAAiB,GAAAmE,sBAAA,CAAjBnE,iBAAiB;IACjBqE,MAAM,GAAAF,sBAAA,CAANE,MAAM;IACNhE,cAAc,GAAA8D,sBAAA,CAAd9D,cAAc;IACdG,wBAAwB,GAAA2D,sBAAA,CAAxB3D,wBAAwB;IACjB8D,UAAU,GAAAH,sBAAA,CAAjBzD,KAAK;EAMb,IAAMX,KAAK,GAAG,IAAAwE,gCAAmB,EAAC,CAAC,CAACxE,KAAK;EAEzC,IAAMyE,sBAAsB,GAAG9C,kBAAkB,CAAC+C,GAAG,CACnD,UAACC,iBAAiB;IAAA,OAAKA,iBAAiB,CAAC1D,IAAI;EAAA,CAC/C,CAAC;EAED,IAAM2D,iBAAiB,GAAGnC,SAAS,CAACoC,MAAM,CAAC,UAAChD,QAAQ;IAAA,OAClD4C,sBAAsB,CAACK,QAAQ,CAACjD,QAAQ,CAACZ,IAAI,CAAC;EAAA,CAChD,CAAC;EAED,IAAM8D,UAAU,GAAGC,IAAI,CAACC,KAAK,CAC3B,CAACjF,KAAK,GACJmE,cAAc,GAAG,CAAC,GAClB,CAAC,CAACe,MAAM,CAACjF,iBAAiB,CAACC,iBAAiB,IAAI,CAAC,CAAC,IAChDtB,MAAM,CAACqB,iBAAiB,CAACC,iBAAiB,KACzCgF,MAAM,CAACnG,eAAe,CAACC,OAAO,IAAI,CAAC,CAAC,IAAIJ,MAAM,CAACG,eAAe,CAACC,OAAO,CAAC,IACxE,CAAC,KACFqF,UAAU,GAAG,CAACa,MAAM,CAACnG,eAAe,CAACC,OAAO,IAAI,CAAC,CAAC,IAAIJ,MAAM,CAACG,eAAe,CAACC,OAAO,IAAI,CAAC,CAC9F,CAAC;EAED,IAAMmG,UAAU,GAAG,SAAbA,UAAUA,CAAAC,KAAA,EAAqC;IAAA,IAA/BC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IACxB,IAAAC,eAAA,GAA2CD,IAAI,CAAvC7C,SAAS;MAATA,SAAS,GAAA8C,eAAA,cAAG,MAAM,GAAAA,eAAA;MAAEC,IAAI,GAAWF,IAAI,CAAnBE,IAAI;MAAEtE,IAAI,GAAKoE,IAAI,CAAbpE,IAAI;IACtC,IAAMuE,CAAC,GAAGnB,UAAU,GAAG,CAAC,GAAIA,UAAU,IAAIC,MAAM,GAAG,CAAC,CAAC,IAAK9B,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACxF,IAAMiD,CAAC,GAAGpB,UAAU,GAAGC,MAAM;IAE7B,IAAMoB,IAAI,GACRlD,SAAS,KAAK,MAAM,GAChBgD,CAAC,IACAN,MAAM,CAACzE,wBAAwB,CAACT,KAAK,IAAI,CAAC,CAAC,IAAIpB,MAAM,CAAC6B,wBAAwB,CAACT,KAAK,CAAC,GACtFsE,MAAM,GACNkB,CAAC,GAAGlB,MAAM;IAChB,IAAMqB,GAAG,GACPF,CAAC,GACDnB,MAAM,IACLY,MAAM,CAACzE,wBAAwB,CAACC,MAAM,IAAI,CAAC,CAAC,IAAI9B,MAAM,CAAC6B,wBAAwB,CAACC,MAAM,CAAC;IAE1F,OACEhE,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MAACC,KAAK,EAAE,CAACjH,MAAM,CAACG,eAAe,EAAEA,eAAe,CAAE;MAAAiD,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACrD1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MAACC,KAAK,EAAEjH,MAAM,CAACK,oBAAqB;MAAA+C,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACvC1F,MAAA,YAAAqF,aAAA,CAACa,sBAAsB;MAACf,QAAQ,EAAEwD,IAAK;MAAC3D,IAAI,EAAE2C,UAAW;MAAArC,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC,EAC5D1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MAACC,KAAK,EAAE,CAAChH,uBAAU,CAACiH,YAAY,CAAE;MAAA9D,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACrC1F,MAAA,YAAAqF,aAAA,CAAC9E,eAAA,WAAG;MAAA+E,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACF1F,MAAA,YAAAqF,aAAA,CAAC9E,eAAA,CAAA8I,MAAM;MACLC,EAAE,EAAER,CAAC,GAAG,CAAClB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAG,CAAC,KAAK9B,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;MACpEyD,EAAE,EAAER,CAAC,GAAGnB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAG,CAAE;MAChC4B,IAAI,EAAE1D,SAAS,KAAK,MAAM,GAAGuB,cAAc,GAAGC,KAAM;MACpDmC,CAAC,EAAE7B,MAAM,GAAG,CAAE;MACd8B,MAAM,EAAE5D,SAAS,KAAK,MAAM,GAAGwB,KAAK,GAAGD,cAAe;MACtDsC,WAAW,EAAE/B,MAAM,GAAG,CAAE;MAAAtC,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACzB,CAAC,EACF1F,MAAA,YAAAqF,aAAA,CAAC9E,eAAA,CAAA8I,MAAM;MACLC,EAAE,EAAER,CAAE;MACNS,EAAE,EAAER,CAAE;MACNS,IAAI,EAAE1D,SAAS,KAAK,MAAM,GAAGuB,cAAc,GAAGC,KAAM;MACpDmC,CAAC,EAAE7B,MAAO;MACV8B,MAAM,EAAE5D,SAAS,KAAK,MAAM,GAAGwB,KAAK,GAAGD,cAAe;MACtDsC,WAAW,EAAE/B,MAAM,GAAG,CAAE;MAAAtC,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACzB,CACE,CAAC,EACN1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MACHC,KAAK,EAAE,CACLjH,MAAM,CAAC6B,wBAAwB,EAC/B;QACE6F,eAAe,EAAE9D,SAAS,KAAK,MAAM,GAAGuB,cAAc,GAAGC,KAAK;QAC9DuC,WAAW,EAAE/D,SAAS,KAAK,MAAM,GAAGwB,KAAK,GAAGD,cAAc;QAC1DyC,WAAW,EAAElC,MAAM,GAAG,CAAC;QACvBoB,IAAI,EAAJA,IAAI;QACJC,GAAG,EAAHA;MACF,CAAC,EACDlF,wBAAwB,CACxB;MAAAuB,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACH,CAAC,EACF1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MAACC,KAAK,EAAE,CAAChH,uBAAU,CAACiH,YAAY,CAAE;MAAA9D,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACrC1F,MAAA,YAAAqF,aAAA,CAAC9E,eAAA,WAAG;MAAA+E,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACF1F,MAAA,YAAAqF,aAAA,CAAC9E,eAAA,CAAA8I,MAAM;MACLC,EAAE,EAAER,CAAC,GAAG,CAAClB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAG,CAAC,KAAK9B,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;MACpEyD,EAAE,EAAER,CAAC,GAAGnB,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAG,CAAE;MAChC4B,IAAI,EAAE1D,SAAS,KAAK,MAAM,GAAGuB,cAAc,GAAGC,KAAM;MACpDmC,CAAC,EAAE7B,MAAM,GAAG,CAAC,GAAGA,MAAM,GAAG,CAAE;MAAAtC,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CAC5B,CACE,CACD,CAAC,EACP1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MACHC,KAAK,EAAE,CACLjH,MAAM,CAAC0B,cAAc,EACrB;QACEgG,eAAe,EAAE9D,SAAS,KAAK,MAAM,GAAGuB,cAAc,GAAGC,KAAK;QAC9DtD,MAAM,EACJ,CAACJ,cAAc,CAACR,YAAY,IAAIlB,MAAM,CAAC0B,cAAc,CAACR,YAAY,IAClEwE,MAAM,GAAG,CAAC;QACZoB,IAAI,EAAJA,IAAI;QACJC,GAAG,EAAHA,GAAG;QACH3F,KAAK,EACH,CAACM,cAAc,CAACR,YAAY,IAAIlB,MAAM,CAAC0B,cAAc,CAACR,YAAY,IAClEwE,MAAM,GAAG;MACb,CAAC,EACDhE,cAAc,CACd;MAAA0B,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GAEF1F,MAAA,YAAAqF,aAAA,CAACT,YAAY;MACXG,QAAQ,EAAEoC,WAAY;MACtBnC,IAAI,EAAE,CAACpB,cAAc,CAACR,YAAY,IAAIlB,MAAM,CAAC0B,cAAc,CAACR,YAAY,IAAI,CAAE;MAC9E6B,kBAAkB,EAAEA,kBAAmB;MACvCV,IAAI,EAAEA,IAAK;MAAAe,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACZ,CACG,CACF,CACF,CAAC,EACP1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;MAACC,KAAK,EAAEjH,MAAM,CAACa,mBAAoB;MAAAuC,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GACtC1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA4J,IAAI;MAACZ,KAAK,EAAE,CAACjH,MAAM,CAACO,UAAU,EAAE;QAAEuH,KAAK,EAAE5C;MAAM,CAAC,EAAE3E,UAAU,CAAE;MAAA6C,MAAA,EAAA5E,KAAA;MAAA6E,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,GAAEmD,IAAW,CACxE,CACF,CAAC;EAEX,CAAC;EAED,IAAMoB,eAAe,GAAG,IAAAC,uCAAgB,EACtC;IAAA,OAAO;MACLC,SAAS,EAAE,CACT;QACEC,UAAU,EAAE,IAAAC,kCAAW,EAACpE,UAAU,CAACqE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAACnE,YAAY,CAACmE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC;MAChF,CAAC,EACD;QACEC,UAAU,EAAE,IAAAF,kCAAW,EACrBpE,UAAU,CAACqE,KAAK,EAChB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAACzE,gBAAgB,KAAK,MAAM,GAAG,CAACQ,WAAW,CAACiE,KAAK,GAAG,CAAC,GAAGjE,WAAW,CAACiE,KAAK,GAAG,CAAC,EAAE,CAAC,CAClF;MACF,CAAC,EACD;QACEE,KAAK,EAAEvE,UAAU,CAACqE;MACpB,CAAC;IAEL,CAAC;EAAA,CAAC,EACF,CAACzE,gBAAgB,CACnB,CAAC;EAED,OACE7F,MAAA,YAAAqF,aAAA,CAAArF,MAAA,YAAAyK,QAAA,QACEzK,MAAA,YAAAqF,aAAA,CAAChF,sBAAA,WAAQ,CAAC6I,IAAI;IACZwB,QAAQ,EAAE,SAAAA,SAAAC,KAAA,EAAiC;MAAA,IAAfC,MAAM,GAAAD,KAAA,CAArBE,WAAW,CAAID,MAAM;MAChCvE,WAAW,CAACiE,KAAK,GAAGM,MAAM,CAACtH,KAAK;MAChC6C,YAAY,CAACmE,KAAK,GAAGM,MAAM,CAAC5G,MAAM;IACpC,CAAE;IACFmF,KAAK,EAAE,CACLjH,MAAM,CAACiB,SAAS,EAChB;MAAEyG,eAAe,EAAEtC,KAAK;MAAEnD,OAAO,EAAEwC,UAAU,GAAG,CAAC,GAAG;IAAE,CAAC,EACvDxD,SAAS,EACT8G,eAAe,CACf;IAAA3E,MAAA,EAAA5E,KAAA;IAAA6E,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEF1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA4J,IAAI;IAACZ,KAAK,EAAE,CAACjH,MAAM,CAAC+B,KAAK,EAAE;MAAE+F,KAAK,EAAE5C;IAAM,CAAC,EAAES,UAAU,CAAE;IAAAvC,MAAA,EAAA5E,KAAA;IAAA6E,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEzB,KAAY,CAAC,EACzEjE,MAAA,YAAAqF,aAAA,CAACjF,0BAAA,CAAA0K,QAAQ;IACPC,qBAAqB,EAAE7I,MAAM,CAACwB,wBAAyB;IACvDsH,IAAI,EAAE9C,iBAAkB;IACxBtG,GAAG,EAAEyG,UAAW;IAChB4C,YAAY,EAAE,SAAAA,aAAAC,KAAA,EAAWC,KAAK;MAAA,IAAbtC,IAAI,GAAAqC,KAAA,CAAJrC,IAAI;MAAA,OAAiBA,IAAI,SAAIsC,KAAK;IAAA,CAAG;IACtD9C,UAAU,EAAEA,UAAW;IACvBI,UAAU,EAAEA,UAAW;IACvBU,KAAK,EAAE,CACLjH,MAAM,CAACqB,iBAAiB,EACxBA,iBAAiB,EACjB;MAEE6H,SAAS,EACPzE,UAAU,IAAIuB,iBAAiB,CAACmD,MAAM,GAAGhD,UAAU,GAAG,CAAC,GAAG1B,UAAU,GAAG,CAAC,GAAG,CAAC;IAChF,CAAC,CACD;IAAArB,MAAA,EAAA5E,KAAA;IAAA6E,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CAAC,EAEF1F,MAAA,YAAAqF,aAAA,CAAClF,YAAA,CAAA+I,IAAI;IACHwB,QAAQ,EAAE,SAAAA,SAAAY,KAAA,EAAiC;MAAA,IAAfV,MAAM,GAAAU,KAAA,CAArBT,WAAW,CAAID,MAAM;MAChChE,aAAa,CAACgE,MAAM,CAAC5G,MAAM,CAAC;IAC9B,CAAE;IACFmF,KAAK,EAAE,CAACjH,MAAM,CAACgC,mBAAmB,EAAEhC,MAAM,CAACwB,wBAAwB,CAAE;IAAA4B,MAAA,EAAA5E,KAAA;IAAA6E,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEpE+C,UAAU,CAAC;IAAEE,IAAI,EAAET,iBAAiB,CAAC,CAAC;EAAE,CAAC,CACtC,CACO,CACf,CAAC;AAEP,CAAC;AAACqD,OAAA,CAAA5F,gBAAA,GAAAA,gBAAA;AAEFA,gBAAgB,CAAC6F,WAAW,GAAG,sCAAsC"}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.18.0-beta.3"
+  "version": "5.18.0-beta.5"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.18.0-beta.3",
+  "version": "5.18.0-beta.5",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -61,8 +61,11 @@ const getMentionUsers = <
       }
       return acc;
     }, '');
-    return mentionUserString;
+
+    // escape special characters
+    return mentionUserString.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
+
   return '';
 };
 

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -210,7 +210,7 @@ export const renderText = <
         if (userName) {
           acc += `${acc.length ? '|' : ''}@${userName}`;
         }
-        return acc;
+        return acc.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
       }, '')
     : '';
 

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -69,6 +69,10 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     paddingTop: 16,
   },
+  unseenItemContainer: {
+    opacity: 0,
+    position: 'absolute',
+  },
 });
 
 const reactionData: ReactionData[] = [
@@ -138,6 +142,8 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
   const layoutHeight = useSharedValue(0);
   const layoutWidth = useSharedValue(0);
 
+  const [itemHeight, setItemHeight] = React.useState(0);
+
   const {
     theme: {
       colors: { accent_blue, black, grey_gainsboro, white },
@@ -159,7 +165,6 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
   } = useTheme();
 
   const width = useWindowDimensions().width;
-  const height = useWindowDimensions().height;
 
   const supportedReactionTypes = supportedReactions.map(
     (supportedReaction) => supportedReaction.type,
@@ -179,15 +184,6 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
       (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2),
   );
 
-  const maxHeight = Math.floor(
-    height -
-      overlayPadding * 2 -
-      ((Number(flatListContainer.paddingVertical || 0) ||
-        styles.flatListContainer.paddingVertical) +
-        (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding)) *
-        2,
-  );
-
   const renderItem = ({ item }: { item: Reaction }) => {
     const { alignment = 'left', name, type } = item;
     const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
@@ -305,23 +301,48 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
   );
 
   return (
-    <Animated.View
-      onLayout={({ nativeEvent: { layout } }) => {
-        layoutWidth.value = layout.width;
-        layoutHeight.value = layout.height;
-      }}
-      style={[styles.container, { backgroundColor: white }, container, showScreenStyle]}
-    >
-      <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
-      <FlatList
-        contentContainerStyle={styles.flatListContentContainer}
-        data={filteredReactions}
-        keyExtractor={({ name }, index) => `${name}_${index}`}
-        numColumns={numColumns}
-        renderItem={renderItem}
-        style={[styles.flatListContainer, flatListContainer, { maxHeight: maxHeight / numColumns }]}
-      />
-    </Animated.View>
+    <>
+      <Animated.View
+        onLayout={({ nativeEvent: { layout } }) => {
+          layoutWidth.value = layout.width;
+          layoutHeight.value = layout.height;
+        }}
+        style={[
+          styles.container,
+          { backgroundColor: white, opacity: itemHeight ? 1 : 0 },
+          container,
+          showScreenStyle,
+        ]}
+      >
+        <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
+        <FlatList
+          contentContainerStyle={styles.flatListContentContainer}
+          data={filteredReactions}
+          key={numColumns}
+          keyExtractor={({ name }, index) => `${name}_${index}`}
+          numColumns={numColumns}
+          renderItem={renderItem}
+          style={[
+            styles.flatListContainer,
+            flatListContainer,
+            {
+              // we show the item height plus a little extra to tease for scrolling if there are more than one row
+              maxHeight:
+                itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 8 : 0),
+            },
+          ]}
+        />
+        {/* The below view is unseen by the user, we use it to compute the height that the item must be */}
+        <View
+          onLayout={({ nativeEvent: { layout } }) => {
+            setItemHeight(layout.height);
+          }}
+          style={[styles.unseenItemContainer, styles.flatListContentContainer]}
+        >
+          {renderItem({ item: filteredReactions[0] })}
+        </View>
+      </Animated.View>
+    </>
   );
 };
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.18.0-beta.3"
+  "version": "5.18.0-beta.5"
 }