stream-chat-react-native-core 5.22.0-beta.2 → 5.22.0-beta.3

package/lib/module/components/MessageList/InlineUnreadIndicator.js

@@ -9,7 +9,7 @@ var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
-var _utils = require("../../utils/utils");
+var _useViewport2 = require("../../hooks/useViewport");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineUnreadIndicator.tsx";
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,12 +37,14 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     text = _useTheme$theme$messa.text;
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
     t = _useTranslationContex.t;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.container, container],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 33,
+      lineNumber: 34,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
@@ -50,30 +52,30 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     style: {
       position: 'absolute'
     },
-    width: (0, _utils.vw)(100),
+    width: vw(100),
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 35,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeSvg.Rect, {
     fill: "url(#gradient)",
     height: 24,
-    width: (0, _utils.vw)(100),
+    width: vw(100),
     x: 0,
     y: 0,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 36,
       columnNumber: 9
     }
   }), _react["default"].createElement(_reactNativeSvg.Defs, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 36,
+      lineNumber: 37,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeSvg.LinearGradient, {
@@ -86,7 +88,7 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 38,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeSvg.Stop, {
@@ -96,7 +98,7 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 39,
       columnNumber: 13
     }
   }), _react["default"].createElement(_reactNativeSvg.Stop, {
@@ -106,7 +108,7 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 39,
+      lineNumber: 40,
       columnNumber: 13
     }
   })))), _react["default"].createElement(_reactNative.Text, {
@@ -116,7 +118,7 @@ var InlineUnreadIndicator = function InlineUnreadIndicator() {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 43,
+      lineNumber: 44,
       columnNumber: 7
     }
   }, t('Unread Messages')));

package/lib/module/components/MessageList/InlineUnreadIndicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_ThemeContext","_TranslationContext","_utils","_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","container","alignItems","justifyContent","padding","width","text","fontSize","InlineUnreadIndicator","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","bg_gradient_end","bg_gradient_start","grey","_useTheme$theme$messa","messageList","inlineUnreadIndicator","_useTranslationContex","useTranslationContext","t","createElement","View","style","__self","__source","fileName","lineNumber","columnNumber","height","position","vw","Rect","fill","x","y","Defs","LinearGradient","gradientUnits","id","x1","x2","y1","y2","Stop","offset","stopColor","stopOpacity","Text","color","exports"],"sources":["InlineUnreadIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { vw } from '../../utils/utils';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    width: '100%',\n  },\n  text: {\n    fontSize: 12,\n  },\n});\n\nexport const InlineUnreadIndicator: React.FC = () => {\n  const {\n    theme: {\n      colors: { bg_gradient_end, bg_gradient_start, grey },\n      messageList: {\n        inlineUnreadIndicator: { container, text },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n\n  return (\n    <View style={[styles.container, container]}>\n      <Svg height={24} style={{ position: 'absolute' }} width={vw(100)}>\n        <Rect fill='url(#gradient)' height={24} width={vw(100)} x={0} y={0} />\n        <Defs>\n          <LinearGradient gradientUnits='userSpaceOnUse' id='gradient' x1={0} x2={0} y1={24} y2={0}>\n            <Stop offset={1} stopColor={bg_gradient_end} stopOpacity={1} />\n            <Stop offset={0} stopColor={bg_gradient_start} stopOpacity={1} />\n          </LinearGradient>\n        </Defs>\n      </Svg>\n      <Text style={[styles.text, { color: grey }, text]}>{t('Unread Messages')}</Text>\n    </View>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeSvg","_interopRequireWildcard","_ThemeContext","_TranslationContext","_useViewport2","_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","container","alignItems","justifyContent","padding","width","text","fontSize","InlineUnreadIndicator","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","bg_gradient_end","bg_gradient_start","grey","_useTheme$theme$messa","messageList","inlineUnreadIndicator","_useTranslationContex","useTranslationContext","t","_useViewport","useViewport","vw","createElement","View","style","__self","__source","fileName","lineNumber","columnNumber","height","position","Rect","fill","x","y","Defs","LinearGradient","gradientUnits","id","x1","x2","y1","y2","Stop","offset","stopColor","stopOpacity","Text","color","exports"],"sources":["InlineUnreadIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { useViewport } from '../../hooks/useViewport';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 10,\n    width: '100%',\n  },\n  text: {\n    fontSize: 12,\n  },\n});\n\nexport const InlineUnreadIndicator: React.FC = () => {\n  const {\n    theme: {\n      colors: { bg_gradient_end, bg_gradient_start, grey },\n      messageList: {\n        inlineUnreadIndicator: { container, text },\n      },\n    },\n  } = useTheme();\n  const { t } = useTranslationContext();\n  const { vw } = useViewport();\n\n  return (\n    <View style={[styles.container, container]}>\n      <Svg height={24} style={{ position: 'absolute' }} width={vw(100)}>\n        <Rect fill='url(#gradient)' height={24} width={vw(100)} x={0} y={0} />\n        <Defs>\n          <LinearGradient gradientUnits='userSpaceOnUse' id='gradient' x1={0} x2={0} y1={24} y2={0}>\n            <Stop offset={1} stopColor={bg_gradient_end} stopOpacity={1} />\n            <Stop offset={0} stopColor={bg_gradient_start} stopOpacity={1} />\n          </LinearGradient>\n        </Defs>\n      </Svg>\n      <Text style={[styles.text, { color: grey }, text]}>{t('Unread Messages')}</Text>\n    </View>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAC,uBAAA,CAAAH,OAAA;AAEA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AAAsD,IAAAO,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;AAEtD,IAAMW,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,SAAS,EAAE;IACTC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,OAAO,EAAE,EAAE;IACXC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEK,IAAMC,qBAA+B,GAAG,SAAlCA,qBAA+BA,CAAA,EAAS;EACnD,IAAAC,SAAA,GAOI,IAAAC,sBAAQ,EAAC,CAAC;IAAAC,eAAA,GAAAF,SAAA,CANZG,KAAK;IAAAC,qBAAA,GAAAF,eAAA,CACHG,MAAM;IAAIC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;IAAEC,iBAAiB,GAAAH,qBAAA,CAAjBG,iBAAiB;IAAEC,IAAI,GAAAJ,qBAAA,CAAJI,IAAI;IAAAC,qBAAA,GAAAP,eAAA,CAClDQ,WAAW,CACTC,qBAAqB;IAAInB,SAAS,GAAAiB,qBAAA,CAATjB,SAAS;IAAEK,IAAI,GAAAY,qBAAA,CAAJZ,IAAI;EAI9C,IAAAe,qBAAA,GAAc,IAAAC,yCAAqB,EAAC,CAAC;IAA7BC,CAAC,GAAAF,qBAAA,CAADE,CAAC;EACT,IAAAC,YAAA,GAAe,IAAAC,yBAAW,EAAC,CAAC;IAApBC,EAAE,GAAAF,YAAA,CAAFE,EAAE;EAEV,OACE7D,MAAA,YAAA8D,aAAA,CAAC3D,YAAA,CAAA4D,IAAI;IAACC,KAAK,EAAE,CAAC/B,MAAM,CAACG,SAAS,EAAEA,SAAS,CAAE;IAAA6B,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,GACzCrE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,WAAG;IAACkE,MAAM,EAAE,EAAG;IAACN,KAAK,EAAE;MAAEO,QAAQ,EAAE;IAAW,CAAE;IAAC/B,KAAK,EAAEqB,EAAE,CAAC,GAAG,CAAE;IAAAI,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC/DrE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,CAAAoE,IAAI;IAACC,IAAI,EAAC,gBAAgB;IAACH,MAAM,EAAE,EAAG;IAAC9B,KAAK,EAAEqB,EAAE,CAAC,GAAG,CAAE;IAACa,CAAC,EAAE,CAAE;IAACC,CAAC,EAAE,CAAE;IAAAV,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,EACtErE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,CAAAwE,IAAI;IAAAX,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,GACHrE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,CAAAyE,cAAc;IAACC,aAAa,EAAC,gBAAgB;IAACC,EAAE,EAAC,UAAU;IAACC,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE,CAAE;IAACC,EAAE,EAAE,EAAG;IAACC,EAAE,EAAE,CAAE;IAAAlB,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,GACvFrE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,CAAAgF,IAAI;IAACC,MAAM,EAAE,CAAE;IAACC,SAAS,EAAEpC,eAAgB;IAACqC,WAAW,EAAE,CAAE;IAAAtB,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,EAC/DrE,MAAA,YAAA8D,aAAA,CAAC1D,eAAA,CAAAgF,IAAI;IAACC,MAAM,EAAE,CAAE;IAACC,SAAS,EAAEnC,iBAAkB;IAACoC,WAAW,EAAE,CAAE;IAAAtB,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAClD,CACZ,CACH,CAAC,EACNrE,MAAA,YAAA8D,aAAA,CAAC3D,YAAA,CAAAqF,IAAI;IAACxB,KAAK,EAAE,CAAC/B,MAAM,CAACQ,IAAI,EAAE;MAAEgD,KAAK,EAAErC;IAAK,CAAC,EAAEX,IAAI,CAAE;IAAAwB,MAAA,EAAAxD,KAAA;IAAAyD,QAAA;MAAAC,QAAA,EAAAzD,YAAA;MAAA0D,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEX,CAAC,CAAC,iBAAiB,CAAQ,CAC3E,CAAC;AAEX,CAAC;AAACgC,OAAA,CAAA/C,qBAAA,GAAAA,qBAAA"}

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

@@ -11,7 +11,7 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _MessageActionListItem = require("./MessageActionListItem");
 var _MessageOverlayContext = require("../../contexts/messageOverlayContext/MessageOverlayContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-var _utils = require("../../utils/utils");
+var _useViewport2 = require("../../hooks/useViewport");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionList.tsx";
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -34,6 +34,8 @@ var MessageActionListWithContext = function MessageActionListWithContext(props)
     message: message,
     messageReactions: messageReactions
   };
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
   var _useTheme = (0, _ThemeContext.useTheme)(),
     white_snow = _useTheme.theme.colors.white_snow;
   var height = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -56,13 +58,14 @@ var MessageActionListWithContext = function MessageActionListWithContext(props)
       height.value = layout.height;
     },
     style: [styles.container, {
-      backgroundColor: white_snow
+      backgroundColor: white_snow,
+      minWidth: vw(65)
     }, showScreenStyle],
     testID: "message-action-list",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 87,
+      lineNumber: 88,
       columnNumber: 5
     }
   }, messageActions == null ? void 0 : messageActions.map(function (messageAction, index) {
@@ -75,7 +78,7 @@ var MessageActionListWithContext = function MessageActionListWithContext(props)
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 96,
+        lineNumber: 97,
         columnNumber: 9
       }
     }));
@@ -106,7 +109,7 @@ var MessageActionList = function MessageActionList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 147,
+      lineNumber: 148,
       columnNumber: 10
     }
   }));
@@ -119,17 +122,8 @@ var styles = _reactNative.StyleSheet.create({
   container: {
     borderRadius: 16,
     marginTop: 8,
-    minWidth: (0, _utils.vw)(65),
     overflow: 'hidden'
   },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: (0, _utils.vw)(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10
-  },
   titleStyle: {
     paddingLeft: 20
   }

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_MessageActionListItem","_MessageOverlayContext","_ThemeContext","_utils","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MessageActionListWithContext","props","alignment","messageActions","showScreen","_props$MessageActionL","MessageActionListItem","DefaultMessageActionListItem","isMyMessage","message","messageReactions","error","isThreadMessage","messageActionProps","_useTheme","useTheme","white_snow","theme","colors","height","useSharedValue","width","showScreenStyle","useAnimatedStyle","transform","translateY","interpolate","value","translateX","scale","createElement","View","onLayout","_ref","layout","nativeEvent","style","styles","container","backgroundColor","testID","__self","__source","fileName","lineNumber","columnNumber","map","messageAction","index","_extends2","title","length","areEqual","prevProps","nextProps","prevAlignment","prevMessageActions","nextAlignment","nextMessageActions","messageActionsEqual","alignmentEqual","MemoizedMessageActionList","React","memo","MessageActionList","_useMessageOverlayCon","useMessageOverlayContext","data","_ref2","exports","StyleSheet","create","bottomBorder","borderBottomWidth","borderRadius","marginTop","minWidth","vw","overflow","row","alignItems","flexDirection","justifyContent","paddingHorizontal","paddingVertical","titleStyle","paddingLeft"],"sources":["MessageActionList.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nimport { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';\n\nimport {\n  MessageOverlayData,\n  useMessageOverlayContext,\n} from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { vw } from '../../utils/utils';\n\nexport type MessageActionListPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  OverlayProviderProps<StreamChatGenerics>,\n  | 'MessageActionListItem'\n  | 'error'\n  | 'isMyMessage'\n  | 'isThreadMessage'\n  | 'message'\n  | 'messageReactions'\n> &\n  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {\n    showScreen: Animated.SharedValue<number>;\n  };\n\nconst MessageActionListWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    alignment,\n    messageActions,\n    showScreen,\n    MessageActionListItem = DefaultMessageActionListItem,\n    isMyMessage,\n    message,\n    messageReactions,\n    error,\n    isThreadMessage,\n  } = props;\n\n  const messageActionProps = {\n    error,\n    isMyMessage,\n    isThreadMessage,\n    message,\n    messageReactions,\n  };\n\n  const {\n    theme: {\n      colors: { white_snow },\n    },\n  } = useTheme();\n\n  const height = useSharedValue(0);\n  const width = useSharedValue(0);\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],\n          ),\n        },\n        {\n          scale: showScreen.value,\n        },\n      ],\n    }),\n    [alignment],\n  );\n\n  return (\n    <Animated.View\n      onLayout={({ nativeEvent: { layout } }) => {\n        width.value = layout.width;\n        height.value = layout.height;\n      }}\n      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}\n      testID='message-action-list'\n    >\n      {messageActions?.map((messageAction, index) => (\n        <MessageActionListItem\n          key={messageAction.title}\n          {...messageActionProps}\n          {...{ ...messageAction, index, length: messageActions.length }}\n        />\n      ))}\n    </Animated.View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,\n  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;\n  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;\n\n  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;\n  if (!messageActionsEqual) return false;\n\n  const alignmentEqual = prevAlignment === nextAlignment;\n  if (!alignmentEqual) return false;\n\n  return true;\n};\n\nconst MemoizedMessageActionList = React.memo(\n  MessageActionListWithContext,\n  areEqual,\n) as typeof MessageActionListWithContext;\n\nexport type MessageActionListProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &\n  Pick<\n    MessageActionListPropsWithContext<StreamChatGenerics>,\n    'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'\n  >;\n\n/**\n * MessageActionList - A high level component which implements all the logic required for MessageActions\n */\nexport const MessageActionList = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListProps<StreamChatGenerics>,\n) => {\n  const { data } = useMessageOverlayContext<StreamChatGenerics>();\n\n  const { alignment, messageActions } = data || {};\n\n  return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;\n};\n\nconst styles = StyleSheet.create({\n  bottomBorder: {\n    borderBottomWidth: 1,\n  },\n  container: {\n    borderRadius: 16,\n    marginTop: 8,\n    minWidth: vw(65),\n    overflow: 'hidden',\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    minWidth: vw(65),\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n  },\n  titleStyle: {\n    paddingLeft: 20,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_MessageActionListItem","_MessageOverlayContext","_ThemeContext","_useViewport2","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MessageActionListWithContext","props","alignment","messageActions","showScreen","_props$MessageActionL","MessageActionListItem","DefaultMessageActionListItem","isMyMessage","message","messageReactions","error","isThreadMessage","messageActionProps","_useViewport","useViewport","vw","_useTheme","useTheme","white_snow","theme","colors","height","useSharedValue","width","showScreenStyle","useAnimatedStyle","transform","translateY","interpolate","value","translateX","scale","createElement","View","onLayout","_ref","layout","nativeEvent","style","styles","container","backgroundColor","minWidth","testID","__self","__source","fileName","lineNumber","columnNumber","map","messageAction","index","_extends2","title","length","areEqual","prevProps","nextProps","prevAlignment","prevMessageActions","nextAlignment","nextMessageActions","messageActionsEqual","alignmentEqual","MemoizedMessageActionList","React","memo","MessageActionList","_useMessageOverlayCon","useMessageOverlayContext","data","_ref2","exports","StyleSheet","create","bottomBorder","borderBottomWidth","borderRadius","marginTop","overflow","titleStyle","paddingLeft"],"sources":["MessageActionList.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nimport { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';\n\nimport {\n  MessageOverlayData,\n  useMessageOverlayContext,\n} from '../../contexts/messageOverlayContext/MessageOverlayContext';\nimport type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useViewport } from '../../hooks/useViewport';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nexport type MessageActionListPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  OverlayProviderProps<StreamChatGenerics>,\n  | 'MessageActionListItem'\n  | 'error'\n  | 'isMyMessage'\n  | 'isThreadMessage'\n  | 'message'\n  | 'messageReactions'\n> &\n  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {\n    showScreen: Animated.SharedValue<number>;\n  };\n\nconst MessageActionListWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    alignment,\n    messageActions,\n    showScreen,\n    MessageActionListItem = DefaultMessageActionListItem,\n    isMyMessage,\n    message,\n    messageReactions,\n    error,\n    isThreadMessage,\n  } = props;\n\n  const messageActionProps = {\n    error,\n    isMyMessage,\n    isThreadMessage,\n    message,\n    messageReactions,\n  };\n  const { vw } = useViewport();\n\n  const {\n    theme: {\n      colors: { white_snow },\n    },\n  } = useTheme();\n\n  const height = useSharedValue(0);\n  const width = useSharedValue(0);\n\n  const showScreenStyle = useAnimatedStyle<ViewStyle>(\n    () => ({\n      transform: [\n        {\n          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),\n        },\n        {\n          translateX: interpolate(\n            showScreen.value,\n            [0, 1],\n            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],\n          ),\n        },\n        {\n          scale: showScreen.value,\n        },\n      ],\n    }),\n    [alignment],\n  );\n\n  return (\n    <Animated.View\n      onLayout={({ nativeEvent: { layout } }) => {\n        width.value = layout.width;\n        height.value = layout.height;\n      }}\n      style={[styles.container, { backgroundColor: white_snow, minWidth: vw(65) }, showScreenStyle]}\n      testID='message-action-list'\n    >\n      {messageActions?.map((messageAction, index) => (\n        <MessageActionListItem\n          key={messageAction.title}\n          {...messageActionProps}\n          {...{ ...messageAction, index, length: messageActions.length }}\n        />\n      ))}\n    </Animated.View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,\n  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;\n  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;\n\n  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;\n  if (!messageActionsEqual) return false;\n\n  const alignmentEqual = prevAlignment === nextAlignment;\n  if (!alignmentEqual) return false;\n\n  return true;\n};\n\nconst MemoizedMessageActionList = React.memo(\n  MessageActionListWithContext,\n  areEqual,\n) as typeof MessageActionListWithContext;\n\nexport type MessageActionListProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &\n  Pick<\n    MessageActionListPropsWithContext<StreamChatGenerics>,\n    'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'\n  >;\n\n/**\n * MessageActionList - A high level component which implements all the logic required for MessageActions\n */\nexport const MessageActionList = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListProps<StreamChatGenerics>,\n) => {\n  const { data } = useMessageOverlayContext<StreamChatGenerics>();\n\n  const { alignment, messageActions } = data || {};\n\n  return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;\n};\n\nconst styles = StyleSheet.create({\n  bottomBorder: {\n    borderBottomWidth: 1,\n  },\n  container: {\n    borderRadius: 16,\n    marginTop: 8,\n    overflow: 'hidden',\n  },\n  titleStyle: {\n    paddingLeft: 20,\n  },\n});\n"],"mappings":"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"}

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

@@ -10,7 +10,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _useMessageActionAnimation = require("./hooks/useMessageActionAnimation");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-var _utils = require("../../utils/utils");
+var _useViewport2 = require("../../hooks/useViewport");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionListItem.tsx";
 var MessageActionListItemWithContext = function MessageActionListItemWithContext(props) {
@@ -21,6 +21,8 @@ var MessageActionListItemWithContext = function MessageActionListItemWithContext
     length = props.length,
     title = props.title,
     titleStyle = props.titleStyle;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
   var _useTheme = (0, _ThemeContext.useTheme)(),
     _useTheme$theme = _useTheme.theme,
     _useTheme$theme$color = _useTheme$theme.colors,
@@ -37,18 +39,20 @@ var MessageActionListItemWithContext = function MessageActionListItemWithContext
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      lineNumber: 65,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    style: [styles.row, index !== length - 1 ? (0, _extends2["default"])({}, styles.bottomBorder, {
+    style: [styles.row, {
+      minWidth: vw(65)
+    }, index !== length - 1 ? (0, _extends2["default"])({}, styles.bottomBorder, {
       borderBottomColor: border
     }) : {}, animatedStyle, messageActions.actionContainer],
     testID: actionType + "-list-item",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 66,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -56,7 +60,7 @@ var MessageActionListItemWithContext = function MessageActionListItemWithContext
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 78,
       columnNumber: 9
     }
   }, icon), _react["default"].createElement(_reactNative.Text, {
@@ -66,7 +70,7 @@ var MessageActionListItemWithContext = function MessageActionListItemWithContext
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 79,
       columnNumber: 9
     }
   }, title)));
@@ -81,7 +85,7 @@ var MessageActionListItem = function MessageActionListItem(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 102,
+      lineNumber: 106,
       columnNumber: 6
     }
   }));
@@ -100,7 +104,6 @@ var styles = _reactNative.StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    minWidth: (0, _utils.vw)(65),
     paddingHorizontal: 20,
     paddingVertical: 10
   },

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_useMessageActionAnimation","_ThemeContext","_utils","_this","_jsxFileName","MessageActionListItemWithContext","props","action","actionType","icon","index","length","title","titleStyle","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","black","border","messageActions","overlay","_useMessageActionAnim","useMessageActionAnimation","animatedStyle","onTap","createElement","TapGestureHandler","onHandlerStateChange","__self","__source","fileName","lineNumber","columnNumber","View","style","styles","row","_extends2","bottomBorder","borderBottomColor","actionContainer","testID","Text","color","messageActionIsEqual","prevProps","nextProps","MemoizedMessageActionListItem","React","memo","exports","MessageActionListItem","StyleSheet","create","borderBottomWidth","container","borderRadius","marginTop","maxWidth","alignItems","flexDirection","justifyContent","minWidth","vw","paddingHorizontal","paddingVertical","paddingLeft"],"sources":["MessageActionListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';\nimport { TapGestureHandler } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\n\nimport { useMessageActionAnimation } from './hooks/useMessageActionAnimation';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { vw } from '../../utils/utils';\nimport type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';\n\nexport type ActionType =\n  | 'blockUser'\n  | 'copyMessage'\n  | 'deleteMessage'\n  | 'editMessage'\n  | 'flagMessage'\n  | 'muteUser'\n  | 'pinMessage'\n  | 'selectReaction'\n  | 'reply'\n  | 'retry'\n  | 'quotedReply'\n  | 'threadReply'\n  | 'unpinMessage';\n\nexport type MessageActionType = {\n  action: () => void;\n  actionType: ActionType;\n  title: string;\n  icon?: React.ReactElement;\n  titleStyle?: StyleProp<TextStyle>;\n};\n\nexport type MessageActionListItemProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = MessageActionType &\n  Pick<\n    MessageOverlayPropsWithContext<StreamChatGenerics>,\n    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'\n  > & {\n    index: number;\n    length: number;\n  };\n\nconst MessageActionListItemWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => {\n  const { action, actionType, icon, index, length, title, titleStyle } = props;\n\n  const {\n    theme: {\n      colors: { black, border },\n      overlay: { messageActions },\n    },\n  } = useTheme();\n\n  const { animatedStyle, onTap } = useMessageActionAnimation({ action });\n\n  return (\n    <TapGestureHandler onHandlerStateChange={onTap}>\n      <Animated.View\n        style={[\n          styles.row,\n          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},\n          animatedStyle,\n          messageActions.actionContainer,\n        ]}\n        testID={`${actionType}-list-item`}\n      >\n        <View style={messageActions.icon}>{icon}</View>\n        <Text style={[styles.titleStyle, messageActions.title, { color: black }, titleStyle]}>\n          {title}\n        </Text>\n      </Animated.View>\n    </TapGestureHandler>\n  );\n};\n\nconst messageActionIsEqual = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  prevProps: MessageActionListItemProps<StreamChatGenerics>,\n  nextProps: MessageActionListItemProps<StreamChatGenerics>,\n) => prevProps.length === nextProps.length;\n\nexport const MemoizedMessageActionListItem = React.memo(\n  MessageActionListItemWithContext,\n  messageActionIsEqual,\n) as typeof MessageActionListItemWithContext;\n\n/**\n * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`\n */\nexport const MessageActionListItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => <MemoizedMessageActionListItem {...props} />;\n\nconst styles = StyleSheet.create({\n  bottomBorder: {\n    borderBottomWidth: 1,\n  },\n  container: {\n    borderRadius: 16,\n    marginTop: 8,\n    maxWidth: 275,\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    minWidth: vw(65),\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n  },\n  titleStyle: {\n    paddingLeft: 20,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_useMessageActionAnimation","_ThemeContext","_useViewport2","_this","_jsxFileName","MessageActionListItemWithContext","props","action","actionType","icon","index","length","title","titleStyle","_useViewport","useViewport","vw","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$color","colors","black","border","messageActions","overlay","_useMessageActionAnim","useMessageActionAnimation","animatedStyle","onTap","createElement","TapGestureHandler","onHandlerStateChange","__self","__source","fileName","lineNumber","columnNumber","View","style","styles","row","minWidth","_extends2","bottomBorder","borderBottomColor","actionContainer","testID","Text","color","messageActionIsEqual","prevProps","nextProps","MemoizedMessageActionListItem","React","memo","exports","MessageActionListItem","StyleSheet","create","borderBottomWidth","container","borderRadius","marginTop","maxWidth","alignItems","flexDirection","justifyContent","paddingHorizontal","paddingVertical","paddingLeft"],"sources":["MessageActionListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';\nimport { TapGestureHandler } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\n\nimport { useMessageActionAnimation } from './hooks/useMessageActionAnimation';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useViewport } from '../../hooks/useViewport';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';\n\nexport type ActionType =\n  | 'blockUser'\n  | 'copyMessage'\n  | 'deleteMessage'\n  | 'editMessage'\n  | 'flagMessage'\n  | 'muteUser'\n  | 'pinMessage'\n  | 'selectReaction'\n  | 'reply'\n  | 'retry'\n  | 'quotedReply'\n  | 'threadReply'\n  | 'unpinMessage';\n\nexport type MessageActionType = {\n  action: () => void;\n  actionType: ActionType;\n  title: string;\n  icon?: React.ReactElement;\n  titleStyle?: StyleProp<TextStyle>;\n};\n\nexport type MessageActionListItemProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = MessageActionType &\n  Pick<\n    MessageOverlayPropsWithContext<StreamChatGenerics>,\n    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'\n  > & {\n    index: number;\n    length: number;\n  };\n\nconst MessageActionListItemWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => {\n  const { action, actionType, icon, index, length, title, titleStyle } = props;\n  const { vw } = useViewport();\n\n  const {\n    theme: {\n      colors: { black, border },\n      overlay: { messageActions },\n    },\n  } = useTheme();\n\n  const { animatedStyle, onTap } = useMessageActionAnimation({ action });\n\n  return (\n    <TapGestureHandler onHandlerStateChange={onTap}>\n      <Animated.View\n        style={[\n          styles.row,\n          {\n            minWidth: vw(65),\n          },\n          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},\n          animatedStyle,\n          messageActions.actionContainer,\n        ]}\n        testID={`${actionType}-list-item`}\n      >\n        <View style={messageActions.icon}>{icon}</View>\n        <Text style={[styles.titleStyle, messageActions.title, { color: black }, titleStyle]}>\n          {title}\n        </Text>\n      </Animated.View>\n    </TapGestureHandler>\n  );\n};\n\nconst messageActionIsEqual = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  prevProps: MessageActionListItemProps<StreamChatGenerics>,\n  nextProps: MessageActionListItemProps<StreamChatGenerics>,\n) => prevProps.length === nextProps.length;\n\nexport const MemoizedMessageActionListItem = React.memo(\n  MessageActionListItemWithContext,\n  messageActionIsEqual,\n) as typeof MessageActionListItemWithContext;\n\n/**\n * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`\n */\nexport const MessageActionListItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => <MemoizedMessageActionListItem {...props} />;\n\nconst styles = StyleSheet.create({\n  bottomBorder: {\n    borderBottomWidth: 1,\n  },\n  container: {\n    borderRadius: 16,\n    marginTop: 8,\n    maxWidth: 275,\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n  },\n  titleStyle: {\n    paddingLeft: 20,\n  },\n});\n"],"mappings":"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"}

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

@@ -19,7 +19,7 @@ var _MessageOverlayContext = require("../../contexts/messageOverlayContext/Messa
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-var _utils = require("../../utils/utils");
+var _useViewport2 = require("../../hooks/useViewport");
 var _MessageTextContainer = require("../Message/MessageSimple/MessageTextContainer");
 var _OverlayReactions = require("../MessageOverlay/OverlayReactions");
 var _this = this,
@@ -61,8 +61,6 @@ var styles = _reactNative.StyleSheet.create({
     overflow: _reactNative.Platform.OS === 'ios' ? 'visible' : 'scroll'
   }
 });
-var screenHeight = (0, _utils.vh)(100);
-var halfScreenHeight = (0, _utils.vh)(50);
 var DefaultMessageTextNumberOfLines = 5;
 var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
   var _message$user;
@@ -110,6 +108,11 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
   };
   var _useTheme = (0, _ThemeContext.useTheme)(),
     theme = _useTheme.theme;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vh = _useViewport.vh,
+    vw = _useViewport.vw;
+  var screenHeight = vh(100);
+  var halfScreenHeight = vh(50);
   var myMessageTheme = messagesContext == null ? void 0 : messagesContext.myMessageTheme;
   var wrapMessageInTheme = clientId === (message == null ? void 0 : (_message$user = message.user) == null ? void 0 : _message$user.id) && !!myMessageTheme;
   var _useState = (0, _react.useState)(JSON.stringify(myMessageTheme)),
@@ -250,7 +253,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 308,
+        lineNumber: 310,
         columnNumber: 5
       }
     }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -258,7 +261,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 316,
+        lineNumber: 318,
         columnNumber: 7
       }
     }, message && _react["default"].createElement(_reactNative.View, {
@@ -268,7 +271,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 318,
+        lineNumber: 320,
         columnNumber: 11
       }
     }, handleReaction && ownCapabilities != null && ownCapabilities.sendReaction ? _react["default"].createElement(OverlayReactionList, {
@@ -281,7 +284,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 327,
+        lineNumber: 329,
         columnNumber: 15
       }
     }) : null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -302,7 +305,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 334,
+        lineNumber: 336,
         columnNumber: 13
       }
     }, alignment === 'left' && MessageAvatar && _react["default"].createElement(MessageAvatar, {
@@ -312,7 +315,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 350,
+        lineNumber: 352,
         columnNumber: 17
       }
     }), _react["default"].createElement(_reactNative.View, {
@@ -328,7 +331,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 352,
+        lineNumber: 354,
         columnNumber: 15
       }
     }, messagesContext == null ? void 0 : (_messagesContext$mess = messagesContext.messageContentOrder) == null ? void 0 : _messagesContext$mess.map(function (messageContentType, messageContentOrderIndex) {
@@ -340,20 +343,20 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 394,
+              lineNumber: 396,
               columnNumber: 29
             }
           }, _react["default"].createElement(Reply, {
             quotedMessage: message.quoted_message,
             styles: {
               messageContainer: {
-                maxWidth: (0, _utils.vw)(60)
+                maxWidth: vw(60)
               }
             },
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 398,
+              lineNumber: 400,
               columnNumber: 31
             }
           }));
@@ -365,7 +368,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
               __self: _this,
               __source: {
                 fileName: _jsxFileName,
-                lineNumber: 415,
+                lineNumber: 417,
                 columnNumber: 31
               }
             });
@@ -378,7 +381,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 424,
+              lineNumber: 426,
               columnNumber: 29
             }
           });
@@ -395,7 +398,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 434,
+              lineNumber: 436,
               columnNumber: 29
             }
           });
@@ -410,7 +413,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 449,
+              lineNumber: 451,
               columnNumber: 27
             }
           });
@@ -423,7 +426,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 463,
+        lineNumber: 465,
         columnNumber: 15
       }
     })), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
@@ -445,7 +448,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 473,
+        lineNumber: 475,
         columnNumber: 15
       }
     }) : null)));
@@ -456,7 +459,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 502,
+      lineNumber: 504,
       columnNumber: 5
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -464,7 +467,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 503,
+      lineNumber: 505,
       columnNumber: 7
     }
   }, _react["default"].createElement(_MessageContext.MessageProvider, {
@@ -472,7 +475,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 504,
+      lineNumber: 506,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -480,7 +483,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 505,
+      lineNumber: 507,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -489,7 +492,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 506,
+      lineNumber: 508,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -500,7 +503,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 510,
+      lineNumber: 512,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -508,7 +511,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 516,
+      lineNumber: 518,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNative.SafeAreaView, {
@@ -516,7 +519,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 517,
+      lineNumber: 519,
       columnNumber: 19
     }
   }, isScrollEnabled ? _react["default"].createElement(_reactNativeGestureHandler.ScrollView, {
@@ -529,7 +532,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 519,
+      lineNumber: 521,
       columnNumber: 23
     }
   }, renderContent()) : renderContent(messageTextNumberOfLines)))))))));
@@ -579,7 +582,7 @@ var MessageOverlay = function MessageOverlay(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 621,
+      lineNumber: 623,
       columnNumber: 5
     }
   }));