stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

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

@@ -0,0 +1,38 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayBackdrop = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayBackdrop.tsx";
+
+var OverlayBackdrop = function OverlayBackdrop(props) {
+  var _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      overlay = _useTheme.theme.colors.overlay;
+
+  return _react["default"].createElement(_reactNative.View, {
+    style: [{
+      backgroundColor: overlay
+    }, style],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 10
+    }
+  });
+};
+
+exports.OverlayBackdrop = OverlayBackdrop;
+//# sourceMappingURL=OverlayBackdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayBackdrop.tsx"],"names":["OverlayBackdrop","props","style","overlay","theme","colors","backgroundColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;AAMO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA8C;AAC3E,qBAAuBA,KAAvB,CAAQC,KAAR;AAAA,MAAQA,KAAR,6BAAgB,EAAhB;;AACA,kBAII,6BAJJ;AAAA,MAEcC,OAFd,aACEC,KADF,CAEIC,MAFJ,CAEcF,OAFd;;AAKA,SAAO,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAAC;AAAEG,MAAAA,eAAe,EAAEH;AAAnB,KAAD,EAA+BD,KAA/B,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAP;AACD,CARM","sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\ntype OverlayBackdropProps = {\n  style?: StyleProp<ViewStyle>;\n};\n\nexport const OverlayBackdrop = (props: OverlayBackdropProps): JSX.Element => {\n  const { style = {} } = props;\n  const {\n    theme: {\n      colors: { overlay },\n    },\n  } = useTheme();\n  return <View style={[{ backgroundColor: overlay }, style]} />;\n};\n"]}

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OverlayReactionList = exports.ReactionButton = void 0;
+exports.ReactionButton = exports.OverlayReactionList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -259,7 +259,6 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
     return {
       cx: messageLayout.value.x - radius * 3,
       cy: messageLayout.value.y - radius * 3,
-      fill: fill || white_snow,
       r: radius * 2
     };
   });
@@ -267,7 +266,6 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
     return {
       cx: messageLayout.value.x - radius,
       cy: messageLayout.value.y,
-      fill: fill || white_snow,
       r: radius
     };
   });
@@ -285,10 +283,11 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
   var numberOfReactions = supportedReactions.length;
   return _react["default"].createElement(_reactNative.View, {
     style: _reactNative.StyleSheet.absoluteFill,
+    testID: "overlay-reaction-list",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 375,
+      lineNumber: 373,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -300,30 +299,32 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 376,
+      lineNumber: 374,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 382,
+      lineNumber: 380,
       columnNumber: 9
     }
   }, _react["default"].createElement(AnimatedCircle, {
     animatedProps: animatedBigCircleProps,
+    fill: fill || white_snow,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 383,
+      lineNumber: 381,
       columnNumber: 11
     }
   }), _react["default"].createElement(AnimatedCircle, {
     animatedProps: animateSmallCircleProps,
+    fill: fill || white_snow,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 384,
+      lineNumber: 382,
       columnNumber: 11
     }
   })), _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -344,7 +345,7 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 386,
+      lineNumber: 384,
       columnNumber: 9
     }
   }, supportedReactions == null ? void 0 : supportedReactions.map(function (_ref3, index) {
@@ -363,7 +364,7 @@ var OverlayReactionListWithContext = function OverlayReactionListWithContext(pro
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 404,
+        lineNumber: 402,
         columnNumber: 13
       }
     });
@@ -401,7 +402,7 @@ var OverlayReactionList = function OverlayReactionList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 489,
+      lineNumber: 487,
       columnNumber: 5
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayReactionList.tsx"],"names":["AnimatedCircle","Animated","createAnimatedComponent","Circle","styles","StyleSheet","create","notLastReaction","marginRight","reactionList","alignItems","borderRadius","flexDirection","justifyContent","paddingHorizontal","paddingVertical","position","selectedIcon","reactionData","Icon","LoveReaction","type","ThumbsUpReaction","ThumbsDownReaction","LOLReaction","WutReaction","ReactionButton","props","handleReaction","index","numberOfReactions","ownReactionTypes","setOverlay","showScreen","theme","colors","accent_blue","grey","overlay","reactionsList","reaction","reactionSize","selected","includes","animationScale","hasShown","scale","selectedOpacity","onTap","onEnd","triggerHaptic","value","duration","onFinish","onStart","result","iconStyle","transform","selectedStyle","opacity","bottom","Number","paddingBottom","left","paddingLeft","right","paddingRight","top","paddingTop","OverlayReactionListWithContext","alignment","fill","messageLayout","setReactionListHeight","supportedReactions","white_snow","screenPadding","padding","radius","reactionListHeight","reactionBubbleWidth","reactionListLayout","height","width","animatedStyle","insideLeftBound","x","insideRightBound","y","animatedBigCircleProps","cx","cy","r","animateSmallCircleProps","showScreenStyle","translateY","translateX","length","absoluteFill","layout","nativeEvent","layoutWidth","backgroundColor","map","areEqual","prevProps","nextProps","prevAlignment","prevOwnReactionTypes","nextAlignment","nextOwnReactionTypes","alignmentEqual","ownReactionTypesEqual","MemoizedOverlayReactionList","React","memo","OverlayReactionList","data","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport Animated, {\n  cancelAnimation,\n  interpolate,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport Svg, { Circle, CircleProps, FillProps } from 'react-native-svg';\n\nimport {\n  MessageOverlayData,\n  useMessageOverlayContext,\n} from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport {\n  OverlayContextValue,\n  useOverlayContext,\n} from '../../contexts/overlayContext/OverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  IconProps,\n  LOLReaction,\n  LoveReaction,\n  ThumbsDownReaction,\n  ThumbsUpReaction,\n  WutReaction,\n} from '../../icons';\n\nimport { triggerHaptic } from '../../native';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\nimport type { ReactionData } from '../../utils/utils';\n\nconst AnimatedCircle = Animated.createAnimatedComponent\n  ? Animated.createAnimatedComponent(Circle)\n  : Circle;\n\nconst styles = StyleSheet.create({\n  notLastReaction: {\n    marginRight: 16,\n  },\n  reactionList: {\n    alignItems: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n    justifyContent: 'center',\n    paddingHorizontal: 16,\n    paddingVertical: 12,\n    position: 'absolute',\n  },\n  selectedIcon: {\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\ntype ReactionButtonProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<\n  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  'ownReactionTypes' | 'handleReaction' | 'setOverlay'\n> & {\n  Icon: React.FC<IconProps>;\n  index: number;\n  numberOfReactions: number;\n  showScreen: Animated.SharedValue<number>;\n  type: string;\n};\n\nexport const ReactionButton = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: ReactionButtonProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    handleReaction,\n    Icon,\n    index,\n    numberOfReactions,\n    ownReactionTypes,\n    setOverlay,\n    showScreen,\n    type,\n  } = props;\n  const {\n    theme: {\n      colors: { accent_blue, grey },\n      overlay: {\n        reactionsList: { reaction, reactionSize },\n      },\n    },\n  } = useTheme();\n  const selected = ownReactionTypes.includes(type);\n  const animationScale = useSharedValue(0);\n  const hasShown = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const selectedOpacity = useSharedValue(selected ? 1 : 0);\n\n  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(\n    {\n      onEnd: () => {\n        runOnJS(triggerHaptic)('impactLight');\n        selectedOpacity.value = withTiming(selected ? 0 : 1, { duration: 250 }, () => {\n          if (handleReaction) {\n            runOnJS(handleReaction)(type);\n          }\n          runOnJS(setOverlay)('none');\n        });\n      },\n      onFinish: () => {\n        cancelAnimation(scale);\n        scale.value = withTiming(1, { duration: 100 });\n      },\n      onStart: () => {\n        cancelAnimation(scale);\n        scale.value = withTiming(1.5, { duration: 100 });\n      },\n    },\n    [handleReaction, selected, setOverlay, type],\n  );\n\n  useAnimatedReaction(\n    () => {\n      if (showScreen.value > 0.8 && hasShown.value === 0) {\n        return 1;\n      }\n      return 0;\n    },\n    (result) => {\n      if (hasShown.value === 0 && result !== 0) {\n        hasShown.value = 1;\n        animationScale.value = withSequence(\n          withDelay(60 * (numberOfReactions - (index + 1)), withTiming(0.1, { duration: 50 })),\n          withTiming(1.5, { duration: 250 }),\n          withTiming(1, { duration: 250 }),\n        );\n      }\n    },\n    [index, numberOfReactions],\n  );\n\n  const iconStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          scale: animationScale.value,\n        },\n        {\n          scale: scale.value,\n        },\n      ],\n    }),\n    [],\n  );\n\n  const selectedStyle = useAnimatedStyle<ViewStyle>(() => ({\n    opacity: selectedOpacity.value,\n  }));\n\n  return (\n    <TapGestureHandler\n      hitSlop={{\n        bottom:\n          Number(reaction.paddingVertical || 0) ||\n          Number(reaction.paddingBottom || 0) ||\n          styles.reactionList.paddingVertical,\n        left:\n          (Number(reaction.paddingHorizontal || 0) ||\n            Number(reaction.paddingLeft || 0) ||\n            styles.notLastReaction.marginRight) / 2,\n        right:\n          (Number(reaction.paddingHorizontal || 0) ||\n            Number(reaction.paddingRight || 0) ||\n            styles.notLastReaction.marginRight) / 2,\n        top:\n          Number(reaction.paddingVertical || 0) ||\n          Number(reaction.paddingTop || 0) ||\n          styles.reactionList.paddingVertical,\n      }}\n      maxDurationMs={3000}\n      onHandlerStateChange={onTap}\n    >\n      <Animated.View\n        style={[index !== numberOfReactions - 1 ? styles.notLastReaction : {}, reaction, iconStyle]}\n      >\n        <Icon height={reactionSize} pathFill={grey} width={reactionSize} />\n        <Animated.View style={[styles.selectedIcon, selectedStyle]}>\n          <Icon height={reactionSize} pathFill={accent_blue} width={reactionSize} />\n        </Animated.View>\n      </Animated.View>\n    </TapGestureHandler>\n  );\n};\n\nexport type OverlayReactionListPropsWithContext<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<\n  MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>,\n  'alignment' | 'handleReaction' | 'messagesContext'\n> &\n  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &\n  Pick<OverlayContextValue, 'setOverlay'> & {\n    messageLayout: Animated.SharedValue<{\n      x: number;\n      y: number;\n    }>;\n    ownReactionTypes: string[];\n    setReactionListHeight: React.Dispatch<React.SetStateAction<number>>;\n    showScreen: Animated.SharedValue<number>;\n    fill?: FillProps['fill'];\n  };\n\nconst OverlayReactionListWithContext = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    fill,\n    handleReaction,\n    messageLayout,\n    ownReactionTypes,\n    setReactionListHeight,\n    showScreen,\n    setOverlay,\n    supportedReactions = reactionData,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white_snow },\n      overlay: {\n        padding: screenPadding,\n        reactionsList: { radius, reactionList },\n      },\n    },\n  } = useTheme();\n\n  const reactionListHeight = useSharedValue(0);\n  const reactionBubbleWidth = useSharedValue(0);\n  const reactionListLayout = useSharedValue({\n    height: 0,\n    width: 0,\n  });\n\n  const { width } = useWindowDimensions();\n\n  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {\n    const borderRadius = reactionList.borderRadius || styles.reactionList.borderRadius;\n    const insideLeftBound =\n      messageLayout.value.x - reactionListLayout.value.width + borderRadius > screenPadding;\n    const insideRightBound = messageLayout.value.x + borderRadius < width - screenPadding;\n    const left = !insideLeftBound\n      ? screenPadding\n      : !insideRightBound\n      ? width - screenPadding - reactionListLayout.value.width\n      : messageLayout.value.x - reactionListLayout.value.width + borderRadius;\n    const top = messageLayout.value.y - reactionListLayout.value.height - radius * 2;\n\n    return {\n      left,\n      top,\n    };\n  });\n\n  const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({\n    cx: messageLayout.value.x - radius * 3,\n    cy: messageLayout.value.y - radius * 3,\n    fill: fill || white_snow,\n    r: radius * 2,\n  }));\n\n  const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({\n    cx: messageLayout.value.x - radius,\n    cy: messageLayout.value.y,\n    fill: fill || white_snow,\n    r: radius,\n  }));\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-reactionListHeight.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [\n              alignment === 'left' ? -reactionBubbleWidth.value / 2 : reactionBubbleWidth.value / 2,\n              0,\n            ],\n          ),\n        },\n        {\n          scale: interpolate(showScreen.value, [0, 0.8, 1], [0, 0, 1]),\n        },\n      ],\n    }),\n    [alignment],\n  );\n\n  const numberOfReactions = supportedReactions.length;\n\n  return (\n    <View style={StyleSheet.absoluteFill}>\n      <Animated.View\n        onLayout={({ nativeEvent: { layout } }) => {\n          reactionBubbleWidth.value = layout.width;\n        }}\n        style={showScreenStyle}\n      >\n        <Svg>\n          <AnimatedCircle animatedProps={animatedBigCircleProps} />\n          <AnimatedCircle animatedProps={animateSmallCircleProps} />\n        </Svg>\n        <Animated.View\n          onLayout={({\n            nativeEvent: {\n              layout: { height, width: layoutWidth },\n            },\n          }) => {\n            reactionListLayout.value = { height, width: layoutWidth };\n            reactionListHeight.value = height;\n            setReactionListHeight(height);\n          }}\n          style={[\n            styles.reactionList,\n            { backgroundColor: white_snow },\n            animatedStyle,\n            reactionList,\n          ]}\n        >\n          {supportedReactions?.map(({ Icon, type }, index) => (\n            <ReactionButton<At, Ch, Co, Ev, Me, Re, Us>\n              handleReaction={handleReaction}\n              Icon={Icon}\n              index={index}\n              key={`${type}_${index}`}\n              numberOfReactions={numberOfReactions}\n              ownReactionTypes={ownReactionTypes}\n              setOverlay={setOverlay}\n              showScreen={showScreen}\n              type={type}\n            />\n          ))}\n        </Animated.View>\n      </Animated.View>\n    </View>\n  );\n};\n\nconst areEqual = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  prevProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  nextProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { alignment: prevAlignment, ownReactionTypes: prevOwnReactionTypes } = prevProps;\n  const { alignment: nextAlignment, ownReactionTypes: nextOwnReactionTypes } = nextProps;\n\n  const alignmentEqual = prevAlignment === nextAlignment;\n  if (!alignmentEqual) return false;\n\n  const ownReactionTypesEqual = prevOwnReactionTypes.length === nextOwnReactionTypes.length;\n  if (!ownReactionTypesEqual) return false;\n\n  return true;\n};\n\nconst MemoizedOverlayReactionList = React.memo(\n  OverlayReactionListWithContext,\n  areEqual,\n) as typeof OverlayReactionListWithContext;\n\nexport type OverlayReactionListProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Omit<\n  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  'setOverlay' | 'supportedReactions'\n> &\n  Partial<\n    Pick<\n      OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n      'setOverlay' | 'supportedReactions'\n    >\n  >;\n\n/**\n * OverlayReactionList - A high level component which implements all the logic required for a message overlay reaction list\n */\nexport const OverlayReactionList = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { setOverlay } = useOverlayContext();\n\n  return (\n    <MemoizedOverlayReactionList\n      {...(data || {})}\n      {...{ setOverlay, supportedReactions }}\n      {...props}\n    />\n  );\n};\n\nOverlayReactionList.displayName = 'OverlayReactionList{overlay{reactionList}}';\n"]}
+{"version":3,"sources":["OverlayReactionList.tsx"],"names":["AnimatedCircle","Animated","createAnimatedComponent","Circle","styles","StyleSheet","create","notLastReaction","marginRight","reactionList","alignItems","borderRadius","flexDirection","justifyContent","paddingHorizontal","paddingVertical","position","selectedIcon","reactionData","Icon","LoveReaction","type","ThumbsUpReaction","ThumbsDownReaction","LOLReaction","WutReaction","ReactionButton","props","handleReaction","index","numberOfReactions","ownReactionTypes","setOverlay","showScreen","theme","colors","accent_blue","grey","overlay","reactionsList","reaction","reactionSize","selected","includes","animationScale","hasShown","scale","selectedOpacity","onTap","onEnd","triggerHaptic","value","duration","onFinish","onStart","result","iconStyle","transform","selectedStyle","opacity","bottom","Number","paddingBottom","left","paddingLeft","right","paddingRight","top","paddingTop","OverlayReactionListWithContext","alignment","fill","messageLayout","setReactionListHeight","supportedReactions","white_snow","screenPadding","padding","radius","reactionListHeight","reactionBubbleWidth","reactionListLayout","height","width","animatedStyle","insideLeftBound","x","insideRightBound","y","animatedBigCircleProps","cx","cy","r","animateSmallCircleProps","showScreenStyle","translateY","translateX","length","absoluteFill","layout","nativeEvent","layoutWidth","backgroundColor","map","areEqual","prevProps","nextProps","prevAlignment","prevOwnReactionTypes","nextAlignment","nextOwnReactionTypes","alignmentEqual","ownReactionTypesEqual","MemoizedOverlayReactionList","React","memo","OverlayReactionList","data","displayName"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAaA;;AAEA;;AAIA;;AAIA;;AAIA;;AACA;;AASA;;;;;;;;;AAcA,IAAMA,cAAc,GAAGC,kCAASC,uBAAT,GACnBD,kCAASC,uBAAT,CAAiCC,sBAAjC,CADmB,GAEnBA,sBAFJ;;AAIA,IAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,eAAe,EAAE;AACfC,IAAAA,WAAW,EAAE;AADE,GADc;AAI/BC,EAAAA,YAAY,EAAE;AACZC,IAAAA,UAAU,EAAE,QADA;AAEZC,IAAAA,YAAY,EAAE,EAFF;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,cAAc,EAAE,QAJJ;AAKZC,IAAAA,iBAAiB,EAAE,EALP;AAMZC,IAAAA,eAAe,EAAE,EANL;AAOZC,IAAAA,QAAQ,EAAE;AAPE,GAJiB;AAa/BC,EAAAA,YAAY,EAAE;AACZD,IAAAA,QAAQ,EAAE;AADE;AAbiB,CAAlB,CAAf;;AAkBA,IAAME,YAA4B,GAAG,CACnC;AACEC,EAAAA,IAAI,EAAEC,mBADR;AAEEC,EAAAA,IAAI,EAAE;AAFR,CADmC,EAKnC;AACEF,EAAAA,IAAI,EAAEG,uBADR;AAEED,EAAAA,IAAI,EAAE;AAFR,CALmC,EASnC;AACEF,EAAAA,IAAI,EAAEI,yBADR;AAEEF,EAAAA,IAAI,EAAE;AAFR,CATmC,EAanC;AACEF,EAAAA,IAAI,EAAEK,kBADR;AAEEH,EAAAA,IAAI,EAAE;AAFR,CAbmC,EAiBnC;AACEF,EAAAA,IAAI,EAAEM,kBADR;AAEEJ,EAAAA,IAAI,EAAE;AAFR,CAjBmC,CAArC;;AA0CO,IAAMK,cAAc,GAAG,SAAjBA,cAAiB,CAS5BC,KAT4B,EAUzB;AACH,MACEC,cADF,GASID,KATJ,CACEC,cADF;AAAA,MAEET,IAFF,GASIQ,KATJ,CAEER,IAFF;AAAA,MAGEU,KAHF,GASIF,KATJ,CAGEE,KAHF;AAAA,MAIEC,iBAJF,GASIH,KATJ,CAIEG,iBAJF;AAAA,MAKEC,gBALF,GASIJ,KATJ,CAKEI,gBALF;AAAA,MAMEC,UANF,GASIL,KATJ,CAMEK,UANF;AAAA,MAOEC,UAPF,GASIN,KATJ,CAOEM,UAPF;AAAA,MAQEZ,IARF,GASIM,KATJ,CAQEN,IARF;;AAUA,kBAOI,6BAPJ;AAAA,kCACEa,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,WAFd,yBAEcA,WAFd;AAAA,MAE2BC,IAF3B,yBAE2BA,IAF3B;AAAA,8CAGIC,OAHJ,CAIMC,aAJN;AAAA,MAIuBC,QAJvB,yBAIuBA,QAJvB;AAAA,MAIiCC,YAJjC,yBAIiCA,YAJjC;;AAQA,MAAMC,QAAQ,GAAGX,gBAAgB,CAACY,QAAjB,CAA0BtB,IAA1B,CAAjB;AACA,MAAMuB,cAAc,GAAG,2CAAe,CAAf,CAAvB;AACA,MAAMC,QAAQ,GAAG,2CAAe,CAAf,CAAjB;AACA,MAAMC,KAAK,GAAG,2CAAe,CAAf,CAAd;AACA,MAAMC,eAAe,GAAG,2CAAeL,QAAQ,GAAG,CAAH,GAAO,CAA9B,CAAxB;AAEA,MAAMM,KAAK,GAAG,sDACZ;AACEC,IAAAA,KAAK,EAAE,iBAAM;AACX,0CAAQC,qBAAR,EAAuB,aAAvB;AACAH,MAAAA,eAAe,CAACI,KAAhB,GAAwB,uCAAWT,QAAQ,GAAG,CAAH,GAAO,CAA1B,EAA6B;AAAEU,QAAAA,QAAQ,EAAE;AAAZ,OAA7B,EAAgD,YAAM;AAC5E,YAAIxB,cAAJ,EAAoB;AAClB,8CAAQA,cAAR,EAAwBP,IAAxB;AACD;;AACD,4CAAQW,UAAR,EAAoB,MAApB;AACD,OALuB,CAAxB;AAMD,KATH;AAUEqB,IAAAA,QAAQ,EAAE,oBAAM;AACd,kDAAgBP,KAAhB;AACAA,MAAAA,KAAK,CAACK,KAAN,GAAc,uCAAW,CAAX,EAAc;AAAEC,QAAAA,QAAQ,EAAE;AAAZ,OAAd,CAAd;AACD,KAbH;AAcEE,IAAAA,OAAO,EAAE,mBAAM;AACb,kDAAgBR,KAAhB;AACAA,MAAAA,KAAK,CAACK,KAAN,GAAc,uCAAW,GAAX,EAAgB;AAAEC,QAAAA,QAAQ,EAAE;AAAZ,OAAhB,CAAd;AACD;AAjBH,GADY,EAoBZ,CAACxB,cAAD,EAAiBc,QAAjB,EAA2BV,UAA3B,EAAuCX,IAAvC,CApBY,CAAd;AAuBA,kDACE,YAAM;AACJ,QAAIY,UAAU,CAACkB,KAAX,GAAmB,GAAnB,IAA0BN,QAAQ,CAACM,KAAT,KAAmB,CAAjD,EAAoD;AAClD,aAAO,CAAP;AACD;;AACD,WAAO,CAAP;AACD,GANH,EAOE,UAACI,MAAD,EAAY;AACV,QAAIV,QAAQ,CAACM,KAAT,KAAmB,CAAnB,IAAwBI,MAAM,KAAK,CAAvC,EAA0C;AACxCV,MAAAA,QAAQ,CAACM,KAAT,GAAiB,CAAjB;AACAP,MAAAA,cAAc,CAACO,KAAf,GAAuB,yCACrB,sCAAU,MAAMrB,iBAAiB,IAAID,KAAK,GAAG,CAAZ,CAAvB,CAAV,EAAkD,uCAAW,GAAX,EAAgB;AAAEuB,QAAAA,QAAQ,EAAE;AAAZ,OAAhB,CAAlD,CADqB,EAErB,uCAAW,GAAX,EAAgB;AAAEA,QAAAA,QAAQ,EAAE;AAAZ,OAAhB,CAFqB,EAGrB,uCAAW,CAAX,EAAc;AAAEA,QAAAA,QAAQ,EAAE;AAAZ,OAAd,CAHqB,CAAvB;AAKD;AACF,GAhBH,EAiBE,CAACvB,KAAD,EAAQC,iBAAR,CAjBF;AAoBA,MAAM0B,SAAS,GAAG,6CAChB;AAAA,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACEX,QAAAA,KAAK,EAAEF,cAAc,CAACO;AADxB,OADS,EAIT;AACEL,QAAAA,KAAK,EAAEA,KAAK,CAACK;AADf,OAJS;AADN,KAAP;AAAA,GADgB,EAWhB,EAXgB,CAAlB;AAcA,MAAMO,aAAa,GAAG,6CAA4B;AAAA,WAAO;AACvDC,MAAAA,OAAO,EAAEZ,eAAe,CAACI;AAD8B,KAAP;AAAA,GAA5B,CAAtB;AAIA,SACE,gCAAC,4CAAD;AACE,IAAA,OAAO,EAAE;AACPS,MAAAA,MAAM,EACJC,MAAM,CAACrB,QAAQ,CAACzB,eAAT,IAA4B,CAA7B,CAAN,IACA8C,MAAM,CAACrB,QAAQ,CAACsB,aAAT,IAA0B,CAA3B,CADN,IAEA1D,MAAM,CAACK,YAAP,CAAoBM,eAJf;AAKPgD,MAAAA,IAAI,EACF,CAACF,MAAM,CAACrB,QAAQ,CAAC1B,iBAAT,IAA8B,CAA/B,CAAN,IACC+C,MAAM,CAACrB,QAAQ,CAACwB,WAAT,IAAwB,CAAzB,CADP,IAEC5D,MAAM,CAACG,eAAP,CAAuBC,WAFzB,IAEwC,CARnC;AASPyD,MAAAA,KAAK,EACH,CAACJ,MAAM,CAACrB,QAAQ,CAAC1B,iBAAT,IAA8B,CAA/B,CAAN,IACC+C,MAAM,CAACrB,QAAQ,CAAC0B,YAAT,IAAyB,CAA1B,CADP,IAEC9D,MAAM,CAACG,eAAP,CAAuBC,WAFzB,IAEwC,CAZnC;AAaP2D,MAAAA,GAAG,EACDN,MAAM,CAACrB,QAAQ,CAACzB,eAAT,IAA4B,CAA7B,CAAN,IACA8C,MAAM,CAACrB,QAAQ,CAAC4B,UAAT,IAAuB,CAAxB,CADN,IAEAhE,MAAM,CAACK,YAAP,CAAoBM;AAhBf,KADX;AAmBE,IAAA,aAAa,EAAE,IAnBjB;AAoBE,IAAA,oBAAoB,EAAEiC,KApBxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAsBE,gCAAC,iCAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACnB,KAAK,KAAKC,iBAAiB,GAAG,CAA9B,GAAkC1B,MAAM,CAACG,eAAzC,GAA2D,EAA5D,EAAgEiC,QAAhE,EAA0EgB,SAA1E,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAGE,gCAAC,IAAD;AAAM,IAAA,MAAM,EAAEf,YAAd;AAA4B,IAAA,QAAQ,EAAEJ,IAAtC;AAA4C,IAAA,KAAK,EAAEI,YAAnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAHF,EAIE,gCAAC,iCAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACrC,MAAM,CAACa,YAAR,EAAsByC,aAAtB,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,IAAD;AAAM,IAAA,MAAM,EAAEjB,YAAd;AAA4B,IAAA,QAAQ,EAAEL,WAAtC;AAAmD,IAAA,KAAK,EAAEK,YAA1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,CAJF,CAtBF,CADF;AAiCD,CAjIM;;;;AA2JP,IAAM4B,8BAA8B,GAAG,SAAjCA,8BAAiC,CASrC1C,KATqC,EAUlC;AACH,MACE2C,SADF,GAUI3C,KAVJ,CACE2C,SADF;AAAA,MAEEC,IAFF,GAUI5C,KAVJ,CAEE4C,IAFF;AAAA,MAGE3C,cAHF,GAUID,KAVJ,CAGEC,cAHF;AAAA,MAIE4C,aAJF,GAUI7C,KAVJ,CAIE6C,aAJF;AAAA,MAKEzC,gBALF,GAUIJ,KAVJ,CAKEI,gBALF;AAAA,MAME0C,qBANF,GAUI9C,KAVJ,CAME8C,qBANF;AAAA,MAOExC,UAPF,GAUIN,KAVJ,CAOEM,UAPF;AAAA,MAQED,UARF,GAUIL,KAVJ,CAQEK,UARF;AAAA,8BAUIL,KAVJ,CASE+C,kBATF;AAAA,MASEA,kBATF,sCASuBxD,YATvB;;AAYA,mBAQI,6BARJ;AAAA,oCACEgB,KADF;AAAA,MAEcyC,UAFd,oBAEIxC,MAFJ,CAEcwC,UAFd;AAAA,+CAGIrC,OAHJ;AAAA,MAIesC,aAJf,yBAIMC,OAJN;AAAA,qDAKMtC,aALN;AAAA,MAKuBuC,MALvB,0BAKuBA,MALvB;AAAA,MAK+BrE,YAL/B,0BAK+BA,YAL/B;;AAUA,MAAMsE,kBAAkB,GAAG,2CAAe,CAAf,CAA3B;AACA,MAAMC,mBAAmB,GAAG,2CAAe,CAAf,CAA5B;AACA,MAAMC,kBAAkB,GAAG,2CAAe;AACxCC,IAAAA,MAAM,EAAE,CADgC;AAExCC,IAAAA,KAAK,EAAE;AAFiC,GAAf,CAA3B;;AAKA,6BAAkB,uCAAlB;AAAA,MAAQA,KAAR,wBAAQA,KAAR;;AAEA,MAAMC,aAAa,GAAG,6CAA4B,YAAM;AACtD,QAAMzE,YAAY,GAAGF,YAAY,CAACE,YAAb,IAA6BP,MAAM,CAACK,YAAP,CAAoBE,YAAtE;AACA,QAAM0E,eAAe,GACnBb,aAAa,CAACrB,KAAd,CAAoBmC,CAApB,GAAwBL,kBAAkB,CAAC9B,KAAnB,CAAyBgC,KAAjD,GAAyDxE,YAAzD,GAAwEiE,aAD1E;AAEA,QAAMW,gBAAgB,GAAGf,aAAa,CAACrB,KAAd,CAAoBmC,CAApB,GAAwB3E,YAAxB,GAAuCwE,KAAK,GAAGP,aAAxE;AACA,QAAMb,IAAI,GAAG,CAACsB,eAAD,GACTT,aADS,GAET,CAACW,gBAAD,GACAJ,KAAK,GAAGP,aAAR,GAAwBK,kBAAkB,CAAC9B,KAAnB,CAAyBgC,KADjD,GAEAX,aAAa,CAACrB,KAAd,CAAoBmC,CAApB,GAAwBL,kBAAkB,CAAC9B,KAAnB,CAAyBgC,KAAjD,GAAyDxE,YAJ7D;AAKA,QAAMwD,GAAG,GAAGK,aAAa,CAACrB,KAAd,CAAoBqC,CAApB,GAAwBP,kBAAkB,CAAC9B,KAAnB,CAAyB+B,MAAjD,GAA0DJ,MAAM,GAAG,CAA/E;AAEA,WAAO;AACLf,MAAAA,IAAI,EAAJA,IADK;AAELI,MAAAA,GAAG,EAAHA;AAFK,KAAP;AAID,GAhBqB,CAAtB;AAkBA,MAAMsB,sBAAsB,GAAG,6CAA8B;AAAA,WAAO;AAClEC,MAAAA,EAAE,EAAElB,aAAa,CAACrB,KAAd,CAAoBmC,CAApB,GAAwBR,MAAM,GAAG,CAD6B;AAElEa,MAAAA,EAAE,EAAEnB,aAAa,CAACrB,KAAd,CAAoBqC,CAApB,GAAwBV,MAAM,GAAG,CAF6B;AAGlEc,MAAAA,CAAC,EAAEd,MAAM,GAAG;AAHsD,KAAP;AAAA,GAA9B,CAA/B;AAMA,MAAMe,uBAAuB,GAAG,6CAA8B;AAAA,WAAO;AACnEH,MAAAA,EAAE,EAAElB,aAAa,CAACrB,KAAd,CAAoBmC,CAApB,GAAwBR,MADuC;AAEnEa,MAAAA,EAAE,EAAEnB,aAAa,CAACrB,KAAd,CAAoBqC,CAF2C;AAGnEI,MAAAA,CAAC,EAAEd;AAHgE,KAAP;AAAA,GAA9B,CAAhC;AAMA,MAAMgB,eAAe,GAAG,6CACtB;AAAA,WAAO;AACLrC,MAAAA,SAAS,EAAE,CACT;AACEsC,QAAAA,UAAU,EAAE,wCAAY9D,UAAU,CAACkB,KAAvB,EAA8B,CAAC,CAAD,EAAI,CAAJ,CAA9B,EAAsC,CAAC,CAAC4B,kBAAkB,CAAC5B,KAApB,GAA4B,CAA7B,EAAgC,CAAhC,CAAtC;AADd,OADS,EAIT;AACE6C,QAAAA,UAAU,EAAE,wCACV/D,UAAU,CAACkB,KADD,EAEV,CAAC,CAAD,EAAI,CAAJ,CAFU,EAGV,CACEmB,SAAS,KAAK,MAAd,GAAuB,CAACU,mBAAmB,CAAC7B,KAArB,GAA6B,CAApD,GAAwD6B,mBAAmB,CAAC7B,KAApB,GAA4B,CADtF,EAEE,CAFF,CAHU;AADd,OAJS,EAcT;AACEL,QAAAA,KAAK,EAAE,wCAAYb,UAAU,CAACkB,KAAvB,EAA8B,CAAC,CAAD,EAAI,GAAJ,EAAS,CAAT,CAA9B,EAA2C,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,CAA3C;AADT,OAdS;AADN,KAAP;AAAA,GADsB,EAqBtB,CAACmB,SAAD,CArBsB,CAAxB;AAwBA,MAAMxC,iBAAiB,GAAG4C,kBAAkB,CAACuB,MAA7C;AAEA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE5F,wBAAW6F,YAAxB;AAAsC,IAAA,MAAM,EAAC,uBAA7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iCAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAE,wBAAiC;AAAA,UAAfC,MAAe,QAA9BC,WAA8B,CAAfD,MAAe;AACzCnB,MAAAA,mBAAmB,CAAC7B,KAApB,GAA4BgD,MAAM,CAAChB,KAAnC;AACD,KAHH;AAIE,IAAA,KAAK,EAAEW,eAJT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAME,gCAAC,0BAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,cAAD;AAAgB,IAAA,aAAa,EAAEL,sBAA/B;AAAuD,IAAA,IAAI,EAAElB,IAAI,IAAII,UAArE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEE,gCAAC,cAAD;AAAgB,IAAA,aAAa,EAAEkB,uBAA/B;AAAwD,IAAA,IAAI,EAAEtB,IAAI,IAAII,UAAtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAFF,CANF,EAUE,gCAAC,iCAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAE,yBAIJ;AAAA,wCAHJyB,WAGI,CAFFD,MAEE;AAAA,UAFQjB,MAER,yBAFQA,MAER;AAAA,UAFuBmB,WAEvB,yBAFgBlB,KAEhB;AACJF,MAAAA,kBAAkB,CAAC9B,KAAnB,GAA2B;AAAE+B,QAAAA,MAAM,EAANA,MAAF;AAAUC,QAAAA,KAAK,EAAEkB;AAAjB,OAA3B;AACAtB,MAAAA,kBAAkB,CAAC5B,KAAnB,GAA2B+B,MAA3B;AACAT,MAAAA,qBAAqB,CAACS,MAAD,CAArB;AACD,KATH;AAUE,IAAA,KAAK,EAAE,CACL9E,MAAM,CAACK,YADF,EAEL;AAAE6F,MAAAA,eAAe,EAAE3B;AAAnB,KAFK,EAGLS,aAHK,EAIL3E,YAJK,CAVT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAiBGiE,kBAjBH,oBAiBGA,kBAAkB,CAAE6B,GAApB,CAAwB,iBAAiB1E,KAAjB;AAAA,QAAGV,IAAH,SAAGA,IAAH;AAAA,QAASE,IAAT,SAASA,IAAT;AAAA,WACvB,gCAAC,cAAD;AACE,MAAA,cAAc,EAAEO,cADlB;AAEE,MAAA,IAAI,EAAET,IAFR;AAGE,MAAA,KAAK,EAAEU,KAHT;AAIE,MAAA,GAAG,EAAKR,IAAL,SAAaQ,KAJlB;AAKE,MAAA,iBAAiB,EAAEC,iBALrB;AAME,MAAA,gBAAgB,EAAEC,gBANpB;AAOE,MAAA,UAAU,EAAEC,UAPd;AAQE,MAAA,UAAU,EAAEC,UARd;AASE,MAAA,IAAI,EAAEZ,IATR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADuB;AAAA,GAAxB,CAjBH,CAVF,CADF,CADF;AA8CD,CAhJD;;AAkJA,IAAMmF,QAAQ,GAAG,SAAXA,QAAW,CASfC,SATe,EAUfC,SAVe,EAWZ;AACH,MAAmBC,aAAnB,GAA6EF,SAA7E,CAAQnC,SAAR;AAAA,MAAoDsC,oBAApD,GAA6EH,SAA7E,CAAkC1E,gBAAlC;AACA,MAAmB8E,aAAnB,GAA6EH,SAA7E,CAAQpC,SAAR;AAAA,MAAoDwC,oBAApD,GAA6EJ,SAA7E,CAAkC3E,gBAAlC;AAEA,MAAMgF,cAAc,GAAGJ,aAAa,KAAKE,aAAzC;AACA,MAAI,CAACE,cAAL,EAAqB,OAAO,KAAP;AAErB,MAAMC,qBAAqB,GAAGJ,oBAAoB,CAACX,MAArB,KAAgCa,oBAAoB,CAACb,MAAnF;AACA,MAAI,CAACe,qBAAL,EAA4B,OAAO,KAAP;AAE5B,SAAO,IAAP;AACD,CAtBD;;AAwBA,IAAMC,2BAA2B,GAAGC,kBAAMC,IAAN,CAClC9C,8BADkC,EAElCmC,QAFkC,CAApC;;AA2BO,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAsB,CASjCzF,KATiC,EAU9B;AACH,8BAAiB,sDAAjB;AAAA,MAAQ0F,IAAR,yBAAQA,IAAR;;AACA,4BAA+B,0CAA/B;AAAA,MAAQ3C,kBAAR,uBAAQA,kBAAR;;AACA,2BAAuB,wCAAvB;AAAA,MAAQ1C,UAAR,sBAAQA,UAAR;;AAEA,SACE,gCAAC,2BAAD,gCACOqF,IAAI,IAAI,EADf;AAEQrF,IAAAA,UAAU,EAAVA,UAFR;AAEoB0C,IAAAA,kBAAkB,EAAlBA;AAFpB,KAGM/C,KAHN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADF;AAOD,CAtBM;;;AAwBPyF,mBAAmB,CAACE,WAApB,GAAkC,4CAAlC","sourcesContent":["import React from 'react';\nimport { StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';\nimport Animated, {\n  cancelAnimation,\n  interpolate,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedProps,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useSharedValue,\n  withDelay,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport Svg, { Circle, CircleProps, FillProps } from 'react-native-svg';\n\nimport {\n  MessageOverlayData,\n  useMessageOverlayContext,\n} from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport {\n  OverlayContextValue,\n  useOverlayContext,\n} from '../../contexts/overlayContext/OverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  IconProps,\n  LOLReaction,\n  LoveReaction,\n  ThumbsDownReaction,\n  ThumbsUpReaction,\n  WutReaction,\n} from '../../icons';\n\nimport { triggerHaptic } from '../../native';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\nimport type { ReactionData } from '../../utils/utils';\n\nconst AnimatedCircle = Animated.createAnimatedComponent\n  ? Animated.createAnimatedComponent(Circle)\n  : Circle;\n\nconst styles = StyleSheet.create({\n  notLastReaction: {\n    marginRight: 16,\n  },\n  reactionList: {\n    alignItems: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n    justifyContent: 'center',\n    paddingHorizontal: 16,\n    paddingVertical: 12,\n    position: 'absolute',\n  },\n  selectedIcon: {\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\ntype ReactionButtonProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<\n  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  'ownReactionTypes' | 'handleReaction' | 'setOverlay'\n> & {\n  Icon: React.FC<IconProps>;\n  index: number;\n  numberOfReactions: number;\n  showScreen: Animated.SharedValue<number>;\n  type: string;\n};\n\nexport const ReactionButton = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: ReactionButtonProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    handleReaction,\n    Icon,\n    index,\n    numberOfReactions,\n    ownReactionTypes,\n    setOverlay,\n    showScreen,\n    type,\n  } = props;\n  const {\n    theme: {\n      colors: { accent_blue, grey },\n      overlay: {\n        reactionsList: { reaction, reactionSize },\n      },\n    },\n  } = useTheme();\n  const selected = ownReactionTypes.includes(type);\n  const animationScale = useSharedValue(0);\n  const hasShown = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const selectedOpacity = useSharedValue(selected ? 1 : 0);\n\n  const onTap = useAnimatedGestureHandler<TapGestureHandlerStateChangeEvent>(\n    {\n      onEnd: () => {\n        runOnJS(triggerHaptic)('impactLight');\n        selectedOpacity.value = withTiming(selected ? 0 : 1, { duration: 250 }, () => {\n          if (handleReaction) {\n            runOnJS(handleReaction)(type);\n          }\n          runOnJS(setOverlay)('none');\n        });\n      },\n      onFinish: () => {\n        cancelAnimation(scale);\n        scale.value = withTiming(1, { duration: 100 });\n      },\n      onStart: () => {\n        cancelAnimation(scale);\n        scale.value = withTiming(1.5, { duration: 100 });\n      },\n    },\n    [handleReaction, selected, setOverlay, type],\n  );\n\n  useAnimatedReaction(\n    () => {\n      if (showScreen.value > 0.8 && hasShown.value === 0) {\n        return 1;\n      }\n      return 0;\n    },\n    (result) => {\n      if (hasShown.value === 0 && result !== 0) {\n        hasShown.value = 1;\n        animationScale.value = withSequence(\n          withDelay(60 * (numberOfReactions - (index + 1)), withTiming(0.1, { duration: 50 })),\n          withTiming(1.5, { duration: 250 }),\n          withTiming(1, { duration: 250 }),\n        );\n      }\n    },\n    [index, numberOfReactions],\n  );\n\n  const iconStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          scale: animationScale.value,\n        },\n        {\n          scale: scale.value,\n        },\n      ],\n    }),\n    [],\n  );\n\n  const selectedStyle = useAnimatedStyle<ViewStyle>(() => ({\n    opacity: selectedOpacity.value,\n  }));\n\n  return (\n    <TapGestureHandler\n      hitSlop={{\n        bottom:\n          Number(reaction.paddingVertical || 0) ||\n          Number(reaction.paddingBottom || 0) ||\n          styles.reactionList.paddingVertical,\n        left:\n          (Number(reaction.paddingHorizontal || 0) ||\n            Number(reaction.paddingLeft || 0) ||\n            styles.notLastReaction.marginRight) / 2,\n        right:\n          (Number(reaction.paddingHorizontal || 0) ||\n            Number(reaction.paddingRight || 0) ||\n            styles.notLastReaction.marginRight) / 2,\n        top:\n          Number(reaction.paddingVertical || 0) ||\n          Number(reaction.paddingTop || 0) ||\n          styles.reactionList.paddingVertical,\n      }}\n      maxDurationMs={3000}\n      onHandlerStateChange={onTap}\n    >\n      <Animated.View\n        style={[index !== numberOfReactions - 1 ? styles.notLastReaction : {}, reaction, iconStyle]}\n      >\n        <Icon height={reactionSize} pathFill={grey} width={reactionSize} />\n        <Animated.View style={[styles.selectedIcon, selectedStyle]}>\n          <Icon height={reactionSize} pathFill={accent_blue} width={reactionSize} />\n        </Animated.View>\n      </Animated.View>\n    </TapGestureHandler>\n  );\n};\n\nexport type OverlayReactionListPropsWithContext<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<\n  MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>,\n  'alignment' | 'handleReaction' | 'messagesContext'\n> &\n  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &\n  Pick<OverlayContextValue, 'setOverlay'> & {\n    messageLayout: Animated.SharedValue<{\n      x: number;\n      y: number;\n    }>;\n    ownReactionTypes: string[];\n    setReactionListHeight: React.Dispatch<React.SetStateAction<number>>;\n    showScreen: Animated.SharedValue<number>;\n    fill?: FillProps['fill'];\n  };\n\nconst OverlayReactionListWithContext = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const {\n    alignment,\n    fill,\n    handleReaction,\n    messageLayout,\n    ownReactionTypes,\n    setReactionListHeight,\n    showScreen,\n    setOverlay,\n    supportedReactions = reactionData,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white_snow },\n      overlay: {\n        padding: screenPadding,\n        reactionsList: { radius, reactionList },\n      },\n    },\n  } = useTheme();\n\n  const reactionListHeight = useSharedValue(0);\n  const reactionBubbleWidth = useSharedValue(0);\n  const reactionListLayout = useSharedValue({\n    height: 0,\n    width: 0,\n  });\n\n  const { width } = useWindowDimensions();\n\n  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {\n    const borderRadius = reactionList.borderRadius || styles.reactionList.borderRadius;\n    const insideLeftBound =\n      messageLayout.value.x - reactionListLayout.value.width + borderRadius > screenPadding;\n    const insideRightBound = messageLayout.value.x + borderRadius < width - screenPadding;\n    const left = !insideLeftBound\n      ? screenPadding\n      : !insideRightBound\n      ? width - screenPadding - reactionListLayout.value.width\n      : messageLayout.value.x - reactionListLayout.value.width + borderRadius;\n    const top = messageLayout.value.y - reactionListLayout.value.height - radius * 2;\n\n    return {\n      left,\n      top,\n    };\n  });\n\n  const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({\n    cx: messageLayout.value.x - radius * 3,\n    cy: messageLayout.value.y - radius * 3,\n    r: radius * 2,\n  }));\n\n  const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({\n    cx: messageLayout.value.x - radius,\n    cy: messageLayout.value.y,\n    r: radius,\n  }));\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-reactionListHeight.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [\n              alignment === 'left' ? -reactionBubbleWidth.value / 2 : reactionBubbleWidth.value / 2,\n              0,\n            ],\n          ),\n        },\n        {\n          scale: interpolate(showScreen.value, [0, 0.8, 1], [0, 0, 1]),\n        },\n      ],\n    }),\n    [alignment],\n  );\n\n  const numberOfReactions = supportedReactions.length;\n\n  return (\n    <View style={StyleSheet.absoluteFill} testID='overlay-reaction-list'>\n      <Animated.View\n        onLayout={({ nativeEvent: { layout } }) => {\n          reactionBubbleWidth.value = layout.width;\n        }}\n        style={showScreenStyle}\n      >\n        <Svg>\n          <AnimatedCircle animatedProps={animatedBigCircleProps} fill={fill || white_snow} />\n          <AnimatedCircle animatedProps={animateSmallCircleProps} fill={fill || white_snow} />\n        </Svg>\n        <Animated.View\n          onLayout={({\n            nativeEvent: {\n              layout: { height, width: layoutWidth },\n            },\n          }) => {\n            reactionListLayout.value = { height, width: layoutWidth };\n            reactionListHeight.value = height;\n            setReactionListHeight(height);\n          }}\n          style={[\n            styles.reactionList,\n            { backgroundColor: white_snow },\n            animatedStyle,\n            reactionList,\n          ]}\n        >\n          {supportedReactions?.map(({ Icon, type }, index) => (\n            <ReactionButton<At, Ch, Co, Ev, Me, Re, Us>\n              handleReaction={handleReaction}\n              Icon={Icon}\n              index={index}\n              key={`${type}_${index}`}\n              numberOfReactions={numberOfReactions}\n              ownReactionTypes={ownReactionTypes}\n              setOverlay={setOverlay}\n              showScreen={showScreen}\n              type={type}\n            />\n          ))}\n        </Animated.View>\n      </Animated.View>\n    </View>\n  );\n};\n\nconst areEqual = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  prevProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  nextProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { alignment: prevAlignment, ownReactionTypes: prevOwnReactionTypes } = prevProps;\n  const { alignment: nextAlignment, ownReactionTypes: nextOwnReactionTypes } = nextProps;\n\n  const alignmentEqual = prevAlignment === nextAlignment;\n  if (!alignmentEqual) return false;\n\n  const ownReactionTypesEqual = prevOwnReactionTypes.length === nextOwnReactionTypes.length;\n  if (!ownReactionTypesEqual) return false;\n\n  return true;\n};\n\nconst MemoizedOverlayReactionList = React.memo(\n  OverlayReactionListWithContext,\n  areEqual,\n) as typeof OverlayReactionListWithContext;\n\nexport type OverlayReactionListProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Omit<\n  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n  'setOverlay' | 'supportedReactions'\n> &\n  Partial<\n    Pick<\n      OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n      'setOverlay' | 'supportedReactions'\n    >\n  >;\n\n/**\n * OverlayReactionList - A high level component which implements all the logic required for a message overlay reaction list\n */\nexport const OverlayReactionList = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { setOverlay } = useOverlayContext();\n\n  return (\n    <MemoizedOverlayReactionList\n      {...(data || {})}\n      {...{ setOverlay, supportedReactions }}\n      {...props}\n    />\n  );\n};\n\nOverlayReactionList.displayName = 'OverlayReactionList{overlay{reactionList}}';\n"]}

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

@@ -11,18 +11,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 
-var _Avatar = require("../Avatar/Avatar");
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _icons = require("../../icons");
 
-var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactions.tsx";
 
@@ -116,7 +114,7 @@ var ReactionIcon = function ReactionIcon(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 120,
+      lineNumber: 137,
       columnNumber: 10
     }
   });
@@ -128,7 +126,8 @@ var OverlayReactions = function OverlayReactions(props) {
       _props$supportedReact = props.supportedReactions,
       supportedReactions = _props$supportedReact === void 0 ? reactionData : _props$supportedReact,
       showScreen = props.showScreen,
-      title = props.title;
+      title = props.title,
+      OverlayReactionsAvatar = props.OverlayReactionsAvatar;
   var layoutHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   var layoutWidth = (0, _reactNativeReanimated.useSharedValue)(0);
 
@@ -164,12 +163,11 @@ var OverlayReactions = function OverlayReactions(props) {
   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 _ref2$item = _ref2.item,
-        _ref2$item$alignment = _ref2$item.alignment,
-        alignment = _ref2$item$alignment === void 0 ? 'left' : _ref2$item$alignment,
-        image = _ref2$item.image,
-        name = _ref2$item.name,
-        type = _ref2$item.type;
+    var item = _ref2.item;
+    var _item$alignment = item.alignment,
+        alignment = _item$alignment === void 0 ? 'left' : _item$alignment,
+        name = item.name,
+        type = item.type;
     var x = avatarSize / 2 - avatarSize / (radius * 4) * (alignment === 'left' ? 1 : -1);
     var y = avatarSize - radius;
     var left = alignment === 'left' ? x - (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) + radius : x - radius;
@@ -179,7 +177,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 203,
+        lineNumber: 222,
         columnNumber: 7
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -187,17 +185,16 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 204,
+        lineNumber: 223,
         columnNumber: 9
       }
-    }, _react["default"].createElement(_Avatar.Avatar, {
-      image: image,
-      name: name,
+    }, _react["default"].createElement(OverlayReactionsAvatar, {
+      reaction: item,
       size: avatarSize,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 205,
+        lineNumber: 224,
         columnNumber: 11
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -205,14 +202,14 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 206,
+        lineNumber: 225,
         columnNumber: 11
       }
     }, _react["default"].createElement(_reactNativeSvg["default"], {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 207,
+        lineNumber: 226,
         columnNumber: 13
       }
     }, _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -225,7 +222,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 208,
+        lineNumber: 227,
         columnNumber: 15
       }
     }), _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -238,7 +235,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 216,
+        lineNumber: 235,
         columnNumber: 15
       }
     })), _react["default"].createElement(_reactNative.View, {
@@ -252,7 +249,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 225,
+        lineNumber: 244,
         columnNumber: 13
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -260,14 +257,14 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 238,
+        lineNumber: 257,
         columnNumber: 13
       }
     }, _react["default"].createElement(_reactNativeSvg["default"], {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 239,
+        lineNumber: 258,
         columnNumber: 15
       }
     }, _react["default"].createElement(_reactNativeSvg.Circle, {
@@ -278,7 +275,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 240,
+        lineNumber: 259,
         columnNumber: 17
       }
     }))), _react["default"].createElement(_reactNative.View, {
@@ -292,7 +289,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 248,
+        lineNumber: 267,
         columnNumber: 13
       }
     }, _react["default"].createElement(ReactionIcon, {
@@ -303,7 +300,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 265,
+        lineNumber: 284,
         columnNumber: 15
       }
     })))), _react["default"].createElement(_reactNative.View, {
@@ -311,7 +308,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 274,
+        lineNumber: 293,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.Text, {
@@ -321,7 +318,7 @@ var OverlayReactions = function OverlayReactions(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 275,
+        lineNumber: 294,
         columnNumber: 11
       }
     }, name)));
@@ -350,7 +347,7 @@ var OverlayReactions = function OverlayReactions(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 303,
+      lineNumber: 322,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNative.Text, {
@@ -360,7 +357,7 @@ var OverlayReactions = function OverlayReactions(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 310,
+      lineNumber: 329,
       columnNumber: 7
     }
   }, title), _react["default"].createElement(_reactNativeGestureHandler.FlatList, {
@@ -378,7 +375,7 @@ var OverlayReactions = function OverlayReactions(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 311,
+      lineNumber: 330,
       columnNumber: 7
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["OverlayReactions.tsx"],"names":["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","pathFill","size","supportedReactions","find","reaction","Unknown","OverlayReactions","props","overlayAlignment","alignment","reactions","showScreen","layoutHeight","layoutWidth","theme","colors","accent_blue","black","grey_gainsboro","white","overlay","overlayPadding","avatarSize","radius","titleStyle","supportedReactionTypes","map","supportedReaction","filteredReactions","filter","includes","numColumns","Math","floor","Number","maxHeight","renderItem","item","image","name","x","y","left","top","absoluteFill","backgroundColor","borderColor","borderWidth","color","showScreenStyle","transform","translateY","value","translateX","scale","layout","nativeEvent","index","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { FlatList } from 'react-native-gesture-handler';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport { Avatar } from '../Avatar/Avatar';\n\nimport {\n  LOLReaction,\n  LoveReaction,\n  ThumbsDownReaction,\n  ThumbsUpReaction,\n  Unknown,\n  WutReaction,\n} from '../../icons';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nimport type { Alignment } from '../../contexts/messageContext/MessageContext';\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  name: string;\n  type: string;\n  image?: string;\n};\n\nexport type OverlayReactionsProps = {\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  } = 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: { alignment = 'left', image, name, type } }: { item: Reaction }) => {\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          <Avatar image={image} name={name} 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"]}
+{"version":3,"sources":["OverlayReactions.tsx"],"names":["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","pathFill","size","supportedReactions","find","reaction","Unknown","OverlayReactions","props","overlayAlignment","alignment","reactions","showScreen","OverlayReactionsAvatar","layoutHeight","layoutWidth","theme","colors","accent_blue","black","grey_gainsboro","white","overlay","overlayPadding","avatarSize","radius","titleStyle","supportedReactionTypes","map","supportedReaction","filteredReactions","filter","includes","numColumns","Math","floor","Number","maxHeight","renderItem","item","name","x","y","left","top","absoluteFill","backgroundColor","borderColor","borderWidth","color","showScreenStyle","transform","translateY","value","translateX","scale","layout","nativeEvent","index","displayName"],"mappings":"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","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 {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} 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  name: string;\n  type: string;\n  image?: string;\n};\n\nexport type OverlayReactionsProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>, '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"]}

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

@@ -0,0 +1,41 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverlayReactionsAvatar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _Avatar = require("../Avatar/Avatar");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx";
+
+var OverlayReactionsAvatar = function OverlayReactionsAvatar(props) {
+  var _props$reaction = props.reaction,
+      image = _props$reaction.image,
+      name = _props$reaction.name,
+      size = props.size;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      BASE_AVATAR_SIZE = _useTheme.theme.avatar.BASE_AVATAR_SIZE;
+
+  return _react["default"].createElement(_Avatar.Avatar, {
+    image: image,
+    name: name,
+    size: size || BASE_AVATAR_SIZE,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 10
+    }
+  });
+};
+
+exports.OverlayReactionsAvatar = OverlayReactionsAvatar;
+OverlayReactionsAvatar.displayName = 'OverlayReactionsAvatar{overlay{reactionsAvatar}}';
+//# sourceMappingURL=OverlayReactionsAvatar.js.map